@syncfusion/ej2-navigations 28.2.12 → 29.1.34

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

@@ -1,4 +1,4 @@
-import { Browser, getUniqueID, Touch, EventHandler, isNullOrUndefined, selectAll, detach, classList, Property, NotifyPropertyChanges, Component, createElement, removeClass, select, ChildProperty, Collection, Animation, getValue, setValue, append, addClass, isBlazor, rippleEffect, KeyboardEvents, closest, getInstance, isVisible, SanitizeHtmlHelper, Event, Complex, formatUnit, setStyleAttribute, attributes, compile, isRippleEnabled, animationMode, remove, getRandomId, L10n, Draggable, isUndefined, getElement, Droppable, matches, extend, merge, initializeCSPTemplate } from '@syncfusion/ej2-base';
+import { Browser, getUniqueID, Touch, EventHandler, isNullOrUndefined, selectAll, detach, classList, Property, NotifyPropertyChanges, Component, createElement, removeClass, select, ChildProperty, Collection, Animation, getValue, setValue, append, closest, addClass, isBlazor, rippleEffect, KeyboardEvents, getInstance, isVisible, SanitizeHtmlHelper, Event, Complex, 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';
@@ -1213,6 +1213,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
         _this.tempItem = [];
         _this.showSubMenuOn = 'Auto';
         _this.isAnimationNone = false;
+        _this.isKBDAction = false;
         return _this;
     }
     /**
@@ -1288,6 +1289,30 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
             });
         }
     };
+    MenuBase.prototype.enableTouchScroll = function (scrollList) {
+        var touchStartY = 0;
+        this.touchStartFn = function (e) {
+            touchStartY = e.touches[0].clientY;
+        };
+        this.touchMoveFn = function (e) {
+            var touchEndY = e.touches[0].clientY;
+            var touchDiff = touchStartY - touchEndY;
+            var atTop = scrollList.scrollTop === 0;
+            var 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 });
+    };
+    MenuBase.prototype.touchOutsideHandler = function (e) {
+        var target = e.target;
+        if (!closest(target, '.e-' + this.getModuleName() + '-wrapper')) {
+            this.closeMenu();
+        }
+    };
     MenuBase.prototype.initialize = function () {
         var wrapper = this.getWrapper();
         if (!wrapper) {
@@ -1388,6 +1413,10 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
         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 });
+        }
     };
     MenuBase.prototype.wireKeyboardEvent = function (element) {
         var keyConfigs = {
@@ -1439,6 +1468,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
         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:
@@ -1496,6 +1526,9 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
                 }
                 break;
         }
+        if (this.isAnimationNone) {
+            this.isKBDAction = false;
+        }
         if (actionNeeded) {
             e.action = actionName;
         }
@@ -2284,8 +2317,15 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
         }
         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) {
+                    var 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 {
                 var x = this.enableRtl ? 'left' : 'right';
@@ -2301,7 +2341,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
                 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;
                 }
@@ -2603,6 +2643,10 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
                 if (sli) {
                     sli.classList.remove(SELECTED);
                 }
+                var 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();
             }
@@ -3054,6 +3098,11 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
         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);
+        }
     };
     MenuBase.prototype.unWireKeyboardEvent = function (element) {
         var keyboardModule = getInstance(element, KeyboardEvents);
@@ -3116,6 +3165,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
                     else {
                         _this.end(options.element, isMenuOpen);
                     }
+                    _this.isKBDAction = false;
                 }
             });
         }
@@ -3141,14 +3191,14 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
                 scrollMenu.style.display = 'block';
             }
             this.triggerOpen(ul);
-            if (ul.querySelector('.' + FOCUSED)) {
+            if (ul.querySelector('.' + FOCUSED) && this.isKBDAction) {
                 ul.querySelector('.' + FOCUSED).focus();
             }
             else {
                 var 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 {
@@ -3157,7 +3207,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
                     }
                 }
                 else {
-                    if (ele) {
+                    if (ele && this.isKBDAction) {
                         ele.querySelector('.' + SELECTED).focus();
                     }
                     else {
@@ -3291,6 +3341,10 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
                         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')) {
+                            var mainUl = ul.querySelector('.e-menu-parent');
+                            mainUl.children[idx].classList.remove(disabled);
+                        }
                         else {
                             ul.children[idx].classList.remove(disabled);
                         }
@@ -8254,7 +8308,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             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;
@@ -8841,7 +8895,8 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             if (this.isTemplate === true) {
                 var cnt = selectAll('.' + CLS_CONTENT$1 + ' > .' + CLS_ITEM$2, this.element);
                 for (var 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');
@@ -9654,6 +9709,9 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                 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, function (tabAddingArgs) {
                 if (!tabAddingArgs.cancel) {
                     _this.addingTabContent(items, index);
@@ -9782,6 +9840,16 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                     _this.tbItem = selectAll('.' + CLS_TB_ITEM, _this.getTabHeader());
                     index = _this.getSelectingTabIndex(index);
                     index = !isNaN(index) && index >= 0 && _this.tbItem.length > index ? index : 0;
+                    var tabItem = _this.tbItem[index];
+                    if (tabItem) {
+                        if (tabItem.classList.contains(CLS_HIDDEN$1)) {
+                            tabItem.classList.remove(CLS_HIDDEN$1);
+                        }
+                        var firstChild = tabItem.firstElementChild;
+                        if (firstChild && firstChild.hasAttribute('aria-hidden')) {
+                            firstChild.removeAttribute('aria-hidden');
+                        }
+                    }
                     _this.selectedItem = index;
                     _this.select(index);
                 }
@@ -9794,7 +9862,9 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                     _this.tbItem = selectAll('.' + CLS_TB_ITEM, _this.getTabHeader());
                 }
                 if (selectAll('.' + CLS_TB_ITEM, _this.element).length === 0) {
-                    _this.hdrEle.style.display = 'none';
+                    var cnt = select('.' + CLS_CONTENT$1, _this.element);
+                    detach(_this.hdrEle);
+                    detach(cnt);
                 }
                 _this.enableAnimation = true;
             }
@@ -9804,7 +9874,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
      * 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}.
      */
     Tab.prototype.hideTab = function (index, value) {
@@ -11189,7 +11259,8 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
             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');
+                var firstChild = e.item.firstElementChild;
+                firstChild.style.cursor = 'not-allowed';
             }
         }
     };
