@syncfusion/ej2-navigations 28.2.12 → 29.1.34

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

@@ -1,4 +1,4 @@
-import { Component, Browser, getUniqueID, Touch, EventHandler, isNullOrUndefined, selectAll, detach, classList, Property, NotifyPropertyChanges, createElement, removeClass, select, ChildProperty, Collection, Event, Complex, Animation, getValue, setValue, append, addClass, isBlazor, rippleEffect, KeyboardEvents, closest, getInstance, isVisible, SanitizeHtmlHelper, formatUnit, setStyleAttribute, attributes, compile, isRippleEnabled, animationMode, remove, getRandomId, L10n, Draggable, isUndefined, getElement, Droppable, matches, extend, merge, initializeCSPTemplate } from '@syncfusion/ej2-base';
+import { Component, Browser, getUniqueID, Touch, EventHandler, isNullOrUndefined, selectAll, detach, classList, Property, NotifyPropertyChanges, createElement, removeClass, select, ChildProperty, Collection, Event, Complex, Animation, getValue, setValue, append, closest, addClass, isBlazor, rippleEffect, KeyboardEvents, getInstance, isVisible, SanitizeHtmlHelper, formatUnit, setStyleAttribute, attributes, compile, isRippleEnabled, animationMode, remove, getRandomId, L10n, Draggable, isUndefined, getElement, Droppable, matches, extend, merge, initializeCSPTemplate } from '@syncfusion/ej2-base';
 import { ListBase } from '@syncfusion/ej2-lists';
 import { getScrollableParent, Popup, getZindexPartial, fit, isCollide, calculatePosition, createSpinner, showSpinner, hideSpinner, Tooltip } from '@syncfusion/ej2-popups';
 import { Button, createCheckBox, rippleMouseHandler } from '@syncfusion/ej2-buttons';
