@syncfusion/ej2-navigations 29.1.41 → 29.2.5

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

@@ -2285,8 +2285,8 @@ let MenuBase = class MenuBase extends Component {
             ul.style.left = left + px;
         }
     }
-    getMenuWidth(cmenu, width, isRtl) {
-        const caretIcon = cmenu.getElementsByClassName(CARET)[0];
+    getMenuWidth(menuElement, width, isRtl) {
+        const caretIcon = menuElement.getElementsByClassName(CARET)[0];
         if (caretIcon) {
             width += parseInt(getComputedStyle(caretIcon)[isRtl ? 'marginRight' : 'marginLeft'], 10);
         }
@@ -2364,7 +2364,7 @@ let MenuBase = class MenuBase extends Component {
                     args.item.setAttribute('aria-expanded', 'false');
                     args.item.classList.add('e-menu-caret-icon');
                 }
-                if (this.isMenu && this.template) {
+                if (this.template) {
                     args.item.setAttribute('id', args.curData[args.fields.id].toString());
                     args.item.removeAttribute('data-uid');
                     if (args.item.classList.contains('e-level-1')) {
@@ -4895,7 +4895,10 @@ let Toolbar = class Toolbar extends Component {
     }
     popupEleWidth(el) {
         el.style.position = 'absolute';
-        let elWidth = this.isVertical ? el.offsetHeight : el.offsetWidth;
+        const style = window.getComputedStyle(el);
+        let elWidth = this.isVertical
+            ? el.offsetHeight
+            : el.offsetWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
         const btnText = el.querySelector('.' + CLS_TBARBTNTEXT);
         if (el.classList.contains('e-tbtn-align') || el.classList.contains(CLS_TBARTEXT)) {
             const btn = el.children[0];
@@ -5521,6 +5524,10 @@ let Toolbar = class Toolbar extends Component {
         return isNullOrUndefined(ele.getAttribute('data-tabindex')) ? '-1' : ele.getAttribute('data-tabindex');
     }
     itemClick(e) {
+        const itemClosest = !isNullOrUndefined(closest(e.currentTarget, '.' + CLS_TEMPLATE));
+        if (itemClosest) {
+            return;
+        }
         this.activeEleSwitch(e.currentTarget);
     }
     activeEleSwitch(ele) {
@@ -11782,8 +11789,9 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                 const rippleIcons = select('.' + ICON, li);
                 this.removeHover();
                 this.setFocusElement(li);
-                if (this.showCheckBox && !li.classList.contains('e-disable')) {
-                    const checkWrapper = closest(target, '.' + CHECKBOXWRAP);
+                const isExpandCollapseIcon = classList.contains(EXPANDABLE) || classList.contains(COLLAPSIBLE);
+                if (this.showCheckBox && !li.classList.contains('e-disable') && !isExpandCollapseIcon) {
+                    const checkWrapper = this.checkOnClick ? select('.' + CHECKBOXWRAP, li) : closest(target, '.' + CHECKBOXWRAP);
                     if (!isNullOrUndefined(checkWrapper)) {
                         const checkElement = select('.' + CHECKBOXFRAME, checkWrapper);
                         this.validateCheckNode(checkWrapper, checkElement.classList.contains(CHECK), li, event.originalEvent);
@@ -12332,6 +12340,15 @@ let TreeView = TreeView_1 = class TreeView extends Component {
     }
     selectNode(li, e, multiSelect) {
         if (isNullOrUndefined(li) || (!this.allowMultiSelection && this.isActive(li) && !isNullOrUndefined(e))) {
+            if (this.checkOnClick) {
+                const checkboxElement = select(' .' + CHECKBOXFRAME, li);
+                if (!isNullOrUndefined(checkboxElement) && checkboxElement.classList.contains(CHECK)) {
+                    addClass([li], ACTIVE);
+                }
+                else {
+                    removeClass([li], ACTIVE);
+                }
+            }
             this.setFocusElement(li);
             return;
         }
@@ -12516,6 +12533,9 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         else {
             this.isFirstRender = true;
             this.renderChildNodes(currLi, expandChild, callback, null, isFromExpandAll);
+            if (isNullOrUndefined(this.expandChildren) || this.expandChildren.length === 0) {
+                return;
+            }
             const liEles = selectAll('.' + LISTITEM, currLi);
             for (let i = 0; i < liEles.length; i++) {
                 const id = this.getId(liEles[parseInt(i.toString(), 10)]);
@@ -12697,6 +12717,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             }
         }
         this.changeState(checkWrap, isCheck ? 'uncheck' : 'check', e, true);
+        this.updateActiveClass(li, isCheck);
         if (this.autoCheck) {
             this.ensureChildCheckState(li);
             this.updateOldCheckedData([this.getNodeData(li)]);
@@ -12712,6 +12733,17 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         }
         this.nodeCheckedEvent(checkWrap, isCheck, e);
     }
+    updateActiveClass(liElement, checkStatus) {
+        if (this.showCheckBox && this.checkOnClick) {
+            if (checkStatus === 'check' || checkStatus === false) {
+                this.removeSelectAll();
+                addClass([liElement], ACTIVE);
+            }
+            else if (checkStatus === 'uncheck' || checkStatus === 'indeterminate' || checkStatus === true) {
+                removeClass([liElement], ACTIVE);
+            }
+        }
+    }
     /**
      * Update checkedNodes when UI interaction happens before the child node renders in DOM
      *
@@ -13143,11 +13175,11 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             removeClass(hoveredNode, HOVER);
         }
     }
-    getNodeData(currLi, fromDS) {
+    getNodeData(currLi, fromDS, dragData) {
         if (!isNullOrUndefined(currLi) && currLi.classList.contains(LISTITEM) &&
             !isNullOrUndefined(closest(currLi, '.' + CONTROL)) && closest(currLi, '.' + CONTROL).classList.contains(ROOT)) {
             const id = currLi.getAttribute('data-uid');
-            const text = this.getText(currLi, fromDS);
+            const text = this.getText(currLi, fromDS, dragData);
             const pNode = closest(currLi.parentNode, '.' + LISTITEM);
             const pid = pNode ? pNode.getAttribute('data-uid') : null;
             const selected = currLi.classList.contains(ACTIVE);
@@ -13166,12 +13198,12 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         }
         return { id: '', text: '', parentID: '', selected: false, expanded: false, isChecked: '', hasChildren: false };
     }
-    getText(currLi, fromDS) {
+    getText(currLi, fromDS, dragData) {
         if (fromDS) {
-            const nodeData = this.getNodeObject(currLi.getAttribute('data-uid'));
+            const nodeData = !isNullOrUndefined(dragData) ? dragData : this.getNodeObject(currLi.getAttribute('data-uid'));
             const level = parseFloat(currLi.getAttribute('aria-level'));
             const nodeFields = this.getFields(this.fields, level, 1);
-            return getValue(nodeFields.text, nodeData);
+            return !isNullOrUndefined(dragData) ? dragData.text : getValue(nodeFields.text, nodeData);
         }
         return select('.' + LISTTEXT, currLi).textContent;
     }
@@ -13724,8 +13756,9 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         if (this.fields.dataSource instanceof DataManager === false) {
             this.preventExpand = false;
         }
+        const dragData = isNullOrUndefined(dragObj) ? null : dragObj.dragData;
         for (let i = 0; i < liArray.length; i++) {
-            nodeData.push(this.getNode(liArray[parseInt(i.toString(), 10)]));
+            nodeData.push(this.getNodeData(this.getElement(liArray[parseInt(i.toString(), 10)]), true, dragData));
         }
         this.trigger('nodeDropped', this.getDragEvent(e.event, dragObj, dropTarget, e.target, e.dragData.draggedElement, null, level, drop));
         if (dragObj.element.id !== this.element.id) {
@@ -13840,7 +13873,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         const id = this.getId(dragLi);
         const removedData = dragObj.updateChildField(dragObj.treeData, dragObj.fields, id, null, null, true);
         const refId = this.getId(dropLi);
-        const index = this.getDataPos(this.treeData, this.fields, refId);
+        const index = refId ? this.getDataPos(this.treeData, this.fields, refId) : null;
         const parentId = this.getId(dropParentLi);
         if (this.dataType === 1) {
             this.updateField(this.treeData, this.fields, parentId, 'hasChildren', true);
@@ -15750,6 +15783,9 @@ __decorate$8([
 __decorate$8([
     Property(false)
 ], TreeView.prototype, "showCheckBox", void 0);
+__decorate$8([
+    Property(false)
+], TreeView.prototype, "checkOnClick", void 0);
 __decorate$8([
     Property(true)
 ], TreeView.prototype, "autoCheck", void 0);