@@ -13521,7 +13592,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         this.trigger('nodeEditing', eventArgs, function (observedArgs) {
             if (!observedArgs.cancel) {
                 var inpWidth = textEle.offsetWidth + 5;
-                var style_1 = 'width:' + inpWidth + 'px';
+                var widthSize_1 = inpWidth + 'px';
                 addClass([liEle], EDITING);
                 if (!isNullOrUndefined(_this.nodeTemplateFn)) {
                     _this.destroyTemplate(liEle);
@@ -13529,16 +13600,16 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 if (_this.isReact) {
                     setTimeout(function () {
-                        _this.renderTextBox(eventArgs, textEle, style_1);
+                        _this.renderTextBox(eventArgs, textEle, widthSize_1);
                     }, 5);
                 }
                 else {
-                    _this.renderTextBox(eventArgs, textEle, style_1);
+                    _this.renderTextBox(eventArgs, textEle, widthSize_1);
                 }
             }
         });
     };
-    TreeView.prototype.renderTextBox = function (eventArgs, textEle, style) {
+    TreeView.prototype.renderTextBox = function (eventArgs, textEle, widthSize) {
         textEle.innerHTML = eventArgs.innerHtml;
         var inpEle = select('.' + TREEINPUT, textEle);
         this.inputObj = Input.createInput({
@@ -13547,7 +13618,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
                 enableRtl: this.enableRtl
             }
         }, this.createElement);
-        this.inputObj.container.setAttribute('style', style);
+        this.inputObj.container.style.width = widthSize;
         inpEle.focus();
         var inputEle = inpEle;
         inputEle.setSelectionRange(0, inputEle.value.length);
@@ -16304,7 +16375,7 @@ var Sidebar = /** @__PURE__ @class */ (function (_super) {
         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) {
@@ -16530,6 +16601,13 @@ var Sidebar = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
+    Sidebar.prototype.checkMediaQuery = function () {
+        if (isNullOrUndefined(this.mediaQuery)) {
+            return true;
+        }
+        return (typeof (this.mediaQuery) === 'string') ?
+            window.matchMedia(this.mediaQuery).matches : (this.mediaQuery).matches;
+    };
     Sidebar.prototype.resize = function () {
         if (!isNullOrUndefined(this.width) && this.width !== 'auto' && typeof this.width === 'string' && !this.width.includes('px')) {
             this.setType(this.type);