@syncfusion/ej2-navigations 33.1.47 → 33.2.3

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 33.1.47
+*  version : 33.2.3
 *  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.47",
+  "version": "33.2.3",
   "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",
@@ -8,12 +8,12 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-navigations.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~33.1.45",
-    "@syncfusion/ej2-buttons": "~33.1.44",
-    "@syncfusion/ej2-data": "~33.1.45",
-    "@syncfusion/ej2-inputs": "~33.1.47",
-    "@syncfusion/ej2-lists": "~33.1.47",
-    "@syncfusion/ej2-popups": "~33.1.44"
+    "@syncfusion/ej2-base": "~33.2.3",
+    "@syncfusion/ej2-buttons": "~33.2.3",
+    "@syncfusion/ej2-data": "~33.2.3",
+    "@syncfusion/ej2-inputs": "~33.2.3",
+    "@syncfusion/ej2-lists": "~33.2.3",
+    "@syncfusion/ej2-popups": "~33.2.3"
   },
   "devDependencies": {},
   "keywords": [

package/src/common/h-scroll.d.ts

@@ -22,11 +22,6 @@ export declare class HScroll extends Component<HTMLElement> implements INotifyPr
     private timeout;
     private keyTimeout;
     private keyTimer;
-    private onKeyPressBound;
-    private onKeyUpBound;
-    private repeatScrollBound;
-    private contextMenuBound;
-    private navTouchCollection;
     private browser;
     private browserCheck;
     private ieCheck;
@@ -87,7 +82,6 @@ export declare class HScroll extends Component<HTMLElement> implements INotifyPr
     private onKeyPress;
     private onKeyUp;
     private eventBinding;
-    private contextMenuHandler;
     private repeatScroll;
     private tabHoldHandler;
     private contains;

package/src/common/h-scroll.js

@@ -144,7 +144,6 @@ var HScroll = /** @class */ (function (_super) {
      * @returns {void}
      */
     HScroll.prototype.destroy = function () {
-        var _this = this;
         var ele = this.element;
         ele.style.display = '';
         ele.classList.remove(CLS_ROOT);
@@ -152,22 +151,8 @@ var HScroll = /** @class */ (function (_super) {
         ele.classList.remove(CLS_RTL);
         var nav = selectAll('.e-' + ele.id + '_nav.' + CLS_HSCROLLNAV, ele);
         var overlay = selectAll('.' + CLS_OVERLAY, ele);
-        [].slice.call(overlay).forEach(function (oElem) {
-            if (_this.onKeyPressBound) {
-                oElem.removeEventListener('keydown', _this.onKeyPressBound);
-            }
-            if (_this.onKeyUpBound) {
-                oElem.removeEventListener('keyup', _this.onKeyUpBound);
-            }
-            if (_this.repeatScrollBound) {
-                oElem.removeEventListener('mouseup', _this.repeatScrollBound);
-                oElem.removeEventListener('touchend', _this.repeatScrollBound);
-            }
-            if (_this.contextMenuBound) {
-                oElem.removeEventListener('contextmenu', _this.contextMenuBound);
-            }
-            EventHandler.remove(oElem, 'click', _this.clickEventHandler);
-            detach(oElem);
+        [].slice.call(overlay).forEach(function (ele) {
+            detach(ele);
         });
         for (var _i = 0, _a = [].slice.call(this.scrollItems.children); _i < _a.length; _i++) {
             var elem = _a[_i];
@@ -178,37 +163,14 @@ var HScroll = /** @class */ (function (_super) {
         }
         detach(this.scrollEle);
         if (nav.length > 0) {
-            [].slice.call(nav).forEach(function (nElem) {
-                if (_this.onKeyPressBound) {
-                    nElem.removeEventListener('keydown', _this.onKeyPressBound);
-                }
-                if (_this.onKeyUpBound) {
-                    nElem.removeEventListener('keyup', _this.onKeyUpBound);
-                }
-                if (_this.repeatScrollBound) {
-                    nElem.removeEventListener('mouseup', _this.repeatScrollBound);
-                    nElem.removeEventListener('touchend', _this.repeatScrollBound);
-                }
-                if (_this.contextMenuBound) {
-                    nElem.removeEventListener('contextmenu', _this.contextMenuBound);
-                }
-                EventHandler.remove(nElem, 'click', _this.clickEventHandler);
-                detach(nElem);
-            });
+            detach(nav[0]);
+            if (!isNullOrUndefined(nav[1])) {
+                detach(nav[1]);
+            }
         }
         EventHandler.remove(this.scrollEle, 'scroll', this.scrollHandler);
         this.touchModule.destroy();
         this.touchModule = null;
-        if (this.navTouchCollection) {
-            this.navTouchCollection.forEach(function (t) { if (t && typeof t.destroy === 'function') {
-                t.destroy();
-            } });
-            this.navTouchCollection = null;
-        }
-        this.onKeyPressBound = null;
-        this.onKeyUpBound = null;
-        this.repeatScrollBound = null;
-        this.contextMenuBound = null;
         _super.prototype.destroy.call(this);
     };
     /**
@@ -295,34 +257,17 @@ var HScroll = /** @class */ (function (_super) {
     HScroll.prototype.eventBinding = function (ele) {
         var _this = this;
         [].slice.call(ele).forEach(function (el) {
-            var navTouch = new Touch(el, { tapHold: _this.tabHoldHandler.bind(_this), tapHoldThreshold: 500 });
-            if (!_this.navTouchCollection) {
-                _this.navTouchCollection = [];
-            }
-            _this.navTouchCollection.push(navTouch);
-            if (!_this.onKeyPressBound) {
-                _this.onKeyPressBound = _this.onKeyPress.bind(_this);
-            }
-            if (!_this.onKeyUpBound) {
-                _this.onKeyUpBound = _this.onKeyUp.bind(_this);
-            }
-            if (!_this.repeatScrollBound) {
-                _this.repeatScrollBound = _this.repeatScroll.bind(_this);
-            }
-            if (!_this.contextMenuBound) {
-                _this.contextMenuBound = _this.contextMenuHandler.bind(_this);
-            }
-            el.addEventListener('keydown', _this.onKeyPressBound);
-            el.addEventListener('keyup', _this.onKeyUpBound);
-            el.addEventListener('mouseup', _this.repeatScrollBound);
-            el.addEventListener('touchend', _this.repeatScrollBound);
-            el.addEventListener('contextmenu', _this.contextMenuBound);
+            new Touch(el, { tapHold: _this.tabHoldHandler.bind(_this), tapHoldThreshold: 500 });
+            el.addEventListener('keydown', _this.onKeyPress.bind(_this));
+            el.addEventListener('keyup', _this.onKeyUp.bind(_this));
+            el.addEventListener('mouseup', _this.repeatScroll.bind(_this));
+            el.addEventListener('touchend', _this.repeatScroll.bind(_this));
+            el.addEventListener('contextmenu', function (e) {
+                e.preventDefault();
+            });
             EventHandler.add(el, 'click', _this.clickEventHandler, _this);
         });
     };
-    HScroll.prototype.contextMenuHandler = function (e) {
-        e.preventDefault();
-    };
     HScroll.prototype.repeatScroll = function () {
         clearInterval(this.timeout);
     };

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

@@ -160,6 +160,8 @@ export declare abstract class MenuBase extends Component<HTMLUListElement> imple
     private delegateScrollHandler;
     private delegateMouseDownHandler;
     private delegateTouchOutsideHandler;
+    private delegateParentScrollHandler;
+    private delegateContextMenuHandler;
     private navIdx;
     private animation;
     private isTapHold;
@@ -198,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,16 +333,19 @@ 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);
                 }
             }
         }
@@ -671,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;
         }
@@ -2075,15 +2080,23 @@ 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;
                 }
             }
         }
@@ -2563,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') {
@@ -2606,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/toolbar/toolbar.js

@@ -324,19 +324,14 @@ var Toolbar = /** @class */ (function (_super) {
         }
     };
     Toolbar.prototype.destroyItems = function () {
-        var _this = this;
         if (this.element) {
-            [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM)).forEach(function (el) {
-                EventHandler.remove(el, 'click', _this.itemClick);
-                detach(el);
-            });
+            [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM)).forEach(function (el) { detach(el); });
         }
         if (this.tbarAlign) {
             var tbarItems = this.element.querySelector('.' + CLS_ITEMS);
             if (tbarItems) {
                 if (tbarItems.children) {
                     [].slice.call(tbarItems.children).forEach(function (el) {
-                        EventHandler.remove(el, 'click', _this.itemClick);
                         detach(el);
                     });
                 }
@@ -2081,7 +2076,7 @@ var Toolbar = /** @class */ (function (_super) {
                     dom.setAttribute('aria-label', (item.text || item.tooltipText));
                     dom.setAttribute('aria-disabled', 'false');
                     innerEle.appendChild(dom);
-                    EventHandler.add(innerEle, 'click', this.itemClick, this);
+                    innerEle.addEventListener('click', this.itemClick.bind(this));
                     break;
                 case 'Separator':
                     this.add(innerEle, CLS_SEPARATOR);

package/styles/bootstrap5.3-lite.css

@@ -3914,7 +3914,7 @@
   color: rgba(var(--color-sf-white));
 }
 .e-carousel .e-carousel-indicators.e-progress .e-indicator-bars {
-  background-color: rgba(var(--color-sf-primary), 0.4);
+  background-color: rgba(var(--color-sf-primary-shadow), 0.4);
 }
 .e-carousel .e-carousel-indicators.e-progress .e-indicator-bars .e-indicator-bar {
   background-color: var(--color-sf-primary);

package/styles/bootstrap5.3.css

@@ -4986,7 +4986,7 @@
   color: rgba(var(--color-sf-white));
 }
 .e-carousel .e-carousel-indicators.e-progress .e-indicator-bars {
-  background-color: rgba(var(--color-sf-primary), 0.4);
+  background-color: rgba(var(--color-sf-primary-shadow), 0.4);
 }
 .e-carousel .e-carousel-indicators.e-progress .e-indicator-bars .e-indicator-bar {
   background-color: var(--color-sf-primary);

package/styles/carousel/_bootstrap5.3-definition.scss

@@ -7,7 +7,7 @@ $carousel-indicator-bar-bg: $primary-text-color !default;
 $carousel-indicator-bar-border: 1px solid rgba($white, .4) !default;
 $carousel-indicator-bar-bg-active: $primary !default;
 $carousel-indicator-border-color-focus: $black !default;
-$carousel-indicator-progress-bg: rgba($carousel-indicator-bar-bg-active, .4) !default;
+$carousel-indicator-progress-bg: rgba(var(--color-sf-primary-shadow), .4) !default;
 $carousel-animation-duration: .6s !default;
 $carousel-animation-timing-function: ease-in-out !default;
 $carousel-navigator-btn-border-radius-hover: $border-radius-50p !default;

package/styles/carousel/bootstrap5.3.css

@@ -608,7 +608,7 @@
   color: rgba(var(--color-sf-white));
 }
 .e-carousel .e-carousel-indicators.e-progress .e-indicator-bars {
-  background-color: rgba(var(--color-sf-primary), 0.4);
+  background-color: rgba(var(--color-sf-primary-shadow), 0.4);
 }
 .e-carousel .e-carousel-indicators.e-progress .e-indicator-bars .e-indicator-bar {
   background-color: var(--color-sf-primary);