@syncfusion/ej2-navigations 33.1.45 → 33.1.47

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

@@ -140,8 +140,22 @@ let HScroll = class HScroll extends Component {
         ele.classList.remove(CLS_RTL);
         const nav = selectAll('.e-' + ele.id + '_nav.' + CLS_HSCROLLNAV, ele);
         const overlay = selectAll('.' + CLS_OVERLAY, ele);
-        [].slice.call(overlay).forEach((ele) => {
-            detach(ele);
+        [].slice.call(overlay).forEach((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);
         });
         for (const elem of [].slice.call(this.scrollItems.children)) {
             ele.appendChild(elem);
@@ -151,14 +165,37 @@ let HScroll = class HScroll extends Component {
         }
         detach(this.scrollEle);
         if (nav.length > 0) {
-            detach(nav[0]);
-            if (!isNullOrUndefined(nav[1])) {
-                detach(nav[1]);
-            }
+            [].slice.call(nav).forEach((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);
+            });
         }
         EventHandler.remove(this.scrollEle, 'scroll', this.scrollHandler);
         this.touchModule.destroy();
         this.touchModule = null;
+        if (this.navTouchCollection) {
+            this.navTouchCollection.forEach((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.destroy();
     }
     /**
@@ -243,17 +280,34 @@ let HScroll = class HScroll extends Component {
     }
     eventBinding(ele) {
         [].slice.call(ele).forEach((el) => {
-            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', (e) => {
-                e.preventDefault();
-            });
+            const 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);
             EventHandler.add(el, 'click', this.clickEventHandler, this);
         });
     }
+    contextMenuHandler(e) {
+        e.preventDefault();
+    }
     repeatScroll() {
         clearInterval(this.timeout);
     }
@@ -1329,11 +1383,13 @@ let MenuBase = class MenuBase extends Component {
         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);
@@ -1342,7 +1398,8 @@ let MenuBase = class MenuBase extends Component {
         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 });
         }
     }
     wireKeyboardEvent(element) {
@@ -3035,20 +3092,38 @@ let MenuBase = class MenuBase extends Component {
             }
         }
         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;
+            }
         }
     }
     unWireKeyboardEvent(element) {
@@ -3885,13 +3960,17 @@ let Toolbar = class Toolbar extends Component {
     }
     destroyItems() {
         if (this.element) {
-            [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM)).forEach((el) => { detach(el); });
+            [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM)).forEach((el) => {
+                EventHandler.remove(el, 'click', this.itemClick);
+                detach(el);
+            });
         }
         if (this.tbarAlign) {
             const tbarItems = this.element.querySelector('.' + CLS_ITEMS);
             if (tbarItems) {
                 if (tbarItems.children) {
                     [].slice.call(tbarItems.children).forEach((el) => {
+                        EventHandler.remove(el, 'click', this.itemClick);
                         detach(el);
                     });
                 }
@@ -5619,7 +5698,7 @@ let Toolbar = class Toolbar extends Component {
                     dom.setAttribute('aria-label', (item.text || item.tooltipText));
                     dom.setAttribute('aria-disabled', 'false');
                     innerEle.appendChild(dom);
-                    innerEle.addEventListener('click', this.itemClick.bind(this));
+                    EventHandler.add(innerEle, 'click', this.itemClick, this);
                     break;
                 case 'Separator':
                     this.add(innerEle, CLS_SEPARATOR);
@@ -6249,6 +6328,10 @@ let Accordion = class Accordion extends Component {
         if (!isNullOrUndefined(this.keyModule)) {
             this.keyModule.destroy();
         }
+        const headerEles = [].slice.call(this.element.querySelectorAll('.' + CLS_HEADER));
+        for (const hdr of headerEles) {
+            EventHandler.clearEvents(hdr);
+        }
     }
     wireEvents() {
         EventHandler.add(this.element, 'click', this.clickHandler, this);
@@ -7160,6 +7243,10 @@ let Accordion = class Accordion extends Component {
             this.clearTemplate();
         }
         [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM$1)).forEach((el) => {
+            const hdr = select('.' + CLS_HEADER, el);
+            if (hdr) {
+                EventHandler.clearEvents(hdr);
+            }
             detach(el);
         });
     }
@@ -9277,12 +9364,20 @@ let Tab = class Tab extends Component {
                     }
                     if (properties[j] === 'cssClass') {
                         if (!isNullOrUndefined(hdrItem)) {
-                            hdrItem.classList.remove(oldVal);
-                            hdrItem.classList.add(newVal);
+                            if (!isNullOrUndefined(oldVal) && oldVal !== '') {
+                                hdrItem.classList.remove(oldVal);
+                            }
+                            if (!isNullOrUndefined(newVal) && newVal !== '') {
+                                hdrItem.classList.add(newVal);
+                            }
                         }
                         if (!isNullOrUndefined(cntItem)) {
-                            cntItem.classList.remove(oldVal);
-                            cntItem.classList.add(newVal);
+                            if (!isNullOrUndefined(oldVal) && oldVal !== '') {
+                                cntItem.classList.remove(oldVal);
+                            }
+                            if (!isNullOrUndefined(newVal) && newVal !== '') {
+                                cntItem.classList.add(newVal);
+                            }
                         }
                     }
                     if (properties[j] === 'disabled') {
@@ -14994,6 +15089,18 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         this.wireExpandOnEvent(false);
         EventHandler.remove(this.element, 'mouseover', this.onMouseOver);
         EventHandler.remove(this.element, 'mouseout', this.onMouseLeave);
+        const liElements = selectAll('.' + LISTITEM, this.element);
+        for (let i = 0; i < liElements.length; i++) {
+            const li = liElements[parseInt(i.toString(), 10)];
+            EventHandler.remove(li, 'focus', this.focusIn);
+            EventHandler.remove(li, 'blur', this.focusOut);
+            const 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();
         }
@@ -16195,6 +16302,7 @@ let Sidebar = class Sidebar extends Component {
     constructor(options, element) {
         super(options, element);
         this.documentClickContext = this.documentclickHandler.bind(this);
+        this.resizeHandler = this.resize.bind(this);
     }
     preRender() {
         this.setWidth();
@@ -16597,11 +16705,12 @@ let Sidebar = class Sidebar extends Component {
     }
     wireEvents() {
         this.setEnableGestures();
-        EventHandler.add(window, 'resize', this.resize, this);
+        EventHandler.add(window, 'resize', this.resizeHandler);
     }
     unWireEvents() {
-        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();
         }
@@ -17471,7 +17580,7 @@ let Breadcrumb = class Breadcrumb extends Component {
             detach(this.popupObj.element);
         }
     }
-    resize() {
+    resize(e) {
         this._maxItems = this.maxItems;
         this.initPvtProps();
         this.reRenderItems();
@@ -17561,7 +17670,8 @@ let Breadcrumb = class Breadcrumb extends Component {
         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);
     }
     popupWireEvents() {
         EventHandler.add(this.popupObj.element, 'click', this.clickHandler, this);
@@ -17570,7 +17680,8 @@ let Breadcrumb = class Breadcrumb extends Component {
     unWireEvents() {
         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);
@@ -19635,12 +19746,20 @@ let Stepper = class Stepper extends StepperBase {
         }
     }
     wireEvents() {
-        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);
     }
     unWireEvents() {
-        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;
+        }
     }
     updateResize() {
         if (this.stepperItemList && this.progressbar && this.element.classList.contains(HORIZSTEP$1)) {