@syncfusion/ej2-navigations 35.1.40 → 35.1.43

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, 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 { 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, L10n, formatUnit, setStyleAttribute, attributes, compile, isRippleEnabled, animationMode, remove, getRandomId, 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';
@@ -1594,7 +1594,7 @@ let MenuBase = class MenuBase extends Component {
             const popups = [];
             const allPopup = selectAll('.' + POPUP);
             allPopup.forEach((elem) => {
-                if (this.element.id === elem.id.split('-')[2] || elem.id.split('-')[2] + '-' + elem.id.split('-')[3]) {
+                if (this.element.id === elem.id.split('-')[2] || (this.element.id.includes('-') && elem.id.includes(this.element.id))) {
                     popups.push(elem);
                 }
             });
@@ -3920,6 +3920,8 @@ let Toolbar = class Toolbar extends Component {
         this.isVertical = this.element.classList.contains(CLS_VERTICAL) ? true : false;
         this.isExtendedOpen = false;
         this.popupPriCount = 0;
+        const localeText = { overflow: 'overflow' };
+        this.l10n = new L10n(this.getModuleName(), localeText, this.locale);
         if (this.enableRtl) {
             this.add(this.element, CLS_RTL$2);
         }
@@ -4113,10 +4115,15 @@ let Toolbar = class Toolbar extends Component {
                     return;
                 }
                 if (rootEle === trgt) {
-                    this.elementFocus(clst);
+                    if (this.isDropDownList(clst.firstElementChild)) {
+                        this.eleFocus(clst, 'next', true);
+                    }
+                    else {
+                        this.elementFocus(clst);
+                    }
                 }
                 else if (!navChk) {
-                    this.eleFocus(clst, 'next');
+                    this.eleFocus(clst, 'next', true);
                 }
                 break;
             case 'moveLeft':
@@ -4124,7 +4131,7 @@ let Toolbar = class Toolbar extends Component {
                     return;
                 }
                 if (!navChk) {
-                    this.eleFocus(clst, 'previous');
+                    this.eleFocus(clst, 'previous', true);
                 }
                 break;
             case 'home':
@@ -4314,12 +4321,13 @@ let Toolbar = class Toolbar extends Component {
         }
         return element;
     }
-    eleFocus(closest, pos) {
+    eleFocus(closest, pos, skipDropDownList = false) {
         const sib = Object(closest)[pos + 'ElementSibling'];
         if (sib) {
-            const skipEle = this.eleContains(sib);
+            const skipEle = this.eleContains(sib) ||
+                (skipDropDownList && this.isDropDownList(sib.firstElementChild));
             if (skipEle) {
-                this.eleFocus(sib, pos);
+                this.eleFocus(sib, pos, skipDropDownList);
                 return;
             }
             this.elementFocus(sib);
@@ -4332,8 +4340,8 @@ let Toolbar = class Toolbar extends Component {
             if (!isNullOrUndefined(elem) && elem.children.length > 0) {
                 if (pos === 'next') {
                     const el = elem.querySelector('.' + CLS_ITEM);
-                    if (this.eleContains(el)) {
-                        this.eleFocus(el, pos);
+                    if (this.eleContains(el) || (skipDropDownList && this.isDropDownList(el.firstElementChild))) {
+                        this.eleFocus(el, pos, skipDropDownList);
                     }
                     else {
                         el.firstElementChild.focus();
@@ -4342,8 +4350,8 @@ let Toolbar = class Toolbar extends Component {
                 }
                 else {
                     const el = elem.lastElementChild;
-                    if (this.eleContains(el)) {
-                        this.eleFocus(el, pos);
+                    if (this.eleContains(el) || (skipDropDownList && this.isDropDownList(el.firstElementChild))) {
+                        this.eleFocus(el, pos, skipDropDownList);
                     }
                     else {
                         this.elementFocus(el);
@@ -4354,10 +4362,24 @@ let Toolbar = class Toolbar extends Component {
         else if (!isNullOrUndefined(closest)) {
             const tbrItems = this.element.querySelectorAll('.' + CLS_ITEMS + ' .' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + ')' + ':not(.' + CLS_DISABLE$2 + ')' + ':not(.' + CLS_HIDDEN + ')');
             if (pos === 'next' && tbrItems) {
-                this.elementFocus(tbrItems[0]);
+                let index = 0;
+                while (skipDropDownList && index < tbrItems.length &&
+                    this.isDropDownList(tbrItems[index].firstElementChild)) {
+                    index++;
+                }
+                if (index < tbrItems.length) {
+                    this.elementFocus(tbrItems[index]);
+                }
             }
             else if (pos === 'previous' && tbrItems) {
-                this.elementFocus(tbrItems[tbrItems.length - 1]);
+                let index = tbrItems.length - 1;
+                while (skipDropDownList && index >= 0 &&
+                    this.isDropDownList(tbrItems[index].firstElementChild)) {
+                    index--;
+                }
+                if (index >= 0) {
+                    this.elementFocus(tbrItems[index]);
+                }
             }
         }
     }
@@ -4691,7 +4713,7 @@ let Toolbar = class Toolbar extends Component {
         this.createPopupEle(ele, [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, ele)));
         const ariaAttr = {
             'tabindex': '0', 'role': 'button', 'aria-haspopup': 'true',
-            'aria-label': 'overflow'
+            'aria-label': this.l10n.getConstant('overflow')
         };
         attributes(this.element.querySelector('.' + CLS_TBARNAV), ariaAttr);
     }
@@ -5688,7 +5710,9 @@ let Toolbar = class Toolbar extends Component {
         this.add(innerEle, CLS_TEMPLATE);
         const firstChild = innerEle.firstElementChild;
         if (!isNullOrUndefined(firstChild)) {
-            firstChild.setAttribute('tabindex', isNullOrUndefined(firstChild.getAttribute('tabIndex')) ? '-1' : this.getDataTabindex(firstChild));
+            if (!this.isDropDownList(firstChild)) {
+                firstChild.setAttribute('tabindex', isNullOrUndefined(firstChild.getAttribute('tabIndex')) ? '-1' : this.getDataTabindex(firstChild));
+            }
             firstChild.setAttribute('data-tabindex', isNullOrUndefined(firstChild.getAttribute('tabIndex')) ? '-1' : this.getDataTabindex(firstChild));
         }
         this.tbarEle.push(innerEle);
@@ -5806,6 +5830,17 @@ let Toolbar = class Toolbar extends Component {
     getDataTabindex(ele) {
         return isNullOrUndefined(ele.getAttribute('data-tabindex')) ? '-1' : ele.getAttribute('data-tabindex');
     }
+    isDropDownList(ele) {
+        if (isNullOrUndefined(ele)) {
+            return false;
+        }
+        const input = ele.querySelector('input.e-control');
+        if (isNullOrUndefined(input) || isNullOrUndefined(input.ej2_instances) || isNullOrUndefined(input.ej2_instances[0])) {
+            return false;
+        }
+        const instance = input.ej2_instances[0];
+        return instance.getModuleName() === 'dropdownlist';
+    }
     itemClick(e) {
         this.activeEleSwitch(e.currentTarget);
     }