@@ -1140,6 +1140,7 @@ let MenuBase = class MenuBase extends Component {
         this.tempItem = [];
         this.showSubMenuOn = 'Auto';
         this.isAnimationNone = false;
+        this.isKBDAction = false;
     }
     /**
      * Initialized third party configuration settings.
@@ -1213,6 +1214,30 @@ let MenuBase = class MenuBase extends Component {
             });
         }
     }
+    enableTouchScroll(scrollList) {
+        let touchStartY = 0;
+        this.touchStartFn = (e) => {
+            touchStartY = e.touches[0].clientY;
+        };
+        this.touchMoveFn = (e) => {
+            const touchEndY = e.touches[0].clientY;
+            const touchDiff = touchStartY - touchEndY;
+            const atTop = scrollList.scrollTop === 0;
+            const atBottom = scrollList.scrollTop + scrollList.clientHeight === scrollList.scrollHeight;
+            if ((atTop && touchDiff < 0) || (atBottom && touchDiff > 0)) {
+                e.preventDefault();
+            }
+            touchStartY = touchEndY;
+        };
+        scrollList.addEventListener('touchstart', this.touchStartFn, { passive: false });
+        scrollList.addEventListener('touchmove', this.touchMoveFn, { passive: false });
+    }
+    touchOutsideHandler(e) {
+        const target = e.target;
+        if (!closest(target, '.e-' + this.getModuleName() + '-wrapper')) {
+            this.closeMenu();
+        }
+    }
     initialize() {
         let wrapper = this.getWrapper();
         if (!wrapper) {
@@ -1312,6 +1337,10 @@ let MenuBase = class MenuBase extends Component {
         EventHandler.add(document, 'click', this.delegateClickHandler, this);
         this.wireKeyboardEvent(wrapper);
         this.rippleFn = rippleEffect(wrapper, { selector: '.' + ITEM });
+        if (!this.isMenu && this.enableScrolling) {
+            this.enableTouchScroll(wrapper);
+            document.addEventListener('touchstart', this.touchOutsideHandler.bind(this), { passive: true });
+        }
     }
     wireKeyboardEvent(element) {
         const keyConfigs = {
@@ -1363,6 +1392,7 @@ let MenuBase = class MenuBase extends Component {
         if (this.enableScrolling && e.keyCode === 13 && trgt.classList.contains('e-scroll-nav')) {
             this.removeLIStateByClass([FOCUSED, SELECTED], [closest(trgt, '.e-' + this.getModuleName() + '-wrapper')]);
         }
+        this.isKBDAction = true;
         if (actionNeeded) {
             switch (e.action) {
                 case RIGHTARROW:
@@ -1420,6 +1450,9 @@ let MenuBase = class MenuBase extends Component {
                 }
                 break;
         }
+        if (this.isAnimationNone) {
+            this.isKBDAction = false;
+        }
         if (actionNeeded) {
             e.action = actionName;
         }
@@ -2194,8 +2227,15 @@ let MenuBase = class MenuBase extends Component {
         }
         else {
             if (Browser.isDevice) {
-                top = Number(this.element.style.top.replace(px, ''));
-                left = Number(this.element.style.left.replace(px, ''));
+                if (!this.isMenu && this.enableScrolling) {
+                    const menuScrollElement = document.querySelector('.e-menu-vscroll');
+                    top = Number(menuScrollElement.style.top.replace('px', ''));
+                    left = Number(menuScrollElement.style.left.replace('px', ''));
+                }
+                else {
+                    top = Number(this.element.style.top.replace(px, ''));
+                    left = Number(this.element.style.left.replace(px, ''));
+                }
             }
             else {
                 const x = this.enableRtl ? 'left' : 'right';
@@ -2211,7 +2251,7 @@ let MenuBase = class MenuBase extends Component {
                 if (this.enableRtl || xCollision) {
                     left = (this.enableRtl && xCollision) ? left : left - ul.offsetWidth;
                 }
-                if (collide.indexOf('bottom') > -1) {
+                if (collide.indexOf('bottom') > -1 && (this.isMenu || !this.enableScrolling)) {
                     offset = this.callFit(ul, false, true, top, left);
                     top = offset.top;
                 }
@@ -2506,6 +2546,10 @@ let MenuBase = class MenuBase extends Component {
                 if (sli) {
                     sli.classList.remove(SELECTED);
                 }
+                const scrollMenu = this.enableScrolling && !this.isMenu ? closest(cli.parentElement, '.e-menu-vscroll') : null;
+                if (scrollMenu) {
+                    destroyScroll(getInstance(scrollMenu, VScroll), scrollMenu);
+                }
                 detach(cli.parentNode);
                 this.navIdx.pop();
             }
@@ -2948,6 +2992,11 @@ let MenuBase = class MenuBase extends Component {
         EventHandler.remove(document, 'click', this.delegateClickHandler);
         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);
+        }
     }
     unWireKeyboardEvent(element) {
         const keyboardModule = getInstance(element, KeyboardEvents);
@@ -3008,6 +3057,7 @@ let MenuBase = class MenuBase extends Component {
                     else {
                         this.end(options.element, isMenuOpen);
                     }
+                    this.isKBDAction = false;
                 }
             });
         }
@@ -3033,14 +3083,14 @@ let MenuBase = class MenuBase extends Component {
                 scrollMenu.style.display = 'block';
             }
             this.triggerOpen(ul);
-            if (ul.querySelector('.' + FOCUSED)) {
+            if (ul.querySelector('.' + FOCUSED) && this.isKBDAction) {
                 ul.querySelector('.' + FOCUSED).focus();
             }
             else {
                 const ele = this.getWrapper().children[this.getIdx(this.getWrapper(), ul) - 1];
                 if (this.currentTarget) {
                     if (!(this.currentTarget.classList.contains('e-numerictextbox') || this.currentTarget.classList.contains('e-textbox') || this.currentTarget.tagName === 'INPUT')) {
-                        if (ele) {
+                        if (ele && this.isKBDAction) {
                             ele.querySelector('.' + SELECTED).focus();
                         }
                         else {
@@ -3049,7 +3099,7 @@ let MenuBase = class MenuBase extends Component {
                     }
                 }
                 else {
-                    if (ele) {
+                    if (ele && this.isKBDAction) {
                         ele.querySelector('.' + SELECTED).focus();
                     }
                     else {
@@ -3178,6 +3228,10 @@ let MenuBase = class MenuBase extends Component {
                         if (Browser.isDevice && !ul.classList.contains('e-contextmenu')) {
                             ul.children[idx + 1].classList.remove(disabled);
                         }
+                        else if (this.enableScrolling && !ul.classList.contains('e-menu-parent')) {
+                            const mainUl = ul.querySelector('.e-menu-parent');
+                            mainUl.children[idx].classList.remove(disabled);
+                        }
                         else {
                             ul.children[idx].classList.remove(disabled);
                         }
@@ -7983,7 +8037,7 @@ let Tab = class Tab extends Component {
             attrs: { 'role': 'tabpanel', 'aria-labelledby': CLS_ITEM$2 + this.tabId + '_' + index }
         });
         if (['Dynamic', 'Demand'].indexOf(this.loadOn) !== -1 ||
-            (this.loadOn === 'Init' && index === Number(this.extIndex(this.itemIndexArray[0])))) {
+            (this.loadOn === 'Init' && index === this.selectedItem)) {
             addClass([contentElement], CLS_ACTIVE$1);
         }
         return contentElement;
@@ -8565,7 +8619,8 @@ let Tab = class Tab extends Component {
             if (this.isTemplate === true) {
                 const cnt = selectAll('.' + CLS_CONTENT$1 + ' > .' + CLS_ITEM$2, this.element);
                 for (let i = 0; i < cnt.length; i++) {
-                    cnt[i].setAttribute('style', 'display:block; visibility: visible');
+                    cnt[i].style.display = 'block';
+                    cnt[i].style.visibility = 'visible';
                     this.maxHeight = Math.max(this.maxHeight, this.getHeight(cnt[i]));
                     cnt[i].style.removeProperty('display');
                     cnt[i].style.removeProperty('visibility');
@@ -9369,6 +9424,9 @@ let Tab = class Tab extends Component {
                 item.disabled = item.disabled || false;
                 item.visible = item.visible || true;
             }
+            if (items && items.length !== 0 && this.element && this.element.classList.contains(CLS_HIDDEN$1)) {
+                this.element.classList.remove(CLS_HIDDEN$1);
+            }
             this.trigger('adding', addArgs, (tabAddingArgs) => {
                 if (!tabAddingArgs.cancel) {
                     this.addingTabContent(items, index);
@@ -9495,6 +9553,16 @@ let Tab = class Tab extends Component {
                     this.tbItem = selectAll('.' + CLS_TB_ITEM, this.getTabHeader());
                     index = this.getSelectingTabIndex(index);
                     index = !isNaN(index) && index >= 0 && this.tbItem.length > index ? index : 0;
+                    const tabItem = this.tbItem[index];
+                    if (tabItem) {
+                        if (tabItem.classList.contains(CLS_HIDDEN$1)) {
+                            tabItem.classList.remove(CLS_HIDDEN$1);
+                        }
+                        const firstChild = tabItem.firstElementChild;
+                        if (firstChild && firstChild.hasAttribute('aria-hidden')) {
+                            firstChild.removeAttribute('aria-hidden');
+                        }
+                    }
                     this.selectedItem = index;
                     this.select(index);
                 }
@@ -9507,7 +9575,9 @@ let Tab = class Tab extends Component {
                     this.tbItem = selectAll('.' + CLS_TB_ITEM, this.getTabHeader());
                 }
                 if (selectAll('.' + CLS_TB_ITEM, this.element).length === 0) {
-                    this.hdrEle.style.display = 'none';
+                    const cnt = select('.' + CLS_CONTENT$1, this.element);
+                    detach(this.hdrEle);
+                    detach(cnt);
                 }
                 this.enableAnimation = true;
             }
@@ -9517,7 +9587,7 @@ let Tab = class Tab extends Component {
      * Shows or hides the Tab that is in the specified index.
      *
      * @param {number} index - Index value of target item.
-     * @param {boolean} value - Based on this Boolean value, item will be hide (false) or show (true). By default, value is true.
+     * @param {boolean} value - Based on this Boolean value, item will be hide (true) or show (false). By default, value is true.
      * @returns {void}.
      */
     hideTab(index, value) {
@@ -10858,7 +10928,8 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             this.trigger('drawNode', eventArgs);
             if (e.curData[this.fields.selectable] === false && !this.showCheckBox) {
                 e.item.classList.add(PREVENTSELECT);
-                e.item.firstElementChild.setAttribute('style', 'cursor: not-allowed');
+                const firstChild = e.item.firstElementChild;
+                firstChild.style.cursor = 'not-allowed';
             }
         }
     }
