@syncfusion/ej2-navigations 20.4.48 → 20.4.51

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.4.48
+*  version : 20.4.51
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-navigations@*",
-  "_id": "@syncfusion/ej2-navigations@20.4.44",
+  "_id": "@syncfusion/ej2-navigations@20.4.49",
   "_inBundle": false,
-  "_integrity": "sha512-WBZVEqEUCdzWUNFnD/qGx9OeZ55U7NUCJdnthrTgBQ7JETPKVpwB1xyOlT0NCEFmGvsOONlyJv9qWzzNs4wXTw==",
+  "_integrity": "sha512-rX8KgboFWrQ9npRnVSG+EDY7IbrsEI2NrKmq/EogWx5hsQrTbix1pxivr+eHxaz7YdpFZx4izzAL7dmBENJXZg==",
   "_location": "/@syncfusion/ej2-navigations",
   "_phantomChildren": {},
   "_requested": {
@@ -38,8 +38,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-navigations"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-20.4.44.tgz",
-  "_shasum": "47f1f4b77ec688da78a5579c24e16dfb92f9e606",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-20.4.49.tgz",
+  "_shasum": "37c8a37b4c1c6c112ae6e12f2ccf4ee129538dbf",
   "_spec": "@syncfusion/ej2-navigations@*",
   "_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
   "author": {
@@ -50,12 +50,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.4.48",
-    "@syncfusion/ej2-buttons": "~20.4.48",
+    "@syncfusion/ej2-base": "~20.4.51",
+    "@syncfusion/ej2-buttons": "~20.4.50",
     "@syncfusion/ej2-data": "~20.4.48",
-    "@syncfusion/ej2-inputs": "~20.4.48",
-    "@syncfusion/ej2-lists": "~20.4.48",
-    "@syncfusion/ej2-popups": "~20.4.48"
+    "@syncfusion/ej2-inputs": "~20.4.51",
+    "@syncfusion/ej2-lists": "~20.4.50",
+    "@syncfusion/ej2-popups": "~20.4.51"
   },
   "deprecated": false,
   "description": "A package of Essential JS 2 navigation components such as Tree-view, Tab, Toolbar, Context-menu, and Accordion which is used to navigate from one page to another",
@@ -160,6 +160,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "20.4.48",
+  "version": "20.4.51",
   "sideEffects": false
 }

package/src/carousel/carousel.js

@@ -616,17 +616,15 @@ var Carousel = /** @class */ (function (_super) {
                     container.style.transform = "translateX(" + -(slideWidth) * (currentIndex) + "px)";
                 }
             }
-            var 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);
                 }
             }

package/src/common/h-scroll.js

