@syncfusion/ej2-navigations 33.1.46 → 33.1.49

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 33.1.46
+*  version : 33.1.49
 *  Copyright Syncfusion Inc. 2001 - 2025. 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,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-navigations",
-  "version": "33.1.46",
+  "version": "33.1.49",
   "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",
@@ -9,10 +9,10 @@
   "es2015": "./dist/es6/ej2-navigations.es5.js",
   "dependencies": {
     "@syncfusion/ej2-base": "~33.1.45",
-    "@syncfusion/ej2-buttons": "~33.1.44",
+    "@syncfusion/ej2-buttons": "~33.1.49",
     "@syncfusion/ej2-data": "~33.1.45",
-    "@syncfusion/ej2-inputs": "~33.1.44",
-    "@syncfusion/ej2-lists": "~33.1.44",
+    "@syncfusion/ej2-inputs": "~33.1.49",
+    "@syncfusion/ej2-lists": "~33.1.47",
     "@syncfusion/ej2-popups": "~33.1.44"
   },
   "devDependencies": {},

package/src/accordion/accordion.js

@@ -257,6 +257,11 @@ var Accordion = /** @class */ (function (_super) {
         if (!isNOU(this.keyModule)) {
             this.keyModule.destroy();
         }
+        var headerEles = [].slice.call(this.element.querySelectorAll('.' + CLS_HEADER));
+        for (var _i = 0, headerEles_1 = headerEles; _i < headerEles_1.length; _i++) {
+            var hdr = headerEles_1[_i];
+            EventHandler.clearEvents(hdr);
+        }
     };
     Accordion.prototype.wireEvents = function () {
         EventHandler.add(this.element, 'click', this.clickHandler, this);
@@ -1178,6 +1183,10 @@ var Accordion = /** @class */ (function (_super) {
             this.clearTemplate();
         }
         [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM)).forEach(function (el) {
+            var hdr = select('.' + CLS_HEADER, el);
+            if (hdr) {
+                EventHandler.clearEvents(hdr);
+            }
             detach(el);
         });
     };

package/src/breadcrumb/breadcrumb.d.ts

@@ -121,6 +121,7 @@ export declare class Breadcrumb extends Component<HTMLElement> implements INotif
     private _maxItems;
     private popupObj;
     private popupUl;
+    private resizeHandler;
     private delegateClickHanlder;
     private isPopupCreated;
     /**

package/src/breadcrumb/breadcrumb.js

@@ -620,7 +620,7 @@ var Breadcrumb = /** @class */ (function (_super) {
             detach(this.popupObj.element);
         }
     };
-    Breadcrumb.prototype.resize = function () {
+    Breadcrumb.prototype.resize = function (e) {
         this._maxItems = this.maxItems;
         this.initPvtProps();
         this.reRenderItems();
@@ -711,7 +711,8 @@ var Breadcrumb = /** @class */ (function (_super) {
         this.delegateClickHanlder = this.documentClickHandler.bind(this);
         EventHandler.add(document, 'click', this.delegateClickHanlder, this);
         EventHandler.add(this.element, 'click', this.clickHandler, this);
-        window.addEventListener('resize', this.resize.bind(this));
+        this.resizeHandler = this.resize.bind(this);
+        window.addEventListener('resize', this.resizeHandler);
     };
     Breadcrumb.prototype.popupWireEvents = function () {
         EventHandler.add(this.popupObj.element, 'click', this.clickHandler, this);
@@ -720,7 +721,8 @@ var Breadcrumb = /** @class */ (function (_super) {
     Breadcrumb.prototype.unWireEvents = function () {
         EventHandler.remove(document, 'click', this.delegateClickHanlder);
         EventHandler.remove(this.element, 'click', this.clickHandler);
-        window.removeEventListener('resize', this.resize.bind(this));
+        window.removeEventListener('resize', this.resizeHandler);
+        this.resizeHandler = null;
         if (this.popupObj) {
             EventHandler.remove(this.popupObj.element, 'click', this.clickHandler);
             EventHandler.remove(this.popupObj.element, 'keydown', this.popupKeyDownHandler);

package/src/common/menu-base.d.ts

@@ -156,7 +156,12 @@ export declare abstract class MenuBase extends Component<HTMLUListElement> imple
     private targetElement;
     private delegateClickHandler;
     private delegateMoverHandler;
+    private delegateDomKeyHandler;
+    private delegateScrollHandler;
     private delegateMouseDownHandler;
+    private delegateTouchOutsideHandler;
+    private delegateParentScrollHandler;
+    private delegateContextMenuHandler;
     private navIdx;
     private animation;
     private isTapHold;
@@ -195,6 +200,8 @@ export declare abstract class MenuBase extends Component<HTMLUListElement> imple
     private skipNextArrowDown;
     private touchStartFn;
     private touchMoveFn;
+    private scrollParents;
+    private isCmenuOpened;
     /**
      * Triggers while rendering each menu item.
      *

package/src/common/menu-base.js

@@ -159,6 +159,7 @@ var MenuBase = /** @class */ (function (_super) {
         _this.isAnimationNone = false;
         _this.isKBDAction = false;
         _this.skipNextArrowDown = false;
+        _this.isCmenuOpened = false;
         return _this;
     }
     /**
@@ -332,27 +333,32 @@ var MenuBase = /** @class */ (function (_super) {
                         new Touch(target, { tapHold: this.touchHandler.bind(this) });
                     }
                     else {
-                        EventHandler.add(target, 'contextmenu', this.cmenuHandler, this);
+                        this.delegateContextMenuHandler = this.cmenuHandler.bind(this);
+                        EventHandler.add(target, 'contextmenu', this.delegateContextMenuHandler, this);
                     }
                 }
             }
             this.targetElement = target;
             if (!this.isMenu) {
                 EventHandler.add(this.targetElement, 'scroll', this.scrollHandler, this);
-                for (var _i = 0, _a = getScrollableParent(this.targetElement); _i < _a.length; _i++) {
+                this.scrollParents = getScrollableParent(this.targetElement).slice();
+                this.delegateParentScrollHandler = this.scrollHandler.bind(this);
+                for (var _i = 0, _a = this.scrollParents; _i < _a.length; _i++) {
                     var parent_1 = _a[_i];
-                    EventHandler.add(parent_1, 'scroll', this.scrollHandler, this);
+                    EventHandler.add(parent_1, 'scroll', this.delegateParentScrollHandler, this);
                 }
             }
         }
         if (!Browser.isDevice) {
             this.delegateMoverHandler = this.moverHandler.bind(this);
             this.delegateMouseDownHandler = this.mouseDownHandler.bind(this);
+            this.delegateDomKeyHandler = this.domKeyHandler.bind(this);
             EventHandler.add(this.isMenu ? document : wrapper, 'mouseover', this.delegateMoverHandler, this);
             EventHandler.add(document, 'mousedown', this.delegateMouseDownHandler, this);
-            EventHandler.add(document, 'keydown', this.domKeyHandler, this);
+            EventHandler.add(document, 'keydown', this.delegateDomKeyHandler, this);
             if (!this.isMenu && !this.target) {
-                EventHandler.add(document, 'scroll', this.scrollHandler, this);
+                this.delegateScrollHandler = this.scrollHandler.bind(this);
+                EventHandler.add(document, 'scroll', this.delegateScrollHandler, this);
             }
         }
         this.delegateClickHandler = this.clickHandler.bind(this);
@@ -361,7 +367,8 @@ var MenuBase = /** @class */ (function (_super) {
         this.rippleFn = rippleEffect(wrapper, { selector: '.' + ITEM });
         if (!this.isMenu && this.enableScrolling) {
             this.enableTouchScroll(wrapper);
-            document.addEventListener('touchstart', this.touchOutsideHandler.bind(this), { passive: true });
+            this.delegateTouchOutsideHandler = this.touchOutsideHandler.bind(this);
+            document.addEventListener('touchstart', this.delegateTouchOutsideHandler, { passive: true });
         }
     };
     MenuBase.prototype.wireKeyboardEvent = function (element) {
@@ -668,6 +675,7 @@ var MenuBase = /** @class */ (function (_super) {
         if (this.isCMenu) {
             if (this.canOpen(e.target)) {
                 this.openMenu(null, null, this.pageY, this.pageX, e);
+                this.isCmenuOpened = true;
             }
             this.isCMenu = false;
         }
@@ -2072,33 +2080,59 @@ var MenuBase = /** @class */ (function (_super) {
                         }
                     }
                     else {
-                        EventHandler.remove(target, 'contextmenu', this.cmenuHandler);
+                        if (this.delegateContextMenuHandler) {
+                            EventHandler.remove(target, 'contextmenu', this.delegateContextMenuHandler);
+                            this.delegateContextMenuHandler = null;
+                        }
                     }
                 }
             }
             if (!this.isMenu) {
                 EventHandler.remove(this.targetElement, 'scroll', this.scrollHandler);
-                for (var _i = 0, _a = getScrollableParent(this.targetElement); _i < _a.length; _i++) {
-                    var parent_2 = _a[_i];
-                    EventHandler.remove(parent_2, 'scroll', this.scrollHandler);
+                if (this.scrollParents) {
+                    for (var _i = 0, _a = this.scrollParents; _i < _a.length; _i++) {
+                        var parent_2 = _a[_i];
+                        EventHandler.remove(parent_2, 'scroll', this.delegateParentScrollHandler);
+                    }
+                    this.delegateParentScrollHandler = null;
+                    this.scrollParents.length = 0;
+                    this.scrollParents = null;
                 }
             }
         }
         if (!Browser.isDevice) {
-            EventHandler.remove(this.isMenu ? document : wrapper, 'mouseover', this.delegateMoverHandler);
-            EventHandler.remove(document, 'mousedown', this.delegateMouseDownHandler);
-            EventHandler.remove(document, 'keydown', this.domKeyHandler);
+            if (this.delegateMoverHandler) {
+                EventHandler.remove(this.isMenu ? document : wrapper, 'mouseover', this.delegateMoverHandler);
+                this.delegateMoverHandler = null;
+            }
+            if (this.delegateMouseDownHandler) {
+                EventHandler.remove(document, 'mousedown', this.delegateMouseDownHandler);
+                this.delegateMouseDownHandler = null;
+            }
+            if (this.delegateDomKeyHandler) {
+                EventHandler.remove(document, 'keydown', this.delegateDomKeyHandler);
+                this.delegateDomKeyHandler = null;
+            }
             if (!this.isMenu && !this.target) {
-                EventHandler.remove(document, 'scroll', this.scrollHandler);
+                if (this.delegateScrollHandler) {
+                    EventHandler.remove(document, 'scroll', this.delegateScrollHandler);
+                    this.delegateScrollHandler = null;
+                }
             }
         }
-        EventHandler.remove(document, 'click', this.delegateClickHandler);
+        if (this.delegateClickHandler) {
+            EventHandler.remove(document, 'click', this.delegateClickHandler);
+            this.delegateClickHandler = null;
+        }
         this.unWireKeyboardEvent(wrapper);
         this.rippleFn();
         if (!this.isMenu && this.enableScrolling) {
             wrapper.removeEventListener('touchstart', this.touchStartFn);
             wrapper.removeEventListener('touchmove', this.touchMoveFn);
-            document.removeEventListener('touchstart', this.touchOutsideHandler);
+            if (this.delegateTouchOutsideHandler) {
+                document.removeEventListener('touchstart', this.delegateTouchOutsideHandler);
+                this.delegateTouchOutsideHandler = null;
+            }
         }
     };
     MenuBase.prototype.unWireKeyboardEvent = function (element) {
@@ -2542,6 +2576,17 @@ var MenuBase = /** @class */ (function (_super) {
         var wrapper = this.getWrapper();
         if (wrapper) {
             this.unWireEvents();
+            this.delegateClickHandler = null;
+            this.delegateMoverHandler = null;
+            this.delegateMouseDownHandler = null;
+            this.delegateDomKeyHandler = null;
+            this.delegateScrollHandler = null;
+            this.delegateTouchOutsideHandler = null;
+            this.delegateParentScrollHandler = null;
+            if (this.delegateContextMenuHandler) {
+                EventHandler.remove(this.targetElement, 'contextmenu', this.delegateContextMenuHandler);
+                this.delegateContextMenuHandler = null;
+            }
             if (!this.isMenu) {
                 this.clonedElement.style.display = '';
                 if (this.clonedElement.tagName === 'EJS-CONTEXTMENU') {
@@ -2585,7 +2630,31 @@ var MenuBase = /** @class */ (function (_super) {
                 wrapper.parentNode.insertBefore(this.element, wrapper);
                 this.clonedElement = null;
             }
+            if (this.popupObj) {
+                this.popupObj.destroy();
+                this.popupObj = null;
+            }
+            this.currentTarget = null;
+            this.targetElement = null;
+            if (this.animation) {
+                this.animation.destroy();
+                this.animation = null;
+            }
+            if (!this.isMenu && !this.isCmenuOpened && this.element) {
+                var elementInstance = getValue('ej2_instances', this.element);
+                if (elementInstance && Array.isArray(elementInstance)) {
+                    elementInstance.length = 0;
+                    setValue('ej2_instances', elementInstance, this.element);
+                }
+            }
             detach(wrapper);
+            if (this.uList && !document.body.contains(this.uList)) {
+                var ulInstance = getValue('ej2_instances', this.uList);
+                if (ulInstance && Array.isArray(ulInstance)) {
+                    ulInstance.length = 0;
+                    setValue('ej2_instances', ulInstance, this.uList);
+                }
+            }
             _super.prototype.destroy.call(this);
             if (this.template) {
                 this.clearTemplate(['template']);

package/src/sidebar/sidebar.d.ts

@@ -43,6 +43,7 @@ export declare class Sidebar extends Component<HTMLElement> implements INotifyPr
     private targetEle;
     private firstRender;
     private documentClickContext;
+    private resizeHandler;
     /**
      * Specifies the size of the Sidebar in dock state.
      * > For more details about dockSize refer to

package/src/sidebar/sidebar.js

@@ -58,6 +58,7 @@ var Sidebar = /** @class */ (function (_super) {
     function Sidebar(options, element) {
         var _this = _super.call(this, options, element) || this;
         _this.documentClickContext = _this.documentclickHandler.bind(_this);
+        _this.resizeHandler = _this.resize.bind(_this);
         return _this;
     }
     Sidebar.prototype.preRender = function () {
@@ -463,11 +464,12 @@ var Sidebar = /** @class */ (function (_super) {
     };
     Sidebar.prototype.wireEvents = function () {
         this.setEnableGestures();
-        EventHandler.add(window, 'resize', this.resize, this);
+        EventHandler.add(window, 'resize', this.resizeHandler);
     };
     Sidebar.prototype.unWireEvents = function () {
-        EventHandler.remove(window, 'resize', this.resize);
+        EventHandler.remove(window, 'resize', this.resizeHandler);
         EventHandler.remove(document, 'mousedown touchstart', this.documentclickHandler);
+        EventHandler.remove(this.element, 'transitionend', this.transitionEnd);
         if (this.mainContentEle) {
             this.mainContentEle.destroy();
         }

package/src/stepper/stepper.d.ts

@@ -268,6 +268,7 @@ export declare class Stepper extends StepperBase implements INotifyPropertyChang
     private keyConfigs;
     private l10n;
     private isKeyNavFocus;
+    private windowEventHandlers;
     /**
      * * Constructor for creating the Stepper component.
      *

package/src/stepper/stepper.js

@@ -253,12 +253,20 @@ var Stepper = /** @class */ (function (_super) {
         }
     };
     Stepper.prototype.wireEvents = function () {
-        EventHandler.add(window, 'resize', this.updateResize, this);
-        EventHandler.add(window, 'click', this.updateStepFocus, this);
+        this.windowEventHandlers = {};
+        this.windowEventHandlers.resize = this.updateResize.bind(this);
+        this.windowEventHandlers.click = this.updateStepFocus.bind(this);
+        EventHandler.add(window, 'resize', this.windowEventHandlers.resize);
+        EventHandler.add(window, 'click', this.windowEventHandlers.click);
     };
     Stepper.prototype.unWireEvents = function () {
-        EventHandler.remove(window, 'resize', this.updateResize);
-        EventHandler.remove(window, 'click', this.updateStepFocus);
+        EventHandler.remove(window, 'resize', this.windowEventHandlers && this.windowEventHandlers.resize);
+        EventHandler.remove(window, 'click', this.windowEventHandlers && this.windowEventHandlers.click);
+        if (this.windowEventHandlers) {
+            this.windowEventHandlers.resize = null;
+            this.windowEventHandlers.click = null;
+            this.windowEventHandlers = null;
+        }
     };
     Stepper.prototype.updateResize = function () {
         if (this.stepperItemList && this.progressbar && this.element.classList.contains(HORIZSTEP)) {

package/src/treeview/treeview.js

@@ -4766,6 +4766,18 @@ var TreeView = /** @class */ (function (_super) {
         this.wireExpandOnEvent(false);
         EventHandler.remove(this.element, 'mouseover', this.onMouseOver);
         EventHandler.remove(this.element, 'mouseout', this.onMouseLeave);
+        var liElements = selectAll('.' + LISTITEM, this.element);
+        for (var i = 0; i < liElements.length; i++) {
+            var li = liElements[parseInt(i.toString(), 10)];
+            EventHandler.remove(li, 'focus', this.focusIn);
+            EventHandler.remove(li, 'blur', this.focusOut);
+            var frame = select('.' + CHECKBOXFRAME, li);
+            if (frame) {
+                EventHandler.remove(frame, 'mousedown', this.frameMouseHandler);
+                EventHandler.remove(frame, 'mouseup', this.frameMouseHandler);
+                EventHandler.remove(frame, 'mouseleave', this.frameMouseHandler);
+            }
+        }
         if (!this.disabled) {
             this.keyboardModule.destroy();
         }

package/styles/appbar/bds.css

@@ -175,7 +175,7 @@
 .e-appbar.e-light .e-dropdown-btn.e-btn.e-inherit:focus,
 .e-appbar.e-light .e-dropdown-btn.e-btn.e-inherit:active,
 .e-appbar.e-light .e-dropdown-btn.e-btn.e-inherit.e-active {
-  background: var(--color-sf-utility-appbar-border-color-alt2);
+  background: var(--color-sf-utility-appbar-hover-bg-color-alt1);
 }
 .e-appbar.e-light .e-menu-wrapper.e-inherit,
 .e-appbar.e-light .e-menu-container.e-inherit {
@@ -188,7 +188,7 @@
 .e-appbar.e-light .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-appbar.e-light .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
 .e-appbar.e-light .e-menu-container.e-inherit .e-menu .e-menu-item.e-selected,
 .e-appbar.e-light .e-menu-container.e-inherit .e-menu .e-menu-item.e-focused {
-  background: var(--color-sf-utility-appbar-border-color-alt2);
+  background: var(--color-sf-utility-appbar-hover-bg-color-alt1);
 }
 .e-appbar.e-dark {
   background: var(--color-sf-utility-appbar-bg-color-alt2);

package/styles/bds-lite.css

@@ -8820,7 +8820,7 @@ ejs-sidebar {
 .e-appbar.e-light .e-dropdown-btn.e-btn.e-inherit:focus,
 .e-appbar.e-light .e-dropdown-btn.e-btn.e-inherit:active,
 .e-appbar.e-light .e-dropdown-btn.e-btn.e-inherit.e-active {
-  background: var(--color-sf-utility-appbar-border-color-alt2);
+  background: var(--color-sf-utility-appbar-hover-bg-color-alt1);
 }
 .e-appbar.e-light .e-menu-wrapper.e-inherit,
 .e-appbar.e-light .e-menu-container.e-inherit {
@@ -8833,7 +8833,7 @@ ejs-sidebar {
 .e-appbar.e-light .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-appbar.e-light .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
 .e-appbar.e-light .e-menu-container.e-inherit .e-menu .e-menu-item.e-selected,
 .e-appbar.e-light .e-menu-container.e-inherit .e-menu .e-menu-item.e-focused {
-  background: var(--color-sf-utility-appbar-border-color-alt2);
+  background: var(--color-sf-utility-appbar-hover-bg-color-alt1);
 }
 .e-appbar.e-dark {
   background: var(--color-sf-utility-appbar-bg-color-alt2);

package/styles/bds.css

@@ -11535,7 +11535,7 @@ ejs-sidebar {
 .e-appbar.e-light .e-dropdown-btn.e-btn.e-inherit:focus,
 .e-appbar.e-light .e-dropdown-btn.e-btn.e-inherit:active,
 .e-appbar.e-light .e-dropdown-btn.e-btn.e-inherit.e-active {
-  background: var(--color-sf-utility-appbar-border-color-alt2);
+  background: var(--color-sf-utility-appbar-hover-bg-color-alt1);
 }
 .e-appbar.e-light .e-menu-wrapper.e-inherit,
 .e-appbar.e-light .e-menu-container.e-inherit {
@@ -11548,7 +11548,7 @@ ejs-sidebar {
 .e-appbar.e-light .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-appbar.e-light .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
 .e-appbar.e-light .e-menu-container.e-inherit .e-menu .e-menu-item.e-selected,
 .e-appbar.e-light .e-menu-container.e-inherit .e-menu .e-menu-item.e-focused {
-  background: var(--color-sf-utility-appbar-border-color-alt2);
+  background: var(--color-sf-utility-appbar-hover-bg-color-alt1);
 }
 .e-appbar.e-dark {
   background: var(--color-sf-utility-appbar-bg-color-alt2);