@@ -13164,7 +13235,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         this.trigger('nodeEditing', eventArgs, (observedArgs) => {
             if (!observedArgs.cancel) {
                 const inpWidth = textEle.offsetWidth + 5;
-                const style = 'width:' + inpWidth + 'px';
+                const widthSize = inpWidth + 'px';
                 addClass([liEle], EDITING);
                 if (!isNullOrUndefined(this.nodeTemplateFn)) {
                     this.destroyTemplate(liEle);
@@ -13172,16 +13243,16 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 if (this.isReact) {
                     setTimeout(() => {
-                        this.renderTextBox(eventArgs, textEle, style);
+                        this.renderTextBox(eventArgs, textEle, widthSize);
                     }, 5);
                 }
                 else {
-                    this.renderTextBox(eventArgs, textEle, style);
+                    this.renderTextBox(eventArgs, textEle, widthSize);
                 }
             }
         });
     }
-    renderTextBox(eventArgs, textEle, style) {
+    renderTextBox(eventArgs, textEle, widthSize) {
         textEle.innerHTML = eventArgs.innerHtml;
         const inpEle = select('.' + TREEINPUT, textEle);
         this.inputObj = Input.createInput({
@@ -13190,7 +13261,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                 enableRtl: this.enableRtl
             }
         }, this.createElement);
-        this.inputObj.container.setAttribute('style', style);
+        this.inputObj.container.style.width = widthSize;
         inpEle.focus();
         const inputEle = inpEle;
         inputEle.setSelectionRange(0, inputEle.value.length);
@@ -15910,7 +15981,7 @@ let Sidebar = class Sidebar extends Component {
         if (!isNullOrUndefined(this.tabIndex)) {
             this.element.setAttribute('tabindex', this.tabIndex);
         }
-        if (this.type === 'Auto' && !Browser.isDevice) {
+        if (this.type === 'Auto' && !Browser.isDevice && this.checkMediaQuery()) {
             this.show();
         }
         else if (!this.isOpen) {
@@ -16134,6 +16205,13 @@ let Sidebar = class Sidebar extends Component {
             }
         }
     }
+    checkMediaQuery() {
+        if (isNullOrUndefined(this.mediaQuery)) {
+            return true;
+        }
+        return (typeof (this.mediaQuery) === 'string') ?
+            window.matchMedia(this.mediaQuery).matches : (this.mediaQuery).matches;
+    }
     resize() {
         if (!isNullOrUndefined(this.width) && this.width !== 'auto' && typeof this.width === 'string' && !this.width.includes('px')) {
             this.setType(this.type);