@syncfusion/ej2-navigations 20.4.40 → 20.4.43

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

@@ -1217,7 +1217,7 @@ let MenuBase = class MenuBase extends Component {
             }
         }
         if (this.cssClass) {
-            addClass([wrapper], this.cssClass.split(' '));
+            addClass([wrapper], this.cssClass.replace(/\s+/g, ' ').trim().split(' '));
         }
         if (this.enableRtl) {
             wrapper.classList.add(RTL);
@@ -1415,14 +1415,6 @@ let MenuBase = class MenuBase extends Component {
                 if (fliIdx === (e.action === DOWNARROW ? cul.childElementCount : -1)) {
                     fliIdx = defaultIdx;
                 }
-                if (cul.children[fliIdx].classList.contains(HIDE)) {
-                    if (e.action === DOWNARROW && fliIdx === cul.childElementCount - 1) {
-                        fliIdx = defaultIdx;
-                    }
-                    else if (e.action === UPARROW && fliIdx === 0) {
-                        fliIdx = defaultIdx;
-                    }
-                }
             }
         }
         const cli = cul.children[fliIdx];
@@ -1432,8 +1424,15 @@ let MenuBase = class MenuBase extends Component {
     }
     isValidLI(cli, index, action) {
         const cul = this.getUlByNavIdx();
+        const defaultIdx = (action === DOWNARROW || action === HOME || action === TAB) ? 0 : cul.childElementCount - 1;
         if (cli.classList.contains(SEPARATOR) || cli.classList.contains(DISABLED) || cli.classList.contains(HIDE)) {
-            if ((action === DOWNARROW) || (action === RIGHTARROW)) {
+            if (action === DOWNARROW && index === cul.childElementCount - 1) {
+                index = defaultIdx;
+            }
+            else if (action === UPARROW && index === 0) {
+                index = defaultIdx;
+            }
+            else if ((action === DOWNARROW) || (action === RIGHTARROW)) {
                 index++;
             }
             else {
@@ -1761,7 +1760,7 @@ let MenuBase = class MenuBase extends Component {
                 }
                 else {
                     if (this.cssClass) {
-                        addClass([this.popupWrapper], this.cssClass.split(' '));
+                        addClass([this.popupWrapper], this.cssClass.replace(/\s+/g, ' ').trim().split(' '));
                     }
                     this.popupObj.hide();
                 }
@@ -2167,7 +2166,12 @@ let MenuBase = class MenuBase extends Component {
         }
         const ul = ListBase.createList(this.createElement, items, listBaseOptions, !this.template, this);
         ul.setAttribute('tabindex', '0');
-        this.isMenu ? ul.setAttribute('role', 'menu') : ul.setAttribute('role', 'menubar');
+        if (this.isMenu) {
+            ul.setAttribute('role', 'menu');
+        }
+        else {
+            ul.setAttribute('role', 'menubar');
+        }
         return ul;
     }
     moverHandler(e) {
@@ -2554,7 +2558,7 @@ let MenuBase = class MenuBase extends Component {
                         removeClass([wrapper], oldProp.cssClass.split(' '));
                     }
                     if (newProp.cssClass) {
-                        addClass([wrapper], newProp.cssClass.split(' '));
+                        addClass([wrapper], newProp.cssClass.replace(/\s+/g, ' ').trim().split(' '));
                     }
                     break;
                 case 'enableRtl':
@@ -7327,9 +7331,7 @@ let Tab = class Tab extends Component {
             this.tbObj = null;
         }
         this.unWireEvents();
-        ['role', 'aria-disabled', 'aria-activedescendant', 'tabindex', 'aria-orientation', 'aria-owns'].forEach((val) => {
-            this.element.removeAttribute(val);
-        });
+        this.element.removeAttribute('aria-disabled');
         this.expTemplateContent();
         if (!this.isTemplate) {
             while (this.element.firstElementChild) {
@@ -7408,7 +7410,7 @@ let Tab = class Tab extends Component {
         const css = (name === 'msie') ? 'e-ie' : (name === 'edge') ? 'e-edge' : (name === 'safari') ? 'e-safari' : '';
         setStyleAttribute(this.element, { 'width': formatUnit(this.width), 'height': formatUnit(this.height) });
         this.setCssClass(this.element, this.cssClass, true);
-        attributes(this.element, { role: 'tablist', 'aria-disabled': 'false', 'aria-activedescendant': '', 'aria-owns': this.element.id + '_' + 'tab_header_items' });
+        attributes(this.element, { 'aria-disabled': 'false' });
         this.setCssClass(this.element, css, true);
         this.updatePopAnimationConfig();
     }
@@ -7503,8 +7505,7 @@ let Tab = class Tab extends Component {
                 hdrItems.forEach((item, index) => {
                     this.lastIndex = index;
                     const attr = {
-                        className: CLS_ITEM$2, id: CLS_ITEM$2 + this.tabId + '_' + index,
-                        attrs: { role: 'tab', 'aria-controls': CLS_CONTENT$1 + this.tabId + '_' + index, 'aria-selected': 'false' }
+                        className: CLS_ITEM$2, id: CLS_ITEM$2 + this.tabId + '_' + index
                     };
                     const txt = this.createElement('span', {
                         className: CLS_TEXT, innerHTML: item, attrs: { 'role': 'presentation' }
@@ -7512,7 +7513,10 @@ let Tab = class Tab extends Component {
                     const cont = this.createElement('div', {
                         className: CLS_TEXT_WRAP, innerHTML: txt + this.btnCls.outerHTML
                     }).outerHTML;
-                    const wrap = this.createElement('div', { className: CLS_WRAP, innerHTML: cont, attrs: { tabIndex: '-1' } });
+                    const wrap = this.createElement('div', {
+                        className: CLS_WRAP, innerHTML: cont,
+                        attrs: { role: 'tab', tabIndex: '-1', 'aria-selected': 'false', 'aria-controls': CLS_CONTENT$1 + this.tabId + '_' + index }
+                    });
                     tabItems.appendChild(this.createElement('div', attr));
                     selectAll('.' + CLS_ITEM$2, tabItems)[index].appendChild(wrap);
                 });
@@ -7531,15 +7535,13 @@ let Tab = class Tab extends Component {
         this.tbObj.isStringTemplate = true;
         this.tbObj.createElement = this.createElement;
         this.tbObj.appendTo(this.hdrEle);
-        attributes(this.hdrEle, { 'aria-label': 'tab-header' });
-        this.updateOrientationAttribute();
+        attributes(this.hdrEle, { role: 'tablist' });
         this.setCloseButton(this.showCloseButton);
         const toolbarHeader = this.tbObj.element.querySelector('.' + CLS_TB_ITEMS);
         if (!isNullOrUndefined(toolbarHeader)) {
             if (isNullOrUndefined(toolbarHeader.id) || toolbarHeader.id === '') {
                 toolbarHeader.id = this.element.id + '_' + 'tab_header_items';
             }
-            this.element.setAttribute('aria-owns', toolbarHeader.id);
         }
     }
     renderContent() {
@@ -7633,7 +7635,7 @@ let Tab = class Tab extends Component {
                 }
             }
             const tabIndex = isNullOrUndefined(item.tabIndex) ? '-1' : item.tabIndex.toString();
-            const wrapAttrs = (item.disabled) ? {} : { tabIndex: tabIndex, 'data-tabindex': tabIndex };
+            const wrapAttrs = (item.disabled) ? {} : { tabIndex: tabIndex, 'data-tabindex': tabIndex, role: 'tab', 'aria-selected': 'false' };
             tCont.appendChild(this.btnCls.cloneNode(true));
             const wrap = this.createElement('div', { className: CLS_WRAP, attrs: wrapAttrs });
             wrap.appendChild(tCont);
@@ -7644,7 +7646,7 @@ let Tab = class Tab extends Component {
                 this.itemIndexArray.splice((index + i), 0, CLS_ITEM$2 + this.tabId + '_' + this.lastIndex);
             }
             const attrObj = {
-                id: CLS_ITEM$2 + this.tabId + '_' + this.lastIndex, role: 'tab', 'aria-selected': 'false'
+                id: CLS_ITEM$2 + this.tabId + '_' + this.lastIndex
             };
             const tItem = { htmlAttributes: attrObj, template: wrap };
             tItem.cssClass = ((item.cssClass !== undefined) ? item.cssClass : ' ') + ' ' + disabled + ' ' + hidden + ' '
@@ -7673,6 +7675,7 @@ let Tab = class Tab extends Component {
         if (tabHeader) {
             const tabItems = selectAll('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE$1, tabHeader);
             [].slice.call(tabItems).forEach((node) => node.classList.remove(CLS_ACTIVE$1));
+            [].slice.call(tabItems).forEach((node) => node.firstElementChild.setAttribute('aria-selected', 'false'));
         }
     }
     checkPopupOverflow(ele) {
@@ -7715,9 +7718,6 @@ let Tab = class Tab extends Component {
         }
         return selectAll('.' + CLS_TB_ITEM, this.tbItems).length - 1;
     }
-    updateOrientationAttribute() {
-        attributes(this.element, { 'aria-orientation': (this.isVertical() ? 'vertical' : 'horizontal') });
-    }
     setCloseButton(val) {
         const trg = select('.' + CLS_HEADER$1, this.element);
         if (val === true) {
@@ -8021,7 +8021,6 @@ let Tab = class Tab extends Component {
             }
         }
         this.addVerticalClass();
-        this.updateOrientationAttribute();
         this.setActiveBorder();
         this.focusItem();
     }
@@ -8205,20 +8204,18 @@ let Tab = class Tab extends Component {
         if (!this.isTemplate) {
             const prev = this.tbItem[this.prevIndex];
             if (!isNullOrUndefined(prev)) {
-                prev.removeAttribute('aria-controls');
+                prev.firstElementChild.removeAttribute('aria-controls');
             }
-            attributes(trg, { 'aria-controls': CLS_CONTENT$1 + this.tabId + '_' + value });
+            attributes(trg.firstElementChild, { 'aria-controls': CLS_CONTENT$1 + this.tabId + '_' + value });
         }
         const id = trg.id;
         this.removeActiveClass();
         trg.classList.add(CLS_ACTIVE$1);
-        this.tbItem[this.prevIndex].setAttribute('aria-selected', 'false');
-        trg.setAttribute('aria-selected', 'true');
+        trg.firstElementChild.setAttribute('aria-selected', 'true');
         const no = Number(this.extIndex(id));
         if (isNullOrUndefined(this.prevActiveEle)) {
             this.prevActiveEle = CLS_CONTENT$1 + this.tabId + '_' + no;
         }
-        attributes(this.element, { 'aria-activedescendant': id });
         if (this.isTemplate) {
             if (select('.' + CLS_CONTENT$1, this.element).children.length > 0) {
                 const trg = this.findEle(select('.' + CLS_CONTENT$1, this.element).children, CLS_CONTENT$1 + this.tabId + '_' + no);
@@ -8887,7 +8884,7 @@ let Tab = class Tab extends Component {
                     (textValue.length === 0) && !isNullOrUndefined(item.header) && isNullOrUndefined(item.header.iconCss))) {
                     if (tabItems[place]) {
                         if (isNullOrUndefined(item.id)) {
-                            item.id = TABITEMPREFIX + (lastEleIndex + place).toString();
+                            item.id = CLS_ITEM$2 + this.tabId + '_' + TABITEMPREFIX + (lastEleIndex + place).toString();
                         }
                         tabItems[place].htmlAttributes['data-id'] = item.id;
                     }
@@ -9314,7 +9311,7 @@ let Tab = class Tab extends Component {
                     }
                 }
                 const tabIndex = isNullOrUndefined(item.tabIndex) ? '-1' : item.tabIndex.toString();
-                const wrapAtt = (item.disabled) ? {} : { tabIndex: tabIndex, 'data-tabindex': tabIndex };
+                const wrapAtt = (item.disabled) ? {} : { tabIndex: tabIndex, 'data-tabindex': tabIndex, role: 'tab', 'aria-selected': 'true' };
                 tConts.appendChild(this.btnCls.cloneNode(true));
                 const wraper = this.createElement('div', { className: CLS_WRAP, attrs: wrapAtt });
                 wraper.appendChild(tConts);
@@ -9365,11 +9362,7 @@ let Tab = class Tab extends Component {
             detach(element);
             detach(detachContent);
             const attr = {
-                className: CLS_TB_ITEM + ' ' + CLS_TEMPLATE$1 + ' ' + CLS_ACTIVE$1, id: CLS_ITEM$2 + this.tabId + '_' + index,
-                attrs: {
-                    role: 'tab', 'aria-controls': CLS_CONTENT$1 + this.tabId + '_' + index,
-                    'aria-disabled': 'false', 'aria-selected': 'true'
-                }
+                className: CLS_TB_ITEM + ' ' + CLS_TEMPLATE$1 + ' ' + CLS_ACTIVE$1, id: CLS_ITEM$2 + this.tabId + '_' + index
             };
             const txtString = this.createElement('span', {
                 className: CLS_TEXT, innerHTML: header, attrs: { 'role': 'presentation' }
@@ -9379,7 +9372,8 @@ let Tab = class Tab extends Component {
             }).outerHTML;
             const tabIndex = element.firstElementChild.getAttribute('data-tabindex');
             const wrap = this.createElement('div', {
-                className: CLS_WRAP, innerHTML: conte, attrs: { tabIndex: tabIndex, 'data-tabindex': tabIndex }
+                className: CLS_WRAP, innerHTML: conte,
+                attrs: { tabIndex: tabIndex, 'data-tabindex': tabIndex, role: 'tab', 'aria-controls': CLS_CONTENT$1 + this.tabId + '_' + index, 'aria-selected': 'true' }
             });
             tabItems.insertBefore(this.createElement('div', attr), tabItems.children[index + 1]);
             this.element.querySelector('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE$1).appendChild(wrap);
@@ -9669,6 +9663,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         this.isFirstRender = false;
         // Specifies whether the node is dropped or not
         this.isNodeDropped = false;
+        this.isInteracted = false;
         this.mouseDownStatus = false;
     }
     /**
@@ -10922,7 +10917,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         }
     }
     clickHandler(event) {
-        let target = event.originalEvent.target;
+        let target = Browser.isDevice ? document.elementFromPoint(event.originalEvent.changedTouches[0].clientX, event.originalEvent.changedTouches[0].clientY) : event.originalEvent.target;
         EventHandler.remove(this.element, 'contextmenu', this.preventContextMenu);
         if (!target || this.dragStartAction) {
             return;
@@ -11060,6 +11055,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         }
         if (this.isLoaded && this.expandArgs && !this.isRefreshed) {
             this.expandArgs = this.getExpandEvent(currLi, null);
+            this.expandArgs.isInteracted = this.isInteracted;
             this.trigger('nodeExpanded', this.expandArgs);
         }
     }
@@ -11081,6 +11077,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         let colArgs;
         if (this.isLoaded) {
             colArgs = this.getExpandEvent(currLi, e);
+            this.isInteracted = colArgs.isInteracted;
             this.trigger('nodeCollapsing', colArgs, (observedArgs) => {
                 if (observedArgs.cancel) {
                     removeClass([icon], PROCESS);
@@ -11140,6 +11137,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         this.removeExpand(liEle);
         if (this.isLoaded) {
             colArgs = this.getExpandEvent(liEle, null);
+            colArgs.isInteracted = this.isInteracted;
             this.trigger('nodeCollapsed', colArgs);
         }
     }
@@ -11546,6 +11544,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         }
         if (this.isLoaded && !this.isRefreshed) {
             this.expandArgs = this.getExpandEvent(currLi, e);
+            this.isInteracted = this.expandArgs.isInteracted;
             this.trigger('nodeExpanding', this.expandArgs, (observedArgs) => {
                 if (observedArgs.cancel) {
                     removeClass([icon], PROCESS);
@@ -15314,7 +15313,7 @@ let Breadcrumb = class Breadcrumb extends Component {
         this._maxItems = this.maxItems;
         this.element.setAttribute('aria-label', 'breadcrumb');
         if (this.cssClass) {
-            addClass([this.element], this.cssClass.split(' '));
+            addClass([this.element], this.cssClass.replace(/\s+/g, ' ').trim().split(' '));
         }
         if (this.enableRtl) {
             this.element.classList.add('e-rtl');
@@ -15824,7 +15823,7 @@ let Breadcrumb = class Breadcrumb extends Component {
                         removeClass([this.element], oldProp.cssClass.split(' '));
                     }
                     if (newProp.cssClass) {
-                        addClass([this.element], newProp.cssClass.split(' '));
+                        addClass([this.element], newProp.cssClass.replace(/\s+/g, ' ').trim().split(' '));
                     }
                     if ((oldProp.cssClass && oldProp.cssClass.indexOf(ICONRIGHT) > -1) && !(newProp.cssClass &&
                         newProp.cssClass.indexOf(ICONRIGHT) > -1) || !(oldProp.cssClass && oldProp.cssClass.indexOf(ICONRIGHT) > -1) &&