@@ -349,6 +349,9 @@ var HScroll = /** @class */ (function (_super) {
         else {
             this.scrollEle.scrollLeft -= scrollVal;
         }
+        if (this.enableRtl && this.scrollEle.scrollLeft > 0) {
+            this.scrollEle.scrollLeft = 0;
+        }
     };
     HScroll.prototype.frameScrollRequest = function (scrollVal, action, isContinuous) {
         var _this = this;

package/src/common/menu-base.js

@@ -1653,6 +1653,10 @@ var MenuBase = /** @class */ (function (_super) {
                     var idx = void 0;
                     var navIdx = void 0;
                     var item = void 0;
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    if (this_1.isReact && this_1.template) {
+                        this_1.clearTemplate(['template']);
+                    }
                     if (!Object.keys(oldProp.items).length) {
                         this_1.updateItem(this_1.element, this_1.items);
                         if (this_1.enableScrolling && this_1.element.parentElement.classList.contains('e-custom-scroll')) {
@@ -1684,11 +1688,6 @@ var MenuBase = /** @class */ (function (_super) {
                             navIdx.length = 0;
                         }
                     }
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    if (this_1.isReact && this_1.template) {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        this_1.portals = [];
-                    }
                     break;
                 }
             }

package/src/toolbar/toolbar.js

@@ -2125,7 +2125,7 @@ var Toolbar = /** @class */ (function (_super) {
                                     this.destroyMode();
                                 }
                                 var 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)]);

package/src/treeview/treeview.d.ts

@@ -1225,6 +1225,7 @@ export declare class TreeView extends Component<HTMLElement> implements INotifyP
     private addSuccess;
     private dmFailure;
     private updatePreviousText;
+    private getHierarchicalParentId;
     /**
      * Called internally if any of the property value changed.
      * @param  {TreeView} newProp

package/src/treeview/treeview.js

@@ -4472,6 +4472,27 @@ var TreeView = /** @class */ (function (_super) {
         var txtEle = select('.' + LISTTEXT, liEle);
         this.updateText(liEle, txtEle, this.oldText, prevent);
     };
+    TreeView.prototype.getHierarchicalParentId = function (node, data, parentsID) {
+        var _this = this;
+        var index = data.findIndex(function (data) { return data[_this.fields.id] && data[_this.fields.id].toString() === node; });
+        if (index == -1) {
+            for (var i = 0; i < data.length; i++) {
+                var childItems = getValue(this.fields.child.toString(), data[i]);
+                if (!isNOU(childItems)) {
+                    index = childItems.findIndex(function (data) { return 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
@@ -4741,13 +4762,26 @@ var TreeView = /** @class */ (function (_super) {
      * @param  {string | Element} node - Specifies ID of TreeView node/TreeView nodes.
      */
     TreeView.prototype.ensureVisible = function (node) {
+        var parentsId = [];
+        if (this.dataType == 1) {
+            var nodeData = this.getTreeData(node);
+            while (nodeData.length != 0 && !isNOU(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);
         var liEle = this.getElement(node);
-        if (isNOU(liEle)) {
-            return;
+        if (!isNOU(liEle)) {
+            if (typeof node == 'object') {
+                var parents = this.parents(liEle, '.' + LISTITEM);
+                this.expandAll(parents);
+            }
+            setTimeout(function () { liEle.scrollIntoView({ behavior: "smooth" }); }, 450);
         }
-        var parents = this.parents(liEle, '.' + LISTITEM);
-        this.expandAll(parents);
-        setTimeout(function () { liEle.scrollIntoView(true); }, 450);
     };
     /**
      * Expands all the collapsed TreeView nodes. You can expand the specific nodes by passing the array of collapsed nodes

package/styles/accordion/_theme.scss

@@ -8,16 +8,16 @@
     border: $acrdn-border-size $acrdn-border-type $acrdn-default-border;
     border-radius: $acrdn-border-radius;
 
-    .e-active {
-      background: $acrdn-active-bg-color;
-    }
-
     .e-acrdn-item {
       border-color: $acrdn-item-border-color;
       border-style: $acrdn-item-border-nav-type;
       border-width: $acrdn-item-border-size;
       border-radius: $acrdn-item-border-radius;
 
+      &.e-active {
+        background: $acrdn-active-bg-color;
+      }
+
       &.e-select:last-child {
         border-bottom: $acrdn-item-select-last-child-border-bottom;
         border-radius: $acrdn-item-select-last-child-border-radius;

package/styles/accordion/bootstrap-dark.css

@@ -274,15 +274,15 @@
   border: 1px none #505050;
   border-radius: 0;
 }
-.e-accordion .e-active {
-  background: #484848;
-}
 .e-accordion .e-acrdn-item {
   border-color: #505050;
   border-style: solid;
   border-width: 0;
   border-radius: 4px;
 }
+.e-accordion .e-acrdn-item.e-active {
+  background: #484848;
+}
 .e-accordion .e-acrdn-item.e-select:last-child {
   border-bottom: 1px solid #505050;
   border-radius: 4px;

package/styles/accordion/bootstrap.css

@@ -275,15 +275,15 @@
   border: 1px none #ddd;
   border-radius: 0;
 }
-.e-accordion .e-active {
-  background: #fff;
-}
 .e-accordion .e-acrdn-item {
   border-color: #ddd;
   border-style: solid;
   border-width: 0;
   border-radius: 4px;
 }
+.e-accordion .e-acrdn-item.e-active {
+  background: #fff;
+}
 .e-accordion .e-acrdn-item.e-select:last-child {
   border-bottom: 1px solid #ddd;
   border-radius: 4px;

package/styles/accordion/bootstrap4.css

@@ -274,15 +274,15 @@
   border: 1px solid rgba(0, 0, 0, 0.13);
   border-radius: 4px;
 }
-.e-accordion .e-active {
-  background: #fff;
-}
 .e-accordion .e-acrdn-item {
   border-color: rgba(0, 0, 0, 0.13);
   border-style: solid;
   border-width: 0 0 1px 0;
   border-radius: 4px 4px 0 0;
 }
+.e-accordion .e-acrdn-item.e-active {
+  background: #fff;
+}
 .e-accordion .e-acrdn-item.e-select:last-child {
   border-bottom: 0;
   border-radius: 0 0 4px 4px;

package/styles/accordion/bootstrap5-dark.css

@@ -276,15 +276,15 @@
   border: 1px solid #444c54;
   border-radius: 4px;
 }
-.e-accordion .e-active {
-  background: #212529;
-}
 .e-accordion .e-acrdn-item {
   border-color: #444c54;
   border-style: solid;
   border-width: 0 0 1px 0;
   border-radius: 0;
 }
+.e-accordion .e-acrdn-item.e-active {
+  background: #212529;
+}
 .e-accordion .e-acrdn-item.e-select:last-child {
   border-bottom: 0;
   border-radius: 0;

package/styles/accordion/bootstrap5.css

@@ -276,15 +276,15 @@
   border: 1px solid #dee2e6;
   border-radius: 4px;
 }
-.e-accordion .e-active {
-  background: #fff;
-}
 .e-accordion .e-acrdn-item {
   border-color: #dee2e6;
   border-style: solid;
   border-width: 0 0 1px 0;
   border-radius: 0;
 }
+.e-accordion .e-acrdn-item.e-active {
+  background: #fff;
+}
 .e-accordion .e-acrdn-item.e-select:last-child {
   border-bottom: 0;
   border-radius: 0;

package/styles/accordion/fabric-dark.css

@@ -274,15 +274,15 @@
   border: 1px solid #414040;
   border-radius: 0;
 }
-.e-accordion .e-active {
-  background: #201f1f;
-}
 .e-accordion .e-acrdn-item {
   border-color: #201f1f;
   border-style: solid;
   border-width: 1px 0 1px 0;
   border-radius: 0;
 }
+.e-accordion .e-acrdn-item.e-active {
+  background: #201f1f;
+}
 .e-accordion .e-acrdn-item.e-select:last-child {
   border-bottom: 1px solid #201f1f;
   border-radius: 0;

package/styles/accordion/fabric.css

@@ -275,15 +275,15 @@
   border: 1px solid #eaeaea;
   border-radius: 0;
 }
-.e-accordion .e-active {
-  background: #fff;
-}
 .e-accordion .e-acrdn-item {
   border-color: #fff;
   border-style: solid;
   border-width: 1px 0 1px 0;
   border-radius: 0;
 }
+.e-accordion .e-acrdn-item.e-active {
+  background: #fff;
+}
 .e-accordion .e-acrdn-item.e-select:last-child {
   border-bottom: 1px solid #fff;
   border-radius: 0;

package/styles/accordion/fluent-dark.css

@@ -275,15 +275,15 @@
   border: 1px solid #292827;
   border-radius: 2px;
 }
-.e-accordion .e-active {
-  background: #1b1a19;
-}
 .e-accordion .e-acrdn-item {
   border-color: #292827;
   border-style: solid;
   border-width: 0;
   border-radius: 0;
 }
+.e-accordion .e-acrdn-item.e-active {
+  background: #1b1a19;
+}
 .e-accordion .e-acrdn-item.e-select:last-child {
   border-bottom: 0;
   border-radius: 0;

package/styles/accordion/fluent.css

@@ -275,15 +275,15 @@
   border: 1px solid #edebe9;
   border-radius: 2px;
 }
-.e-accordion .e-active {
-  background: #fff;
-}
 .e-accordion .e-acrdn-item {
   border-color: #edebe9;
   border-style: solid;
   border-width: 0;
   border-radius: 0;
 }
+.e-accordion .e-acrdn-item.e-active {
+  background: #fff;
+}
 .e-accordion .e-acrdn-item.e-select:last-child {
   border-bottom: 0;
   border-radius: 0;

package/styles/accordion/highcontrast-light.css

@@ -274,15 +274,15 @@
   border: 1px solid #757575;
   border-radius: 0;
 }
-.e-accordion .e-active {
-  background: #ccc;
-}
 .e-accordion .e-acrdn-item {
   border-color: #757575;
   border-style: solid;
   border-width: 0;
   border-radius: 0;
 }
+.e-accordion .e-acrdn-item.e-active {
+  background: #ccc;
+}
 .e-accordion .e-acrdn-item.e-select:last-child {
   border-bottom: 0;
   border-radius: 0;

package/styles/accordion/highcontrast.css

@@ -275,15 +275,15 @@
   border: 1px solid #969696;
   border-radius: 0;
 }
-.e-accordion .e-active {
-  background: #000;
-}
 .e-accordion .e-acrdn-item {
   border-color: #969696;
   border-style: solid;
   border-width: 0;
   border-radius: 0;
 }
+.e-accordion .e-acrdn-item.e-active {
+  background: #000;
+}
 .e-accordion .e-acrdn-item.e-select:last-child {
   border-bottom: 0;
   border-radius: 0;

package/styles/accordion/material-dark.css

@@ -275,15 +275,15 @@
   border: 1px solid #616161;
   border-radius: 0;
 }
-.e-accordion .e-active {
-  background: #303030;
-}
 .e-accordion .e-acrdn-item {
   border-color: #616161;
   border-style: solid;
   border-width: 0;
   border-radius: 0;
 }
+.e-accordion .e-acrdn-item.e-active {
+  background: #303030;
+}
 .e-accordion .e-acrdn-item.e-select:last-child {
   border-bottom: 1px solid transparent;
   border-radius: 0;

package/styles/accordion/material.css

@@ -276,15 +276,15 @@
   border: 1px solid rgba(0, 0, 0, 0.12);
   border-radius: 0;
 }
-.e-accordion .e-active {
-  background: #fff;
-}
 .e-accordion .e-acrdn-item {
   border-color: rgba(0, 0, 0, 0.12);
   border-style: solid;
   border-width: 0;
   border-radius: 0;
 }
+.e-accordion .e-acrdn-item.e-active {
+  background: #fff;
+}
 .e-accordion .e-acrdn-item.e-select:last-child {
   border-bottom: 1px solid transparent;
   border-radius: 0;

package/styles/accordion/tailwind-dark.css

@@ -276,15 +276,15 @@
   border: 1px solid #4b5563;
   border-radius: 0;
 }
-.e-accordion .e-active {
-  background: #1f2937;
-}
 .e-accordion .e-acrdn-item {
   border-color: #4b5563;
   border-style: solid;
   border-width: 0 0 1px 0;
   border-radius: 4px 4px 0 0;
 }
+.e-accordion .e-acrdn-item.e-active {
+  background: #1f2937;
+}
 .e-accordion .e-acrdn-item.e-select:last-child {
   border-bottom: 0;
   border-radius: 0 0 4px 4px;

package/styles/accordion/tailwind.css

@@ -276,15 +276,15 @@
   border: 1px solid #e5e7eb;
   border-radius: 0;
 }
-.e-accordion .e-active {
-  background: #fff;
-}
 .e-accordion .e-acrdn-item {
   border-color: #e5e7eb;
   border-style: solid;
   border-width: 0 0 1px 0;
   border-radius: 4px 4px 0 0;
 }
+.e-accordion .e-acrdn-item.e-active {
+  background: #fff;
+}
 .e-accordion .e-acrdn-item.e-select:last-child {
   border-bottom: 0;
   border-radius: 0 0 4px 4px;

package/styles/bootstrap-dark.css

@@ -2774,15 +2774,15 @@
   border: 1px none #505050;
   border-radius: 0;
 }
-.e-accordion .e-active {
-  background: #484848;
-}
 .e-accordion .e-acrdn-item {
   border-color: #505050;
   border-style: solid;
   border-width: 0;
   border-radius: 4px;
 }
+.e-accordion .e-acrdn-item.e-active {
+  background: #484848;
+}
 .e-accordion .e-acrdn-item.e-select:last-child {
   border-bottom: 1px solid #505050;
   border-radius: 4px;
@@ -8751,6 +8751,7 @@ ejs-sidebar {
   line-height: 42px;
   margin-right: 8px;
   text-align: center;
+  margin-bottom: 4px;
 }
 .e-menu-wrapper ul .e-menu-item .e-caret,
 .e-menu-container ul .e-menu-item .e-caret {

package/styles/bootstrap.css

@@ -2778,15 +2778,15 @@
   border: 1px none #ddd;
   border-radius: 0;
 }
-.e-accordion .e-active {
-  background: #fff;
-}
 .e-accordion .e-acrdn-item {
   border-color: #ddd;
   border-style: solid;
   border-width: 0;
   border-radius: 4px;
 }
+.e-accordion .e-acrdn-item.e-active {
+  background: #fff;
+}
 .e-accordion .e-acrdn-item.e-select:last-child {
   border-bottom: 1px solid #ddd;
   border-radius: 4px;
@@ -8767,6 +8767,7 @@ ejs-sidebar {
   line-height: 40px;
   margin-right: 8px;
   text-align: center;
+  margin-bottom: 4px;
 }
 .e-menu-wrapper ul .e-menu-item .e-caret,
 .e-menu-container ul .e-menu-item .e-caret {

package/styles/bootstrap4.css

@@ -2777,15 +2777,15 @@
   border: 1px solid rgba(0, 0, 0, 0.13);
   border-radius: 4px;
 }
-.e-accordion .e-active {
-  background: #fff;
-}
 .e-accordion .e-acrdn-item {
   border-color: rgba(0, 0, 0, 0.13);
   border-style: solid;
   border-width: 0 0 1px 0;
   border-radius: 4px 4px 0 0;
 }
+.e-accordion .e-acrdn-item.e-active {
+  background: #fff;
+}
 .e-accordion .e-acrdn-item.e-select:last-child {
   border-bottom: 0;
   border-radius: 0 0 4px 4px;
@@ -8279,7 +8279,7 @@
 }
 .e-treeview.e-rtl .e-icon-collapsible,
 .e-treeview.e-rtl .e-icon-expandable {
-  margin: -0.5px -24px 0 0;
+  margin: -0.5px -20px 0 0;
 }
 .e-treeview.e-rtl .e-sibling::before {
   right: 0;
@@ -8852,6 +8852,7 @@ ejs-sidebar {
   line-height: 30px;
   margin-right: 8px;
   text-align: center;
+  margin-bottom: 4px;
 }
 .e-menu-wrapper ul .e-menu-item .e-caret,
 .e-menu-container ul .e-menu-item .e-caret {

package/styles/bootstrap5-dark.css

@@ -2845,15 +2845,15 @@
   border: 1px solid #444c54;
   border-radius: 4px;
 }
-.e-accordion .e-active {
-  background: #212529;
-}
 .e-accordion .e-acrdn-item {
   border-color: #444c54;
   border-style: solid;
   border-width: 0 0 1px 0;
   border-radius: 0;
 }
+.e-accordion .e-acrdn-item.e-active {
+  background: #212529;
+}
 .e-accordion .e-acrdn-item.e-select:last-child {
   border-bottom: 0;
   border-radius: 0;
@@ -8932,6 +8932,7 @@ ejs-sidebar {
   line-height: 32px;
   margin-right: 8px;
   text-align: center;
+  margin-bottom: 4px;
 }
 .e-menu-wrapper ul .e-menu-item .e-caret,
 .e-menu-container ul .e-menu-item .e-caret {

package/styles/bootstrap5.css

@@ -2845,15 +2845,15 @@
   border: 1px solid #dee2e6;
   border-radius: 4px;
 }
-.e-accordion .e-active {
-  background: #fff;
-}
 .e-accordion .e-acrdn-item {
   border-color: #dee2e6;
   border-style: solid;
   border-width: 0 0 1px 0;
   border-radius: 0;
 }
+.e-accordion .e-acrdn-item.e-active {
+  background: #fff;
+}
 .e-accordion .e-acrdn-item.e-select:last-child {
   border-bottom: 0;
   border-radius: 0;
@@ -8932,6 +8932,7 @@ ejs-sidebar {
   line-height: 32px;
   margin-right: 8px;
   text-align: center;
+  margin-bottom: 4px;
 }
 .e-menu-wrapper ul .e-menu-item .e-caret,
 .e-menu-container ul .e-menu-item .e-caret {

package/styles/context-menu/_fluent-definition.scss

@@ -11,7 +11,7 @@ $cmenu-caret-blank-icon: $text-base !default;
 $cmenu-caret-font-size: 16px !default;
 $cmenu-caret-icon: '\e7c2' !default;
 $cmenu-caret-icon-rtl: '\e7c1' !default;
-$cmenu-caret-li-padding: 24px !default;
+$cmenu-caret-li-padding: 36px !default;
 $cmenu-caret-right: 7px !default;
 $cmenu-icon-margin-right: 8px !default;
 $cmenu-li-height: 36px !default;