@syncfusion/ej2-navigations 29.2.8 → 30.1.39

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

@@ -3878,6 +3878,38 @@ let Toolbar = class Toolbar extends Component {
         }
         return clst;
     }
+    getNextFocusableItem(currentItem, action) {
+        const selector = `.${CLS_ITEM}:not(.${CLS_DISABLE$2}):not(.${CLS_SEPARATOR}):not(.${CLS_HIDDEN})`;
+        const items = Array.from(this.element.querySelectorAll(selector));
+        const currentIndex = items.indexOf(currentItem);
+        if (currentIndex < 0) {
+            return null;
+        }
+        let 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;
+    }
     keyHandling(clst, e, trgt, navChk, scrollChk) {
         const popObj = this.popObj;
         const rootEle = this.element;
@@ -3943,19 +3975,30 @@ let Toolbar = class Toolbar extends Component {
                 if (!this.isVertical) {
                     if (popObj && closest(trgt, '.e-popup')) {
                         const popEle = popObj.element;
-                        const popFrstEle = popEle.firstElementChild;
-                        if ((value === 'previous' && popFrstEle === clst)) {
-                            popEle.lastElementChild.firstChild.focus();
+                        if ((value === 'previous' && popEle.firstElementChild === clst)) {
+                            const lastVisibleEle = this.focusLastVisibleEle([].slice.call(popEle.children));
+                            if (lastVisibleEle) {
+                                this.elementFocus(lastVisibleEle);
+                            }
                         }
                         else if (value === 'next' && popEle.lastElementChild === clst) {
-                            popFrstEle.firstChild.focus();
+                            const 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);
+                        const skipEle = this.eleContains(clst);
+                        if (skipEle) {
+                            this.eleFocus(clst, value);
+                        }
+                        else {
+                            this.elementFocus(clst);
+                        }
                     }
                 }
                 else {
@@ -4002,7 +4045,8 @@ let Toolbar = class Toolbar extends Component {
     }
     keyActionHandler(e) {
         const 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();
@@ -4010,7 +4054,19 @@ let Toolbar = class Toolbar extends Component {
         const tbarScrollChk = trgt.classList.contains(CLS_TBARSCRLNAV);
         const clst = this.clstElement(tbrNavChk, trgt);
         if (clst || tbarScrollChk) {
-            this.keyHandling(clst, e, trgt, tbrNavChk, tbarScrollChk);
+            const currentItem = clst;
+            const nextItem = this.getNextFocusableItem(currentItem, e.action);
+            const keyDownEventArgs = {
+                originalEvent: e,
+                currentItem: currentItem,
+                nextItem: nextItem,
+                cancel: false
+            };
+            this.trigger('keyDown', keyDownEventArgs, (keyDownArgs) => {
+                if (!keyDownArgs.cancel) {
+                    this.keyHandling(clst, e, trgt, tbrNavChk, tbarScrollChk);
+                }
+            });
         }
     }
     /**
@@ -4049,7 +4105,7 @@ let Toolbar = class Toolbar extends Component {
         let index = 0;
         while (index < nodes.length) {
             const 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++;
@@ -4061,7 +4117,7 @@ let Toolbar = class Toolbar extends Component {
         let index = nodes.length - 1;
         while (index >= 0) {
             const 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--;
@@ -5533,10 +5589,6 @@ let Toolbar = class Toolbar extends Component {
         return isNullOrUndefined(ele.getAttribute('data-tabindex')) ? '-1' : ele.getAttribute('data-tabindex');
     }
     itemClick(e) {
-        const itemClosest = !isNullOrUndefined(closest(e.currentTarget, '.' + CLS_TEMPLATE));
-        if (itemClosest) {
-            return;
-        }
         this.activeEleSwitch(e.currentTarget);
     }
     activeEleSwitch(ele) {
@@ -5898,6 +5950,9 @@ __decorate$3([
 __decorate$3([
     Event()
 ], Toolbar.prototype, "beforeCreate", void 0);
+__decorate$3([
+    Event()
+], Toolbar.prototype, "keyDown", void 0);
 Toolbar = __decorate$3([
     NotifyPropertyChanges
 ], Toolbar);
@@ -7266,6 +7321,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;
 };
+const CONTEXTMENUTEMPLATE = 'e-contextmenu-template';
 /**
  * The ContextMenu is a graphical user interface that appears on the user right click/touch hold operation.
  * ```html
@@ -7302,6 +7358,7 @@ let ContextMenu = class ContextMenu extends MenuBase {
     }
     initialize() {
         this.template = this.itemTemplate ? this.itemTemplate : null;
+        this.addTemplateClass();
         super.initialize();
         attributes(this.element, { 'role': 'menubar', 'tabindex': '0' });
         this.element.style.zIndex = getZindexPartial(this.element).toString();
@@ -7327,6 +7384,12 @@ let ContextMenu = class ContextMenu extends MenuBase {
     close() {
         super.closeMenu();
     }
+    addTemplateClass() {
+        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.
      *
@@ -7349,6 +7412,8 @@ let ContextMenu = class ContextMenu extends MenuBase {
                     break;
                 case 'itemTemplate':
                     this.itemTemplate = newProp.itemTemplate;
+                    removeClass([this.element], CONTEXTMENUTEMPLATE);
+                    this.addTemplateClass();
                     this.refresh();
             }
         }
@@ -9000,7 +9065,9 @@ let Tab = class Tab extends Component {
                 }
                 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);
                 }
@@ -11911,7 +11978,10 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                                 activeElement.classList.add(ITEM_ANIMATION_ACTIVE);
                             }
                             start = liEle.offsetHeight;
-                            end = select('.' + TEXTWRAP, currLi).offsetHeight;
+                            const computedStyle = window.getComputedStyle(liEle);
+                            const paddingTop = parseFloat(computedStyle.paddingTop);
+                            const paddingBottom = parseFloat(computedStyle.paddingBottom);
+                            end = select('.' + TEXTWRAP, currLi).offsetHeight + paddingBottom + paddingTop;
                         },
                         progress: (args) => {
                             args.element.style.display = 'block';
@@ -13542,6 +13612,15 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                 this.dragAction(e, virtualEle);
             },
             dragStop: (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();
@@ -13578,6 +13657,9 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         });
         this.dropObj = new Droppable(this.element, {
             out: (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';
@@ -13616,6 +13698,9 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         }
     }
     dragAction(e, virtualEle) {
+        if (!e.target) {
+            return;
+        }
         const dropRoot = closest(e.target, '.' + DROPPABLE);
         let dropWrap = closest(e.target, '.' + TEXTWRAP);
         const icon = select('div.' + ICON, virtualEle);
@@ -15326,7 +15411,10 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             }
             this.groupedData = this.getGroupedData(this.treeData, this.fields.parentID);
         }
-        this.setNodeFocusable();
+        const fNode = select('.' + LISTITEM + '[tabindex="0"]', this.element);
+        if (isNullOrUndefined(fNode)) {
+            this.setNodeFocusable();
+        }
         this.updateCheckedStateFromDS();
         if (this.showCheckBox && dropLi) {
             this.ensureParentCheckState(dropLi);
@@ -15719,7 +15807,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
      * @returns {void}
      */
     uncheckAll(nodes) {
-        if (this.showCheckBox) {
+        if (this.showCheckBox && this.checkedNodes.length > 0) {
             this.doCheckBoxAction(nodes, false);
         }
     }
@@ -16062,6 +16150,8 @@ let Sidebar = class Sidebar extends Component {
         const 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';
@@ -16162,7 +16252,9 @@ let Sidebar = class Sidebar extends Component {
                 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');
@@ -17535,9 +17627,6 @@ let Carousel = class Carousel extends Component {
                     }
                     break;
                 case 'enableTouchSwipe':
-                    if (!this.enableTouchSwipe && this.touchModule) {
-                        this.touchModule.destroy();
-                    }
                     if (this.element.querySelector(`.${CLS_ITEMS$2}`)) {
                         this.renderTouchActions();
                     }
@@ -17936,9 +18025,6 @@ let Carousel = class Carousel extends Component {
         this.keyModule = new KeyboardEvents(this.element, { keyAction: this.keyHandler.bind(this), keyConfigs: this.keyConfigs });
     }
     renderTouchActions() {
-        if (!this.enableTouchSwipe) {
-            return;
-        }
         this.touchModule = new Touch(this.element, { swipe: this.swipeHandler.bind(this) });
     }
     applyAnimation() {
@@ -18498,7 +18584,7 @@ let Carousel = class Carousel extends Component {
         }
     }
     wireEvents() {
-        if (this.animationEffect !== 'Custom' && this.enableTouchSwipe) {
+        if (this.animationEffect !== 'Custom') {
             this.swipeModehandlers();
         }
         EventHandler.add(this.element, 'focusin focusout', this.onFocusActions, this);
@@ -19326,11 +19412,6 @@ let Stepper = class Stepper extends StepperBase {
     updateAnimation() {
         const 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'));
@@ -19901,6 +19982,9 @@ let Stepper = class Stepper extends StepperBase {
         }
     }
     navigationHandler(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);
         const Itemslength = this.stepperItemElements.length;
         if (index >= 0 && index < Itemslength - 1) {
@@ -19971,6 +20055,9 @@ let Stepper = class Stepper extends StepperBase {
             this.updateIndicatorStatus(i, itemElement);
         }
         this.updateStepInteractions();
+        if (this.progressbar) {
+            this.progressbar.style.transitionDuration = '0ms';
+        }
     }
     calculateProgressbarPos() {
         if ((this.element.classList.contains(LABELBEFORE) || this.element.classList.contains(LABELAFTER)) &&