@syncfusion/ej2-navigations 29.2.7 → 30.1.37

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 29.2.7
+*  version : 30.1.37
 *  Copyright Syncfusion Inc. 2001 - 2024. 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,69 +1,21 @@
 {
-  "_from": "@syncfusion/ej2-navigations@*",
-  "_id": "@syncfusion/ej2-navigations@29.2.5",
-  "_inBundle": false,
-  "_integrity": "sha512-n2NIKQ0JyUt5r4YzRXlG6t0AAOkDBDviisvphlVKg2fZXLaN1Y0TjMpoJiVILithxukWYuPwTeaj9MbX4z4M6w==",
-  "_location": "/@syncfusion/ej2-navigations",
-  "_phantomChildren": {},
-  "_requested": {
-    "type": "range",
-    "registry": true,
-    "raw": "@syncfusion/ej2-navigations@*",
-    "name": "@syncfusion/ej2-navigations",
-    "escapedName": "@syncfusion%2fej2-navigations",
-    "scope": "@syncfusion",
-    "rawSpec": "*",
-    "saveSpec": null,
-    "fetchSpec": "*"
-  },
-  "_requiredBy": [
-    "/",
-    "/@syncfusion/ej2",
-    "/@syncfusion/ej2-angular-navigations",
-    "/@syncfusion/ej2-charts",
-    "/@syncfusion/ej2-diagrams",
-    "/@syncfusion/ej2-documenteditor",
-    "/@syncfusion/ej2-dropdowns",
-    "/@syncfusion/ej2-filemanager",
-    "/@syncfusion/ej2-gantt",
-    "/@syncfusion/ej2-grids",
-    "/@syncfusion/ej2-image-editor",
-    "/@syncfusion/ej2-inplace-editor",
-    "/@syncfusion/ej2-interactive-chat",
-    "/@syncfusion/ej2-kanban",
-    "/@syncfusion/ej2-pdfviewer",
-    "/@syncfusion/ej2-pivotview",
-    "/@syncfusion/ej2-react-navigations",
-    "/@syncfusion/ej2-ribbon",
-    "/@syncfusion/ej2-richtexteditor",
-    "/@syncfusion/ej2-schedule",
-    "/@syncfusion/ej2-spreadsheet",
-    "/@syncfusion/ej2-vue-navigations"
-  ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-29.2.5.tgz",
-  "_shasum": "ae405b35bb6f114d6a709cdb4b605491dacb797c",
-  "_spec": "@syncfusion/ej2-navigations@*",
-  "_where": "/jenkins/workspace/elease-automation_release_29.1.1/packages/included",
-  "author": {
-    "name": "Syncfusion Inc."
-  },
-  "bugs": {
-    "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/issues"
-  },
-  "bundleDependencies": false,
+  "name": "@syncfusion/ej2-navigations",
+  "version": "30.1.37",
+  "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",
+  "author": "Syncfusion Inc.",
+  "license": "SEE LICENSE IN license",
+  "main": "./dist/ej2-navigations.umd.min.js",
+  "module": "./index.js",
+  "es2015": "./dist/es6/ej2-navigations.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~29.2.4",
-    "@syncfusion/ej2-buttons": "~29.2.5",
-    "@syncfusion/ej2-data": "~29.2.4",
-    "@syncfusion/ej2-inputs": "~29.2.5",
-    "@syncfusion/ej2-lists": "~29.2.4",
-    "@syncfusion/ej2-popups": "~29.2.7"
+    "@syncfusion/ej2-base": "~30.1.37",
+    "@syncfusion/ej2-buttons": "~30.1.37",
+    "@syncfusion/ej2-data": "~30.1.37",
+    "@syncfusion/ej2-inputs": "~30.1.37",
+    "@syncfusion/ej2-lists": "~30.1.37",
+    "@syncfusion/ej2-popups": "~30.1.37"
   },
-  "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",
   "devDependencies": {},
-  "es2015": "./dist/es6/ej2-navigations.es5.js",
-  "homepage": "https://www.syncfusion.com/javascript-ui-controls",
   "keywords": [
     "ej2",
     "syncfusion",
@@ -153,15 +105,11 @@
     "trace page location",
     "list of breadcrumb links"
   ],
-  "license": "SEE LICENSE IN license",
-  "main": "./dist/ej2-navigations.umd.min.js",
-  "module": "./index.js",
-  "name": "@syncfusion/ej2-navigations",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
+    "url": "https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "29.2.7",
-  "sideEffects": false
+  "sideEffects": false,
+  "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/carousel/carousel.js

@@ -167,9 +167,6 @@ var Carousel = /** @class */ (function (_super) {
                     }
                     break;
                 case 'enableTouchSwipe':
-                    if (!this.enableTouchSwipe && this.touchModule) {
-                        this.touchModule.destroy();
-                    }
                     if (this.element.querySelector("." + CLS_ITEMS)) {
                         this.renderTouchActions();
                     }
@@ -572,9 +569,6 @@ var Carousel = /** @class */ (function (_super) {
         this.keyModule = new KeyboardEvents(this.element, { keyAction: this.keyHandler.bind(this), keyConfigs: this.keyConfigs });
     };
     Carousel.prototype.renderTouchActions = function () {
-        if (!this.enableTouchSwipe) {
-            return;
-        }
         this.touchModule = new Touch(this.element, { swipe: this.swipeHandler.bind(this) });
     };
     Carousel.prototype.applyAnimation = function () {
@@ -1142,7 +1136,7 @@ var Carousel = /** @class */ (function (_super) {
         }
     };
     Carousel.prototype.wireEvents = function () {
-        if (this.animationEffect !== 'Custom' && this.enableTouchSwipe) {
+        if (this.animationEffect !== 'Custom') {
             this.swipeModehandlers();
         }
         EventHandler.add(this.element, 'focusin focusout', this.onFocusActions, this);

package/src/sidebar/sidebar.js

@@ -202,6 +202,8 @@ var Sidebar = /** @class */ (function (_super) {
         var sibling = document.querySelector('.e-main-content') || this.targetEle;
         if (this.target && this.showBackdrop && sibling && !isNullOrUndefined(this.defaultBackdropDiv)) {
             removeClass([this.defaultBackdropDiv], DEFAULTBACKDROP);
+            this.defaultBackdropDiv.remove();
+            this.defaultBackdropDiv = null;
         }
         else if (this.showBackdrop && this.modal) {
             this.modal.style.display = 'none';
@@ -304,7 +306,9 @@ var Sidebar = /** @class */ (function (_super) {
                 removeClass([_this.element], CLOSE);
                 setStyle(_this.element, { 'width': formatUnit(_this.width) });
                 _this.setType(_this.type);
-                _this.createBackDrop();
+                if (_this.targetEle && !_this.targetEle.querySelector('.e-sidebar-overlay')) {
+                    _this.createBackDrop();
+                }
                 _this.setAnimation();
                 if (_this.type === 'Slide') {
                     document.body.classList.add('e-sidebar-overflow');

package/src/stepper/stepper.js

@@ -225,11 +225,6 @@ var Stepper = /** @class */ (function (_super) {
     Stepper.prototype.updateAnimation = function () {
         var progressEle = this.element.querySelector('.e-progressbar-value');
         if (this.animation.enable) {
-            if (this.animation.duration >= 0) {
-                if (progressEle) {
-                    progressEle.style.setProperty('--duration', ((this.animation.duration) + 'ms'));
-                }
-            }
             if (this.animation.delay >= 0) {
                 if (progressEle) {
                     progressEle.style.setProperty('--delay', ((this.animation.delay) + 'ms'));
@@ -808,6 +803,9 @@ var Stepper = /** @class */ (function (_super) {
         }
     };
     Stepper.prototype.navigationHandler = function (index, stepStatus, isUpdated) {
+        if (index !== this.activeStep && this.progressbar) {
+            this.progressbar.style.transitionDuration = this.animation.duration + 'ms';
+        }
         index = Math.min(index, this.steps.length - 1);
         var Itemslength = this.stepperItemElements.length;
         if (index >= 0 && index < Itemslength - 1) {
@@ -878,6 +876,9 @@ var Stepper = /** @class */ (function (_super) {
             this.updateIndicatorStatus(i, itemElement);
         }
         this.updateStepInteractions();
+        if (this.progressbar) {
+            this.progressbar.style.transitionDuration = '0ms';
+        }
     };
     Stepper.prototype.calculateProgressbarPos = function () {
         var _this = this;

package/src/tab/tab.js

@@ -334,6 +334,7 @@ var Tab = /** @class */ (function (_super) {
         if (this.isReact && this.portals && this.portals.length > 0) {
             this.renderReactTemplates(function () {
                 _this.refreshOverflow();
+                _this.selectingContent(_this.selectedItem, _this.isInteracted);
                 _this.refreshActiveBorder();
             });
         }
@@ -1407,7 +1408,9 @@ var Tab = /** @class */ (function (_super) {
                 }
                 break;
             case 'openPopup':
-                e.preventDefault();
+                if (!isNOU(e.target) && (e.target.classList.contains(CLS_WRAP))) {
+                    e.preventDefault();
+                }
                 if (!isNOU(this.popEle) && this.popEle.classList.contains(CLS_POPUP_CLOSE)) {
                     this.popObj.show(this.show);
                 }

package/src/toolbar/toolbar-model.d.ts

@@ -1,5 +1,5 @@
 import { Component, EventHandler, Property, Event, EmitType, BaseEventArgs } from '@syncfusion/ej2-base';import { addClass, removeClass, isVisible, closest, attributes, detach, classList, KeyboardEvents } from '@syncfusion/ej2-base';import { selectAll, setStyleAttribute as setStyle, KeyboardEventArgs, select } from '@syncfusion/ej2-base';import { isNullOrUndefined as isNOU, getUniqueID, formatUnit, Collection, compile as templateCompiler } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, NotifyPropertyChanges, ChildProperty, Browser, SanitizeHtmlHelper } from '@syncfusion/ej2-base';import { Popup } from '@syncfusion/ej2-popups';import { calculatePosition } from '@syncfusion/ej2-popups';import { Button, IconPosition } from '@syncfusion/ej2-buttons';import { HScroll } from '../common/h-scroll';import { VScroll } from '../common/v-scroll';
-import {OverflowOption,ItemType,DisplayMode,ItemAlign,ClickEventArgs,OverflowMode,BeforeCreateArgs} from "./toolbar";
+import {OverflowOption,ItemType,DisplayMode,ItemAlign,ClickEventArgs,OverflowMode,BeforeCreateArgs,KeyDownEventArgs} from "./toolbar";
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -284,4 +284,11 @@ export interface ToolbarModel extends ComponentModel{
      */
     beforeCreate?: EmitType<BeforeCreateArgs>;
 
+    /**
+     * The event will be fired when the keyboard interaction occurs on the Toolbar.
+     *
+     * @event keyDown
+     */
+    keyDown?: EmitType<KeyDownEventArgs>;
+
 }

package/src/toolbar/toolbar.d.ts

@@ -1,4 +1,5 @@
 import { Component, EmitType, BaseEventArgs } from '@syncfusion/ej2-base';
+import { KeyboardEventArgs } from '@syncfusion/ej2-base';
 import { INotifyPropertyChanged, ChildProperty } from '@syncfusion/ej2-base';
 import { ToolbarModel, ItemModel } from './toolbar-model';
 /**
@@ -65,6 +66,17 @@ export interface BeforeCreateArgs extends BaseEventArgs {
     /** Specifies the scrolling distance in scroller. */
     scrollStep: number;
 }
+/** An interface that holds options to control keyDown event in the toolbar. */
+export interface KeyDownEventArgs extends BaseEventArgs {
+    /** Defines the keyboard event arguments. */
+    originalEvent: KeyboardEventArgs;
+    /** Defines the prevent action. */
+    cancel?: boolean;
+    /** Defines the current Toolbar item. */
+    currentItem?: HTMLElement;
+    /** Defines the next Toolbar item. */
+    nextItem?: HTMLElement;
+}
 /**
  * An item object that is used to configure Toolbar commands.
  */
@@ -347,6 +359,12 @@ export declare class Toolbar extends Component<HTMLElement> implements INotifyPr
      * @event beforeCreate
      */
     beforeCreate: EmitType<BeforeCreateArgs>;
+    /**
+     * The event will be fired when the keyboard interaction occurs on the Toolbar.
+     *
+     * @event keyDown
+     */
+    keyDown: EmitType<KeyDownEventArgs>;
     /**
      * Removes the control from the DOM and also removes all its related events.
      *
@@ -382,6 +400,7 @@ export declare class Toolbar extends Component<HTMLElement> implements INotifyPr
     private remove;
     private elementFocus;
     private clstElement;
+    private getNextFocusableItem;
     private keyHandling;
     private keyActionHandler;
     /**

package/src/toolbar/toolbar.js

@@ -377,6 +377,38 @@ var Toolbar = /** @class */ (function (_super) {
         }
         return clst;
     };
+    Toolbar.prototype.getNextFocusableItem = function (currentItem, action) {
+        var selector = "." + CLS_ITEM + ":not(." + CLS_DISABLE + "):not(." + CLS_SEPARATOR + "):not(." + CLS_HIDDEN + ")";
+        var items = Array.from(this.element.querySelectorAll(selector));
+        var currentIndex = items.indexOf(currentItem);
+        if (currentIndex < 0) {
+            return null;
+        }
+        var nextIndex;
+        switch (action) {
+            case 'moveRight':
+            case 'moveDown':
+            case 'tab':
+                nextIndex = (currentIndex + 1) % items.length;
+                break;
+            case 'moveLeft':
+            case 'moveUp':
+                nextIndex = (currentIndex - 1 + items.length) % items.length;
+                break;
+            case 'home':
+                nextIndex = 0;
+                break;
+            case 'end':
+                nextIndex = items.length - 1;
+                break;
+            default:
+                nextIndex = currentIndex;
+        }
+        if (nextIndex >= 0 && nextIndex < items.length) {
+            return items[parseInt(nextIndex.toString(), 10)];
+        }
+        return null;
+    };
     Toolbar.prototype.keyHandling = function (clst, e, trgt, navChk, scrollChk) {
         var popObj = this.popObj;
         var rootEle = this.element;
@@ -442,19 +474,30 @@ var Toolbar = /** @class */ (function (_super) {
                 if (!this.isVertical) {
                     if (popObj && closest(trgt, '.e-popup')) {
                         var popEle = popObj.element;
-                        var popFrstEle = popEle.firstElementChild;
-                        if ((value === 'previous' && popFrstEle === clst)) {
-                            popEle.lastElementChild.firstChild.focus();
+                        if ((value === 'previous' && popEle.firstElementChild === clst)) {
+                            var lastVisibleEle = this.focusLastVisibleEle([].slice.call(popEle.children));
+                            if (lastVisibleEle) {
+                                this.elementFocus(lastVisibleEle);
+                            }
                         }
                         else if (value === 'next' && popEle.lastElementChild === clst) {
-                            popFrstEle.firstChild.focus();
+                            var firstVisibleEle = this.focusFirstVisibleEle([].slice.call(popEle.children));
+                            if (firstVisibleEle) {
+                                this.elementFocus(firstVisibleEle);
+                            }
                         }
                         else {
                             this.eleFocus(clst, value);
                         }
                     }
                     else if (e.action === 'moveDown' && popObj && isVisible(popObj.element)) {
-                        this.elementFocus(clst);
+                        var skipEle = this.eleContains(clst);
+                        if (skipEle) {
+                            this.eleFocus(clst, value);
+                        }
+                        else {
+                            this.elementFocus(clst);
+                        }
                     }
                 }
                 else {
@@ -500,8 +543,10 @@ var Toolbar = /** @class */ (function (_super) {
         }
     };
     Toolbar.prototype.keyActionHandler = function (e) {
+        var _this = this;
         var trgt = e.target;
-        if (trgt.tagName === 'INPUT' || trgt.tagName === 'TEXTAREA' || this.element.classList.contains(CLS_DISABLE)) {
+        if ((e.action === 'home' || e.action === 'end' || e.action === 'moveRight' || e.action === 'moveLeft' || e.action === 'moveUp' || e.action === 'moveDown')
+            && (trgt.tagName === 'INPUT' || trgt.tagName === 'TEXTAREA' || this.element.classList.contains(CLS_DISABLE))) {
             return;
         }
         e.preventDefault();
@@ -509,7 +554,19 @@ var Toolbar = /** @class */ (function (_super) {
         var tbarScrollChk = trgt.classList.contains(CLS_TBARSCRLNAV);
         var clst = this.clstElement(tbrNavChk, trgt);
         if (clst || tbarScrollChk) {
-            this.keyHandling(clst, e, trgt, tbrNavChk, tbarScrollChk);
+            var currentItem = clst;
+            var nextItem = this.getNextFocusableItem(currentItem, e.action);
+            var keyDownEventArgs = {
+                originalEvent: e,
+                currentItem: currentItem,
+                nextItem: nextItem,
+                cancel: false
+            };
+            this.trigger('keyDown', keyDownEventArgs, function (keyDownArgs) {
+                if (!keyDownArgs.cancel) {
+                    _this.keyHandling(clst, e, trgt, tbrNavChk, tbarScrollChk);
+                }
+            });
         }
     };
     /**
@@ -548,7 +605,7 @@ var Toolbar = /** @class */ (function (_super) {
         var index = 0;
         while (index < nodes.length) {
             var ele = nodes[parseInt(index.toString(), 10)];
-            if (!ele.classList.contains(CLS_HIDDEN) && !ele.classList.contains(CLS_DISABLE)) {
+            if (!ele.classList.contains(CLS_SEPARATOR) && !ele.classList.contains(CLS_HIDDEN) && !ele.classList.contains(CLS_DISABLE)) {
                 return ele;
             }
             index++;
@@ -560,7 +617,7 @@ var Toolbar = /** @class */ (function (_super) {
         var index = nodes.length - 1;
         while (index >= 0) {
             var ele = nodes[parseInt(index.toString(), 10)];
-            if (!ele.classList.contains(CLS_HIDDEN) && !ele.classList.contains(CLS_DISABLE)) {
+            if (!ele.classList.contains(CLS_SEPARATOR) && !ele.classList.contains(CLS_HIDDEN) && !ele.classList.contains(CLS_DISABLE)) {
                 return ele;
             }
             index--;
@@ -2048,10 +2105,6 @@ var Toolbar = /** @class */ (function (_super) {
         return isNOU(ele.getAttribute('data-tabindex')) ? '-1' : ele.getAttribute('data-tabindex');
     };
     Toolbar.prototype.itemClick = function (e) {
-        var itemClosest = !isNOU(closest(e.currentTarget, '.' + CLS_TEMPLATE));
-        if (itemClosest) {
-            return;
-        }
         this.activeEleSwitch(e.currentTarget);
     };
     Toolbar.prototype.activeEleSwitch = function (ele) {
@@ -2414,6 +2467,9 @@ var Toolbar = /** @class */ (function (_super) {
     __decorate([
         Event()
     ], Toolbar.prototype, "beforeCreate", void 0);
+    __decorate([
+        Event()
+    ], Toolbar.prototype, "keyDown", void 0);
     Toolbar = __decorate([
         NotifyPropertyChanges
     ], Toolbar);

package/src/treeview/treeview.js

@@ -1810,7 +1810,10 @@ var TreeView = /** @class */ (function (_super) {
                                 activeElement_1.classList.add(ITEM_ANIMATION_ACTIVE);
                             }
                             start_1 = liEle_1.offsetHeight;
-                            end_1 = select('.' + TEXTWRAP, currLi).offsetHeight;
+                            var computedStyle = window.getComputedStyle(liEle_1);
+                            var paddingTop = parseFloat(computedStyle.paddingTop);
+                            var paddingBottom = parseFloat(computedStyle.paddingBottom);
+                            end_1 = select('.' + TEXTWRAP, currLi).offsetHeight + paddingBottom + paddingTop;
                         },
                         progress: function (args) {
                             args.element.style.display = 'block';
@@ -3461,6 +3464,15 @@ var TreeView = /** @class */ (function (_super) {
                 _this.dragAction(e, virtualEle);
             },
             dragStop: function (e) {
+                if (!e.target) {
+                    if (e.helper && e.helper.parentNode) {
+                        detach(e.helper);
+                    }
+                    document.body.style.cursor = '';
+                    removeClass([_this.element], DRAGGING);
+                    _this.dragStartAction = false;
+                    return;
+                }
                 removeClass([_this.element], DRAGGING);
                 if (!e.target.classList.contains('e-sibling')) {
                     _this.removeVirtualEle();
@@ -3500,6 +3512,9 @@ var TreeView = /** @class */ (function (_super) {
         });
         this.dropObj = new Droppable(this.element, {
             out: function (e) {
+                if (!e.target) {
+                    return;
+                }
                 if (!isNOU(e) && !e.target.classList.contains(SIBLING) &&
                     (_this.dropObj.dragData.default && _this.dropObj.dragData.default.helper.classList.contains(ROOT))) {
                     document.body.style.cursor = 'not-allowed';
@@ -3538,6 +3553,9 @@ var TreeView = /** @class */ (function (_super) {
         }
     };
     TreeView.prototype.dragAction = function (e, virtualEle) {
+        if (!e.target) {
+            return;
+        }
         var dropRoot = closest(e.target, '.' + DROPPABLE);
         var dropWrap = closest(e.target, '.' + TEXTWRAP);
         var icon = select('div.' + ICON, virtualEle);
@@ -5265,7 +5283,10 @@ var TreeView = /** @class */ (function (_super) {
             }
             this.groupedData = this.getGroupedData(this.treeData, this.fields.parentID);
         }
-        this.setNodeFocusable();
+        var fNode = select('.' + LISTITEM + '[tabindex="0"]', this.element);
+        if (isNOU(fNode)) {
+            this.setNodeFocusable();
+        }
         this.updateCheckedStateFromDS();
         if (this.showCheckBox && dropLi) {
             this.ensureParentCheckState(dropLi);
@@ -5659,7 +5680,7 @@ var TreeView = /** @class */ (function (_super) {
      * @returns {void}
      */
     TreeView.prototype.uncheckAll = function (nodes) {
-        if (this.showCheckBox) {
+        if (this.showCheckBox && this.checkedNodes.length > 0) {
             this.doCheckBoxAction(nodes, false);
         }
     };

package/styles/bds-lite.css

@@ -72,6 +72,9 @@
   padding-top: 6px;
   line-height: 18px;
 }
+.e-pager div.e-parentmsgbar span.e-rightalign {
+  text-align: right;
+}
 .e-pager .e-pagesizes {
   display: inline;
 }
@@ -325,6 +328,12 @@
 }
 @media (max-width: 769px) {
   .e-pager {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
     padding: 13px 0;
   }
   .e-pager div.e-parentmsgbar {
@@ -523,7 +532,8 @@
   .e-pager.e-rtl.e-rtl div.e-parentmsgbar {
     float: initial;
     margin-left: 0;
-    margin-top: 10px;
+    margin-top: 0;
+    padding-top: 0;
   }
   .e-pager.e-rtl .e-parentmsgbar {
     float: right;
@@ -6406,6 +6416,9 @@
 .e-treeview.e-virtualization .e-ul {
   overflow: unset;
 }
+.e-treeview .e-mask-parent {
+  display: none;
+}
 .e-treeview > .e-ul {
   -webkit-overflow-scrolling: touch;
   overflow: auto;
@@ -8278,6 +8291,21 @@ ejs-sidebar {
   padding-right: 8px;
 }
 
+.e-breadcrumb-menu-item {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.e-hidden-popup {
+  visibility: hidden;
+}
+
 .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text {
   color: var(--color-sf-text-secondary);
 }

package/styles/bds.css

@@ -72,6 +72,9 @@
   padding-top: 6px;
   line-height: 18px;
 }
+.e-pager div.e-parentmsgbar span.e-rightalign {
+  text-align: right;
+}
 .e-pager .e-pagesizes {
   display: inline;
 }
@@ -325,6 +328,12 @@
 }
 @media (max-width: 769px) {
   .e-pager {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
     padding: 13px 0;
   }
   .e-pager div.e-parentmsgbar {
@@ -523,7 +532,8 @@
   .e-pager.e-rtl.e-rtl div.e-parentmsgbar {
     float: initial;
     margin-left: 0;
-    margin-top: 10px;
+    margin-top: 0;
+    padding-top: 0;
   }
   .e-pager.e-rtl .e-parentmsgbar {
     float: right;
@@ -811,14 +821,14 @@
   .e-bigger .e-pager.e-rtl div.e-parentmsgbar,
   .e-pager.e-bigger.e-rtl div.e-parentmsgbar {
     margin-left: 0;
-    margin-top: 10px;
+    margin-top: 0;
   }
 }
 @media (max-width: 769px) {
   .e-bigger .e-pager.e-rtl div.e-parentmsgbar,
   .e-pager.e-bigger.e-rtl div.e-parentmsgbar {
     margin-left: 0;
-    margin-top: 10px;
+    margin-top: 0;
   }
 }
 .e-bigger .e-pager.e-rtl .e-numericitem.e-currentitem,
@@ -8343,6 +8353,9 @@
 .e-treeview.e-virtualization .e-ul {
   overflow: unset;
 }
+.e-treeview .e-mask-parent {
+  display: none;
+}
 .e-treeview > .e-ul {
   -webkit-overflow-scrolling: touch;
   overflow: auto;
@@ -10794,6 +10807,21 @@ ejs-sidebar {
   padding-right: 8px;
 }
 
+.e-breadcrumb-menu-item {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.e-hidden-popup {
+  visibility: hidden;
+}
+
 .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text {
   color: var(--color-sf-text-secondary);
 }