@syncfusion/ej2-navigations 29.2.8 → 30.1.39

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

@@ -4018,6 +4018,38 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
         }
         return clst;
     };
+    Toolbar.prototype.getNextFocusableItem = function (currentItem, action) {
+        var selector = "." + CLS_ITEM + ":not(." + CLS_DISABLE$2 + "):not(." + CLS_SEPARATOR + "):not(." + CLS_HIDDEN + ")";
+        var items = Array.from(this.element.querySelectorAll(selector));
+        var currentIndex = items.indexOf(currentItem);
+        if (currentIndex < 0) {
+            return null;
+        }
+        var nextIndex;
+        switch (action) {
+            case 'moveRight':
+            case 'moveDown':
+            case 'tab':
+                nextIndex = (currentIndex + 1) % items.length;
+                break;
+            case 'moveLeft':
+            case 'moveUp':
+                nextIndex = (currentIndex - 1 + items.length) % items.length;
+                break;
+            case 'home':
+                nextIndex = 0;
+                break;
+            case 'end':
+                nextIndex = items.length - 1;
+                break;
+            default:
+                nextIndex = currentIndex;
+        }
+        if (nextIndex >= 0 && nextIndex < items.length) {
+            return items[parseInt(nextIndex.toString(), 10)];
+        }
+        return null;
+    };
     Toolbar.prototype.keyHandling = function (clst, e, trgt, navChk, scrollChk) {
         var popObj = this.popObj;
         var rootEle = this.element;
@@ -4083,19 +4115,30 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
                 if (!this.isVertical) {
                     if (popObj && closest(trgt, '.e-popup')) {
                         var popEle = popObj.element;
-                        var popFrstEle = popEle.firstElementChild;
-                        if ((value === 'previous' && popFrstEle === clst)) {
-                            popEle.lastElementChild.firstChild.focus();
+                        if ((value === 'previous' && popEle.firstElementChild === clst)) {
+                            var lastVisibleEle = this.focusLastVisibleEle([].slice.call(popEle.children));
+                            if (lastVisibleEle) {
+                                this.elementFocus(lastVisibleEle);
+                            }
                         }
                         else if (value === 'next' && popEle.lastElementChild === clst) {
-                            popFrstEle.firstChild.focus();
+                            var firstVisibleEle = this.focusFirstVisibleEle([].slice.call(popEle.children));
+                            if (firstVisibleEle) {
+                                this.elementFocus(firstVisibleEle);
+                            }
                         }
                         else {
                             this.eleFocus(clst, value);
                         }
                     }
                     else if (e.action === 'moveDown' && popObj && isVisible(popObj.element)) {
-                        this.elementFocus(clst);
+                        var skipEle = this.eleContains(clst);
+                        if (skipEle) {
+                            this.eleFocus(clst, value);
+                        }
+                        else {
+                            this.elementFocus(clst);
+                        }
                     }
                 }
                 else {
@@ -4141,8 +4184,10 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
         }
     };
     Toolbar.prototype.keyActionHandler = function (e) {
+        var _this = this;
         var trgt = e.target;
-        if (trgt.tagName === 'INPUT' || trgt.tagName === 'TEXTAREA' || this.element.classList.contains(CLS_DISABLE$2)) {
+        if ((e.action === 'home' || e.action === 'end' || e.action === 'moveRight' || e.action === 'moveLeft' || e.action === 'moveUp' || e.action === 'moveDown')
+            && (trgt.tagName === 'INPUT' || trgt.tagName === 'TEXTAREA' || this.element.classList.contains(CLS_DISABLE$2))) {
             return;
         }
         e.preventDefault();
@@ -4150,7 +4195,19 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
         var tbarScrollChk = trgt.classList.contains(CLS_TBARSCRLNAV);
         var clst = this.clstElement(tbrNavChk, trgt);
         if (clst || tbarScrollChk) {
-            this.keyHandling(clst, e, trgt, tbrNavChk, tbarScrollChk);
+            var currentItem = clst;
+            var nextItem = this.getNextFocusableItem(currentItem, e.action);
+            var keyDownEventArgs = {
+                originalEvent: e,
+                currentItem: currentItem,
+                nextItem: nextItem,
+                cancel: false
+            };
+            this.trigger('keyDown', keyDownEventArgs, function (keyDownArgs) {
+                if (!keyDownArgs.cancel) {
+                    _this.keyHandling(clst, e, trgt, tbrNavChk, tbarScrollChk);
+                }
+            });
         }
     };
     /**
@@ -4189,7 +4246,7 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
         var index = 0;
         while (index < nodes.length) {
             var ele = nodes[parseInt(index.toString(), 10)];
-            if (!ele.classList.contains(CLS_HIDDEN) && !ele.classList.contains(CLS_DISABLE$2)) {
+            if (!ele.classList.contains(CLS_SEPARATOR) && !ele.classList.contains(CLS_HIDDEN) && !ele.classList.contains(CLS_DISABLE$2)) {
                 return ele;
             }
             index++;
@@ -4201,7 +4258,7 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
         var index = nodes.length - 1;
         while (index >= 0) {
             var ele = nodes[parseInt(index.toString(), 10)];
-            if (!ele.classList.contains(CLS_HIDDEN) && !ele.classList.contains(CLS_DISABLE$2)) {
+            if (!ele.classList.contains(CLS_SEPARATOR) && !ele.classList.contains(CLS_HIDDEN) && !ele.classList.contains(CLS_DISABLE$2)) {
                 return ele;
             }
             index--;
@@ -5689,10 +5746,6 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
         return isNullOrUndefined(ele.getAttribute('data-tabindex')) ? '-1' : ele.getAttribute('data-tabindex');
     };
     Toolbar.prototype.itemClick = function (e) {
-        var itemClosest = !isNullOrUndefined(closest(e.currentTarget, '.' + CLS_TEMPLATE));
-        if (itemClosest) {
-            return;
-        }
         this.activeEleSwitch(e.currentTarget);
     };
     Toolbar.prototype.activeEleSwitch = function (ele) {
@@ -6055,6 +6108,9 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
     __decorate$3([
         Event()
     ], Toolbar.prototype, "beforeCreate", void 0);
+    __decorate$3([
+        Event()
+    ], Toolbar.prototype, "keyDown", void 0);
     Toolbar = __decorate$3([
         NotifyPropertyChanges
     ], Toolbar);
@@ -7481,6 +7537,7 @@ var __decorate$5 = (undefined && undefined.__decorate) || function (decorators,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+var CONTEXTMENUTEMPLATE = 'e-contextmenu-template';
 /**
  * The ContextMenu is a graphical user interface that appears on the user right click/touch hold operation.
  * ```html
@@ -7518,6 +7575,7 @@ var ContextMenu = /** @__PURE__ @class */ (function (_super) {
     };
     ContextMenu.prototype.initialize = function () {
         this.template = this.itemTemplate ? this.itemTemplate : null;
+        this.addTemplateClass();
         _super.prototype.initialize.call(this);
         attributes(this.element, { 'role': 'menubar', 'tabindex': '0' });
         this.element.style.zIndex = getZindexPartial(this.element).toString();
@@ -7543,6 +7601,12 @@ var ContextMenu = /** @__PURE__ @class */ (function (_super) {
     ContextMenu.prototype.close = function () {
         _super.prototype.closeMenu.call(this);
     };
+    ContextMenu.prototype.addTemplateClass = function () {
+        if (!isNullOrUndefined(this.itemTemplate) && typeof this.itemTemplate === 'function' ||
+            (typeof this.itemTemplate === 'string' && this.itemTemplate !== '')) {
+            addClass([this.element], CONTEXTMENUTEMPLATE);
+        }
+    };
     /**
      * Called internally if any of the property value changed.
      *
@@ -7566,6 +7630,8 @@ var ContextMenu = /** @__PURE__ @class */ (function (_super) {
                     break;
                 case 'itemTemplate':
                     this.itemTemplate = newProp.itemTemplate;
+                    removeClass([this.element], CONTEXTMENUTEMPLATE);
+                    this.addTemplateClass();
                     this.refresh();
             }
         }
@@ -9281,7 +9347,9 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                 }
                 break;
             case 'openPopup':
-                e.preventDefault();
+                if (!isNullOrUndefined(e.target) && (e.target.classList.contains(CLS_WRAP))) {
+                    e.preventDefault();
+                }
                 if (!isNullOrUndefined(this.popEle) && this.popEle.classList.contains(CLS_POPUP_CLOSE)) {
                     this.popObj.show(this.show);
                 }
@@ -12252,7 +12320,10 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
                                 activeElement_1.classList.add(ITEM_ANIMATION_ACTIVE);
                             }
                             start_1 = liEle_1.offsetHeight;
-                            end_1 = select('.' + TEXTWRAP, currLi).offsetHeight;
+                            var computedStyle = window.getComputedStyle(liEle_1);
+                            var paddingTop = parseFloat(computedStyle.paddingTop);
+                            var paddingBottom = parseFloat(computedStyle.paddingBottom);
+                            end_1 = select('.' + TEXTWRAP, currLi).offsetHeight + paddingBottom + paddingTop;
                         },
                         progress: function (args) {
                             args.element.style.display = 'block';
@@ -13903,6 +13974,15 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
                 _this.dragAction(e, virtualEle);
             },
             dragStop: function (e) {
+                if (!e.target) {
+                    if (e.helper && e.helper.parentNode) {
+                        detach(e.helper);
+                    }
+                    document.body.style.cursor = '';
+                    removeClass([_this.element], DRAGGING);
+                    _this.dragStartAction = false;
+                    return;
+                }
                 removeClass([_this.element], DRAGGING);
                 if (!e.target.classList.contains('e-sibling')) {
                     _this.removeVirtualEle();
@@ -13939,6 +14019,9 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         });
         this.dropObj = new Droppable(this.element, {
             out: function (e) {
+                if (!e.target) {
+                    return;
+                }
                 if (!isNullOrUndefined(e) && !e.target.classList.contains(SIBLING) &&
                     (_this.dropObj.dragData.default && _this.dropObj.dragData.default.helper.classList.contains(ROOT))) {
                     document.body.style.cursor = 'not-allowed';
@@ -13977,6 +14060,9 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         }
     };
     TreeView.prototype.dragAction = function (e, virtualEle) {
+        if (!e.target) {
+            return;
+        }
         var dropRoot = closest(e.target, '.' + DROPPABLE);
         var dropWrap = closest(e.target, '.' + TEXTWRAP);
         var icon = select('div.' + ICON, virtualEle);
@@ -15704,7 +15790,10 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
             }
             this.groupedData = this.getGroupedData(this.treeData, this.fields.parentID);
         }
-        this.setNodeFocusable();
+        var fNode = select('.' + LISTITEM + '[tabindex="0"]', this.element);
+        if (isNullOrUndefined(fNode)) {
+            this.setNodeFocusable();
+        }
         this.updateCheckedStateFromDS();
         if (this.showCheckBox && dropLi) {
             this.ensureParentCheckState(dropLi);
@@ -16098,7 +16187,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}
      */
     TreeView.prototype.uncheckAll = function (nodes) {
-        if (this.showCheckBox) {
+        if (this.showCheckBox && this.checkedNodes.length > 0) {
             this.doCheckBoxAction(nodes, false);
         }
     };
@@ -16458,6 +16547,8 @@ var Sidebar = /** @__PURE__ @class */ (function (_super) {
         var sibling = document.querySelector('.e-main-content') || this.targetEle;
         if (this.target && this.showBackdrop && sibling && !isNullOrUndefined(this.defaultBackdropDiv)) {
             removeClass([this.defaultBackdropDiv], DEFAULTBACKDROP);
+            this.defaultBackdropDiv.remove();
+            this.defaultBackdropDiv = null;
         }
         else if (this.showBackdrop && this.modal) {
             this.modal.style.display = 'none';
@@ -16560,7 +16651,9 @@ var Sidebar = /** @__PURE__ @class */ (function (_super) {
                 removeClass([_this.element], CLOSE);
                 setStyleAttribute(_this.element, { 'width': formatUnit(_this.width) });
                 _this.setType(_this.type);
-                _this.createBackDrop();
+                if (_this.targetEle && !_this.targetEle.querySelector('.e-sidebar-overlay')) {
+                    _this.createBackDrop();
+                }
                 _this.setAnimation();
                 if (_this.type === 'Slide') {
                     document.body.classList.add('e-sidebar-overflow');
@@ -17982,9 +18075,6 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
                     }
                     break;
                 case 'enableTouchSwipe':
-                    if (!this.enableTouchSwipe && this.touchModule) {
-                        this.touchModule.destroy();
-                    }
                     if (this.element.querySelector("." + CLS_ITEMS$2)) {
                         this.renderTouchActions();
                     }
@@ -18387,9 +18477,6 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
         this.keyModule = new KeyboardEvents(this.element, { keyAction: this.keyHandler.bind(this), keyConfigs: this.keyConfigs });
     };
     Carousel.prototype.renderTouchActions = function () {
-        if (!this.enableTouchSwipe) {
-            return;
-        }
         this.touchModule = new Touch(this.element, { swipe: this.swipeHandler.bind(this) });
     };
     Carousel.prototype.applyAnimation = function () {
@@ -18957,7 +19044,7 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
         }
     };
     Carousel.prototype.wireEvents = function () {
-        if (this.animationEffect !== 'Custom' && this.enableTouchSwipe) {
+        if (this.animationEffect !== 'Custom') {
             this.swipeModehandlers();
         }
         EventHandler.add(this.element, 'focusin focusout', this.onFocusActions, this);
@@ -19847,11 +19934,6 @@ var Stepper = /** @__PURE__ @class */ (function (_super) {
     Stepper.prototype.updateAnimation = function () {
         var progressEle = this.element.querySelector('.e-progressbar-value');
         if (this.animation.enable) {
-            if (this.animation.duration >= 0) {
-                if (progressEle) {
-                    progressEle.style.setProperty('--duration', ((this.animation.duration) + 'ms'));
-                }
-            }
             if (this.animation.delay >= 0) {
                 if (progressEle) {
                     progressEle.style.setProperty('--delay', ((this.animation.delay) + 'ms'));
@@ -20430,6 +20512,9 @@ var Stepper = /** @__PURE__ @class */ (function (_super) {
         }
     };
     Stepper.prototype.navigationHandler = function (index, stepStatus, isUpdated) {
+        if (index !== this.activeStep && this.progressbar) {
+            this.progressbar.style.transitionDuration = this.animation.duration + 'ms';
+        }
         index = Math.min(index, this.steps.length - 1);
         var Itemslength = this.stepperItemElements.length;
         if (index >= 0 && index < Itemslength - 1) {
@@ -20500,6 +20585,9 @@ var Stepper = /** @__PURE__ @class */ (function (_super) {
             this.updateIndicatorStatus(i, itemElement);
         }
         this.updateStepInteractions();
+        if (this.progressbar) {
+            this.progressbar.style.transitionDuration = '0ms';
+        }
     };
     Stepper.prototype.calculateProgressbarPos = function () {
         var _this = this;