@syncfusion/ej2-navigations 20.3.60 → 20.4.40

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

@@ -1198,6 +1198,7 @@ let MenuBase = class MenuBase extends Component {
         this.wireEvents();
         this.renderComplete();
         const wrapper = this.getWrapper();
+        // eslint-disable-next-line
         if (this.template && this.enableScrolling && (this.isReact || this.isAngular)) {
             requestAnimationFrame(() => {
                 addScrolling(this.createElement, wrapper, this.element, 'hscroll', this.enableRtl);
@@ -1414,6 +1415,14 @@ 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];
@@ -1579,6 +1588,7 @@ let MenuBase = class MenuBase extends Component {
                         this.isCMenu = false;
                     }
                     if (this.isMenu && trgtpopUp && popupId.length) {
+                        // eslint-disable-next-line
                         trgtliId = new RegExp('(.*)-ej2menu-' + this.element.id + '-popup').exec(popupId)[1];
                         closedLi = trgtpopUp.querySelector('[id="' + trgtliId + '"]');
                         trgtLi = (liElem && trgtpopUp.querySelector('[id="' + liElem.id + '"]'));
@@ -1587,7 +1597,7 @@ let MenuBase = class MenuBase extends Component {
                     if (isOpen && this.hamburgerMode && ulIndex && !(submenus.length)) {
                         this.afterCloseMenu(e);
                     }
-                    else if (isOpen && !this.hamburgerMode && this.navIdx.length && closedLi && !trgtLi && this.keyType !== "left") {
+                    else if (isOpen && !this.hamburgerMode && this.navIdx.length && closedLi && !trgtLi && this.keyType !== 'left') {
                         let ele = (e && e.target.classList.contains('e-vscroll'))
                             ? closest(e.target, '.e-menu-wrapper') : null;
                         if (ele) {
@@ -1628,7 +1638,7 @@ let MenuBase = class MenuBase extends Component {
                             if (sli) {
                                 sli.setAttribute('aria-expanded', 'false');
                                 sli.classList.remove(SELECTED);
-                                if (observedCloseArgs.isFocused && liElem || this.keyType === "left") {
+                                if (observedCloseArgs.isFocused && liElem || this.keyType === 'left') {
                                     sli.classList.add(FOCUSED);
                                     sli.focus();
                                 }
@@ -1892,6 +1902,7 @@ let MenuBase = class MenuBase extends Component {
                                 this.isNestedOrVertical ? this.left - this.popupWrapper.offsetWidth - this.lItem.parentElement.offsetWidth + 2
                                     : this.left - this.popupWrapper.offsetWidth + this.lItem.offsetWidth;
                         }
+                        // eslint-disable-next-line
                         if (this.template && (this.isReact || this.isAngular)) {
                             requestAnimationFrame(() => {
                                 this.collision();
@@ -2121,7 +2132,7 @@ let MenuBase = class MenuBase extends Component {
             itemCreated: (args) => {
                 if (args.curData[this.getField('separator', level)]) {
                     args.item.classList.add(SEPARATOR);
-                    args.item.removeAttribute('role');
+                    args.item.setAttribute('role', 'separator');
                 }
                 if (showIcon && !args.curData[args.fields.iconCss]
                     && !args.curData[this.getField('separator', level)]) {
@@ -2133,9 +2144,6 @@ let MenuBase = class MenuBase extends Component {
                     args.item.appendChild(span);
                     args.item.setAttribute('aria-haspopup', 'true');
                     args.item.setAttribute('aria-expanded', 'false');
-                    if (!this.isMenu) {
-                        args.item.removeAttribute('role');
-                    }
                     args.item.classList.add('e-menu-caret-icon');
                 }
                 if (this.isMenu && this.template) {
@@ -2147,6 +2155,7 @@ let MenuBase = class MenuBase extends Component {
                     if (args.item.classList.contains('e-has-child')) {
                         args.item.classList.remove('e-has-child');
                     }
+                    args.item.removeAttribute('aria-level');
                 }
                 const eventArgs = { item: args.curData, element: args.item };
                 this.trigger('beforeItemRender', eventArgs);
@@ -2158,9 +2167,7 @@ let MenuBase = class MenuBase extends Component {
         }
         const ul = ListBase.createList(this.createElement, items, listBaseOptions, !this.template, this);
         ul.setAttribute('tabindex', '0');
-        if (this.isMenu) {
-            ul.setAttribute('role', 'menu');
-        }
+        this.isMenu ? ul.setAttribute('role', 'menu') : ul.setAttribute('role', 'menubar');
         return ul;
     }
     moverHandler(e) {
@@ -2242,7 +2249,7 @@ let MenuBase = class MenuBase extends Component {
         }
     }
     getField(propName, level = 0) {
-        const fieldName = this.fields[propName];
+        const fieldName = this.fields[`${propName}`];
         return typeof fieldName === 'string' ? fieldName :
             (!fieldName[level] ? fieldName[fieldName.length - 1].toString()
                 : fieldName[level].toString());
@@ -2259,7 +2266,7 @@ let MenuBase = class MenuBase extends Component {
     }
     hasField(items, field) {
         for (let i = 0, len = items.length; i < len; i++) {
-            if (items[i][field]) {
+            if (items[i][`${field}`]) {
                 return true;
             }
         }
@@ -2636,7 +2643,7 @@ let MenuBase = class MenuBase extends Component {
         else {
             if (this.enableScrolling) {
                 const wrapper1 = this.getWrapper();
-                let ul1 = wrapper1.children[0];
+                const ul1 = wrapper1.children[0];
                 if (this.element.classList.contains('e-vertical')) {
                     destroyScroll(getInstance(ul1, VScroll), ul1);
                 }
@@ -2789,7 +2796,7 @@ let MenuBase = class MenuBase extends Component {
             else {
                 const 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 (!(this.currentTarget.classList.contains('e-numerictextbox') || this.currentTarget.classList.contains('e-textbox') || this.currentTarget.tagName === 'INPUT')) {
                         if (ele) {
                             ele.querySelector('.' + SELECTED).focus();
                         }
@@ -3302,6 +3309,9 @@ __decorate$3([
 __decorate$3([
     Event()
 ], Item.prototype, "click", void 0);
+__decorate$3([
+    Property(-1)
+], Item.prototype, "tabIndex", void 0);
 /**
  * The Toolbar control contains a group of commands that are aligned horizontally.
  * ```html
@@ -3382,7 +3392,7 @@ let Toolbar = class Toolbar extends Component {
             removeClass([this.element], this.cssClass.split(' '));
         }
         this.element.removeAttribute('style');
-        ['aria-disabled', 'aria-orientation', 'aria-haspopup', 'role'].forEach((attrb) => this.element.removeAttribute(attrb));
+        ['aria-disabled', 'aria-orientation', 'role'].forEach((attrb) => this.element.removeAttribute(attrb));
         super.destroy();
     }
     /**
@@ -3420,7 +3430,16 @@ let Toolbar = class Toolbar extends Component {
             keyConfigs: this.keyConfigs
         });
         EventHandler.add(this.element, 'keydown', this.docKeyDown, this);
-        this.element.setAttribute('tabIndex', '0');
+        this.updateTabIndex('0');
+    }
+    updateTabIndex(tabIndex) {
+        const ele = this.element.querySelector('.' + CLS_ITEM + ':not(.' + CLS_DISABLE$2 + ' ):not(.' + CLS_SEPARATOR + ' ):not(.' + CLS_HIDDEN + ' )');
+        if (!isNullOrUndefined(ele) && !isNullOrUndefined(ele.firstElementChild)) {
+            const dataTabIndex = ele.firstElementChild.getAttribute('data-tabindex');
+            if (dataTabIndex && dataTabIndex === '-1' && ele.firstElementChild.tagName !== 'INPUT') {
+                ele.firstElementChild.setAttribute('tabindex', tabIndex);
+            }
+        }
     }
     unwireKeyboardEvent() {
         if (this.keyModule) {
@@ -3624,7 +3643,6 @@ let Toolbar = class Toolbar extends Component {
                             this.activeEleRemove(ele);
                             ele.focus();
                         }
-                        this.element.removeAttribute('tabindex');
                     }
                 }
                 break;
@@ -3675,9 +3693,8 @@ let Toolbar = class Toolbar extends Component {
         else {
             rootEle.classList.remove(CLS_DISABLE$2);
         }
-        rootEle.setAttribute('tabindex', !value ? '0' : '-1');
         if (this.activeEle) {
-            this.activeEle.setAttribute('tabindex', !value ? '0' : '-1');
+            this.activeEle.setAttribute('tabindex', this.activeEle.getAttribute('data-tabindex'));
         }
         if (this.scrollModule) {
             this.scrollModule.disable(value);
@@ -3813,7 +3830,7 @@ let Toolbar = class Toolbar extends Component {
         }
         setStyleAttribute(this.element, { 'width': width });
         const ariaAttr = {
-            'role': 'toolbar', 'aria-disabled': 'false', 'aria-haspopup': 'false',
+            'role': 'toolbar', 'aria-disabled': 'false',
             'aria-orientation': !this.isVertical ? 'horizontal' : 'vertical'
         };
         attributes(this.element, ariaAttr);
@@ -3845,17 +3862,17 @@ let Toolbar = class Toolbar extends Component {
             this.tbarEle = [];
         }
         for (let i = 0; i < items.length; i++) {
-            innerItem = this.renderSubComponent(items[i], i);
+            innerItem = this.renderSubComponent(items[parseInt(i.toString(), 10)], i);
             if (this.tbarEle.indexOf(innerItem) === -1) {
                 this.tbarEle.push(innerItem);
             }
             if (!this.tbarAlign) {
-                this.tbarItemAlign(items[i], itemEleDom, i);
+                this.tbarItemAlign(items[parseInt(i.toString(), 10)], itemEleDom, i);
             }
-            innerPos = itemEleDom.querySelector('.e-toolbar-' + items[i].align.toLowerCase());
+            innerPos = itemEleDom.querySelector('.e-toolbar-' + items[parseInt(i.toString(), 10)].align.toLowerCase());
             if (innerPos) {
-                if (!(items[i].showAlwaysInPopup && items[i].overflow !== 'Show')) {
-                    this.tbarAlgEle[(items[i].align + 's').toLowerCase()].push(innerItem);
+                if (!(items[parseInt(i.toString(), 10)].showAlwaysInPopup && items[parseInt(i.toString(), 10)].overflow !== 'Show')) {
+                    this.tbarAlgEle[(items[parseInt(i.toString(), 10)].align + 's').toLowerCase()].push(innerItem);
                 }
                 innerPos.appendChild(innerItem);
             }
@@ -3865,7 +3882,7 @@ let Toolbar = class Toolbar extends Component {
         }
         if (this.isReact) {
             const portals = 'portals';
-            this.notify('render-react-toolbar-template', this[portals]);
+            this.notify('render-react-toolbar-template', this[`${portals}`]);
             this.renderReactTemplates();
         }
     }
@@ -4021,8 +4038,11 @@ let Toolbar = class Toolbar extends Component {
     }
     setOverflowAttributes(ele) {
         this.createPopupEle(ele, [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, ele)));
-        this.element.querySelector('.' + CLS_TBARNAV).setAttribute('tabIndex', '0');
-        this.element.querySelector('.' + CLS_TBARNAV).setAttribute('role', 'list');
+        const ariaAttr = {
+            'tabindex': '0', 'role': 'button', 'aria-haspopup': 'true',
+            'aria-label': 'overflow'
+        };
+        attributes(this.element.querySelector('.' + CLS_TBARNAV), ariaAttr);
     }
     separator() {
         const element = this.element;
@@ -4039,12 +4059,12 @@ let Toolbar = class Toolbar extends Component {
             }
         }
         for (let i = 0; i <= eleItem.length - 1; i++) {
-            if (eleItem[i].offsetLeft < 30 && eleItem[i].offsetLeft !== 0) {
+            if (eleItem[parseInt(i.toString(), 10)].offsetLeft < 30 && eleItem[parseInt(i.toString(), 10)].offsetLeft !== 0) {
                 if (this.overflowMode === 'MultiRow') {
-                    eleItem[i].classList.add(CLS_MULTIROW_SEPARATOR);
+                    eleItem[parseInt(i.toString(), 10)].classList.add(CLS_MULTIROW_SEPARATOR);
                 }
                 else if (this.overflowMode === 'Extended') {
-                    eleItem[i].classList.add(CLS_EXTENDABLE_SEPARATOR);
+                    eleItem[parseInt(i.toString(), 10)].classList.add(CLS_EXTENDABLE_SEPARATOR);
                 }
             }
         }
@@ -4077,7 +4097,7 @@ let Toolbar = class Toolbar extends Component {
             nodes = selectAll('.' + CLS_TBAROVERFLOW, ele);
             if (el.classList.contains(CLS_TBAROVERFLOW) && nodes.length > 0) {
                 if (tbarObj.tbResize && nodes.length > index) {
-                    ele.insertBefore(el, nodes[index]);
+                    ele.insertBefore(el, nodes[parseInt(index.toString(), 10)]);
                     ++nodePri;
                 }
                 else {
@@ -4115,7 +4135,7 @@ let Toolbar = class Toolbar extends Component {
         });
         const tbarEle = selectAll('.' + CLS_ITEM, element.querySelector('.' + CLS_ITEMS));
         for (let i = tbarEle.length - 1; i >= 0; i--) {
-            const tbarElement = tbarEle[i];
+            const tbarElement = tbarEle[parseInt(i.toString(), 10)];
             if (tbarElement.classList.contains(CLS_SEPARATOR) && this.overflowMode !== 'Extended') {
                 setStyleAttribute(tbarElement, { display: 'none' });
             }
@@ -4170,11 +4190,11 @@ let Toolbar = class Toolbar extends Component {
                 collision: { Y: this.enableCollision ? 'flip' : 'none' },
                 position: this.enableRtl ? { X: 'left', Y: 'top' } : { X: 'right', Y: 'top' }
             });
-            popup.appendTo(ele);
             if (this.overflowMode === 'Extended') {
                 popup.width = parseFloat(eleStyles.width) + ((parseFloat(eleStyles.borderRightWidth)) * 2);
                 popup.offsetX = 0;
             }
+            popup.appendTo(ele);
             EventHandler.add(document, 'scroll', this.docEvent.bind(this));
             EventHandler.add(document, 'click ', this.docEvent.bind(this));
             popup.element.style.maxHeight = popup.element.offsetHeight + 'px';
@@ -4191,7 +4211,6 @@ let Toolbar = class Toolbar extends Component {
                 popup.hide();
             }
             this.popObj = popup;
-            this.element.setAttribute('aria-haspopup', 'true');
         }
         else {
             const popupEle = this.popObj.element;
@@ -4219,6 +4238,7 @@ let Toolbar = class Toolbar extends Component {
         const popupEle = this.popObj.element;
         const toolEle = this.popObj.element.parentElement;
         const popupNav = toolEle.querySelector('.' + CLS_TBARNAV);
+        popupNav.setAttribute('aria-expanded', 'true');
         setStyleAttribute(popObj.element, { height: 'auto', maxHeight: '' });
         popObj.element.style.maxHeight = popObj.element.offsetHeight + 'px';
         if (this.overflowMode === 'Extended') {
@@ -4234,7 +4254,7 @@ let Toolbar = class Toolbar extends Component {
             let overflowHeight = (popupEle.offsetHeight - ((popupElePos - window.innerHeight - scrollVal) + 5));
             popObj.height = overflowHeight + 'px';
             for (let i = 0; i <= popupEle.childElementCount; i++) {
-                const ele = popupEle.children[i];
+                const ele = popupEle.children[parseInt(i.toString(), 10)];
                 if (ele.offsetTop + ele.offsetHeight > overflowHeight) {
                     overflowHeight = ele.offsetTop;
                     break;
@@ -4259,6 +4279,7 @@ let Toolbar = class Toolbar extends Component {
     popupClose(e) {
         const element = this.element;
         const popupNav = element.querySelector('.' + CLS_TBARNAV);
+        popupNav.setAttribute('aria-expanded', 'false');
         const popIcon = popupNav.firstElementChild;
         popupNav.classList.remove(CLS_TBARNAVACT);
         classList(popIcon, [CLS_POPUPDOWN], [CLS_POPUPICON]);
@@ -4284,7 +4305,7 @@ let Toolbar = class Toolbar extends Component {
         };
         for (let i = len - 1; i >= 0; i--) {
             let mrgn;
-            const compuStyle = window.getComputedStyle(inEle[i]);
+            const compuStyle = window.getComputedStyle(inEle[parseInt(i.toString(), 10)]);
             if (this.isVertical) {
                 mrgn = parseFloat((compuStyle).marginTop);
                 mrgn += parseFloat((compuStyle).marginBottom);
@@ -4293,35 +4314,37 @@ let Toolbar = class Toolbar extends Component {
                 mrgn = parseFloat((compuStyle).marginRight);
                 mrgn += parseFloat((compuStyle).marginLeft);
             }
-            const fstEleCheck = inEle[i] === this.tbarEle[0];
+            const fstEleCheck = inEle[parseInt(i.toString(), 10)] === this.tbarEle[0];
             if (fstEleCheck) {
                 this.tbarEleMrgn = mrgn;
             }
-            eleOffset = this.isVertical ? inEle[i].offsetHeight : inEle[i].offsetWidth;
+            eleOffset = this.isVertical ? inEle[parseInt(i.toString(), 10)].offsetHeight : inEle[parseInt(i.toString(), 10)].offsetWidth;
             const eleWid = fstEleCheck ? (eleOffset + mrgn) : eleOffset;
-            if (checkClass(inEle[i], [CLS_POPPRI]) && popPriority) {
-                inEle[i].classList.add(CLS_POPUP);
+            if (checkClass(inEle[parseInt(i.toString(), 10)], [CLS_POPPRI]) && popPriority) {
+                inEle[parseInt(i.toString(), 10)].classList.add(CLS_POPUP);
                 if (this.isVertical) {
-                    setStyleAttribute(inEle[i], { display: 'none', minHeight: eleWid + 'px' });
+                    setStyleAttribute(inEle[parseInt(i.toString(), 10)], { display: 'none', minHeight: eleWid + 'px' });
                 }
                 else {
-                    setStyleAttribute(inEle[i], { display: 'none', minWidth: eleWid + 'px' });
+                    setStyleAttribute(inEle[parseInt(i.toString(), 10)], { display: 'none', minWidth: eleWid + 'px' });
                 }
                 itemPopCount++;
             }
             if (this.isVertical) {
-                checkoffset = (inEle[i].offsetTop + inEle[i].offsetHeight + mrgn) > eleWidth;
+                checkoffset =
+                    (inEle[parseInt(i.toString(), 10)].offsetTop + inEle[parseInt(i.toString(), 10)].offsetHeight + mrgn) > eleWidth;
             }
             else {
-                checkoffset = (inEle[i].offsetLeft + inEle[i].offsetWidth + mrgn) > eleWidth;
+                checkoffset =
+                    (inEle[parseInt(i.toString(), 10)].offsetLeft + inEle[parseInt(i.toString(), 10)].offsetWidth + mrgn) > eleWidth;
             }
             if (checkoffset) {
-                if (inEle[i].classList.contains(CLS_SEPARATOR)) {
+                if (inEle[parseInt(i.toString(), 10)].classList.contains(CLS_SEPARATOR)) {
                     if (this.overflowMode === 'Extended') {
                         if (itemCount === itemPopCount) {
-                            const sepEle = inEle[i];
+                            const sepEle = inEle[parseInt(i.toString(), 10)];
                             if (checkClass(sepEle, [CLS_SEPARATOR, CLS_TBARIGNORE])) {
-                                inEle[i].classList.add(CLS_POPUP);
+                                inEle[parseInt(i.toString(), 10)].classList.add(CLS_POPUP);
                                 itemPopCount++;
                             }
                         }
@@ -4342,21 +4365,23 @@ let Toolbar = class Toolbar extends Component {
                 else {
                     itemCount++;
                 }
-                if (inEle[i].classList.contains(CLS_TBAROVERFLOW) && pre) {
-                    eleWidth -= ((this.isVertical ? inEle[i].offsetHeight : inEle[i].offsetWidth) + (mrgn));
+                if (inEle[parseInt(i.toString(), 10)].classList.contains(CLS_TBAROVERFLOW) && pre) {
+                    eleWidth -= ((this.isVertical ? inEle[parseInt(i.toString(), 10)].offsetHeight :
+                        inEle[parseInt(i.toString(), 10)].offsetWidth) + (mrgn));
                 }
-                else if (!checkClass(inEle[i], [CLS_SEPARATOR, CLS_TBARIGNORE])) {
-                    inEle[i].classList.add(CLS_POPUP);
+                else if (!checkClass(inEle[parseInt(i.toString(), 10)], [CLS_SEPARATOR, CLS_TBARIGNORE])) {
+                    inEle[parseInt(i.toString(), 10)].classList.add(CLS_POPUP);
                     if (this.isVertical) {
-                        setStyleAttribute(inEle[i], { display: 'none', minHeight: eleWid + 'px' });
+                        setStyleAttribute(inEle[parseInt(i.toString(), 10)], { display: 'none', minHeight: eleWid + 'px' });
                     }
                     else {
-                        setStyleAttribute(inEle[i], { display: 'none', minWidth: eleWid + 'px' });
+                        setStyleAttribute(inEle[parseInt(i.toString(), 10)], { display: 'none', minWidth: eleWid + 'px' });
                     }
                     itemPopCount++;
                 }
                 else {
-                    eleWidth -= ((this.isVertical ? inEle[i].offsetHeight : inEle[i].offsetWidth) + (mrgn));
+                    eleWidth -= ((this.isVertical ? inEle[parseInt(i.toString(), 10)].offsetHeight :
+                        inEle[parseInt(i.toString(), 10)].offsetWidth) + (mrgn));
                 }
             }
         }
@@ -4376,7 +4401,7 @@ let Toolbar = class Toolbar extends Component {
         const navItem = this.createElement('div', { className: CLS_POPUPDOWN + ' e-icons' });
         nav.appendChild(navItem);
         nav.setAttribute('tabindex', '0');
-        nav.setAttribute('role', 'list');
+        nav.setAttribute('role', 'button');
         element.appendChild(nav);
     }
     tbarPriRef(inEle, indx, sepPri, el, des, elWid, wid, ig) {
@@ -4449,7 +4474,6 @@ let Toolbar = class Toolbar extends Component {
             this.popObj.destroy();
             detach(this.popObj.element);
             this.popObj = null;
-            ele.setAttribute('aria-haspopup', 'false');
         }
     }
     ignoreEleFetch(index, innerEle) {
@@ -4528,7 +4552,7 @@ let Toolbar = class Toolbar extends Component {
                 }
                 index = this.tbarEle.indexOf(el);
                 if (this.tbarAlign) {
-                    const pos = this.items[index].align;
+                    const pos = this.items[parseInt(index.toString(), 10)].align;
                     index = this.tbarAlgEle[(pos + 's').toLowerCase()].indexOf(el);
                     eleSplice = this.tbarAlgEle[(pos + 's').toLowerCase()];
                     innerEle = this.element.querySelector('.' + CLS_ITEMS + ' .' + 'e-toolbar-' + pos.toLowerCase());
@@ -4715,12 +4739,12 @@ let Toolbar = class Toolbar extends Component {
         const key = Object.keys(attr);
         let keyVal;
         for (let i = 0; i < key.length; i++) {
-            keyVal = key[i];
+            keyVal = key[parseInt(i.toString(), 10)];
             if (keyVal === 'class') {
-                this.add(element, attr[keyVal]);
+                this.add(element, attr[`${keyVal}`]);
             }
             else {
-                element.setAttribute(keyVal, attr[keyVal]);
+                element.setAttribute(keyVal, attr[`${keyVal}`]);
             }
         }
     }
@@ -4751,14 +4775,14 @@ let Toolbar = class Toolbar extends Component {
         };
         if (!isNullOrUndefined(len) && len >= 1) {
             for (let a = 0, element = [].slice.call(elements); a < len; a++) {
-                const itemElement = element[a];
+                const itemElement = element[parseInt(a.toString(), 10)];
                 if (typeof (itemElement) === 'number') {
                     ele = this.getElementByIndex(itemElement);
                     if (isNullOrUndefined(ele)) {
                         return;
                     }
                     else {
-                        elements[a] = ele;
+                        elements[parseInt(a.toString(), 10)] = ele;
                     }
                 }
                 else {
@@ -4787,8 +4811,8 @@ let Toolbar = class Toolbar extends Component {
         }
     }
     getElementByIndex(index) {
-        if (this.tbarEle[index]) {
-            return this.tbarEle[index];
+        if (this.tbarEle[parseInt(index.toString(), 10)]) {
+            return this.tbarEle[parseInt(index.toString(), 10)];
         }
         return null;
     }
@@ -4833,14 +4857,14 @@ let Toolbar = class Toolbar extends Component {
                 if (!this.tbarAlign && itemAgn !== 'Left') {
                     this.tbarItemAlign(item, itemsDiv, 1);
                     this.tbarAlign = true;
-                    ele = closest(innerItems[0], '.' + CLS_ITEMS).children[algIndex];
+                    ele = closest(innerItems[0], '.' + CLS_ITEMS).children[parseInt(algIndex.toString(), 10)];
                     ele.appendChild(innerEle);
                     this.tbarAlgEle[(item.align + 's').toLowerCase()].push(innerEle);
                     this.refreshPositioning();
                 }
                 else if (this.tbarAlign) {
-                    ele = closest(innerItems[0], '.' + CLS_ITEMS).children[algIndex];
-                    ele.insertBefore(innerEle, ele.children[index]);
+                    ele = closest(innerItems[0], '.' + CLS_ITEMS).children[parseInt(algIndex.toString(), 10)];
+                    ele.insertBefore(innerEle, ele.children[parseInt(index.toString(), 10)]);
                     this.tbarAlgEle[(item.align + 's').toLowerCase()].splice(index, 0, innerEle);
                     this.refreshPositioning();
                 }
@@ -4849,7 +4873,7 @@ let Toolbar = class Toolbar extends Component {
                     innerItems[0].appendChild(innerEle);
                 }
                 else {
-                    innerItems[0].parentNode.insertBefore(innerEle, innerItems[index]);
+                    innerItems[0].parentNode.insertBefore(innerEle, innerItems[parseInt(index.toString(), 10)]);
                 }
                 this.items.splice(index, 0, item);
                 if (item.template) {
@@ -4898,20 +4922,20 @@ let Toolbar = class Toolbar extends Component {
         this.resize();
     }
     removeItemByIndex(index, innerItems) {
-        if (this.tbarEle[index] && innerItems[index]) {
-            const eleIdx = this.tbarEle.indexOf(innerItems[index]);
+        if (this.tbarEle[parseInt(index.toString(), 10)] && innerItems[parseInt(index.toString(), 10)]) {
+            const eleIdx = this.tbarEle.indexOf(innerItems[parseInt(index.toString(), 10)]);
             if (this.tbarAlign) {
-                const indexAgn = this.tbarAlgEle[(this.items[eleIdx].align + 's').toLowerCase()].indexOf(this.tbarEle[eleIdx]);
-                this.tbarAlgEle[(this.items[eleIdx].align + 's').toLowerCase()].splice(indexAgn, 1);
+                const indexAgn = this.tbarAlgEle[(this.items[parseInt(eleIdx.toString(), 10)].align + 's').toLowerCase()].indexOf(this.tbarEle[parseInt(eleIdx.toString(), 10)]);
+                this.tbarAlgEle[(this.items[parseInt(eleIdx.toString(), 10)].align + 's').toLowerCase()].splice(parseInt(indexAgn.toString(), 10), 1);
             }
             if (this.isReact) {
                 this.clearTemplate();
             }
-            const btnItem = innerItems[index].querySelector('.e-control.e-btn');
+            const btnItem = innerItems[parseInt(index.toString(), 10)].querySelector('.e-control.e-btn');
             if (!isNullOrUndefined(btnItem) && !isNullOrUndefined(btnItem.ej2_instances[0]) && !(btnItem.ej2_instances[0].isDestroyed)) {
                 btnItem.ej2_instances[0].destroy();
             }
-            detach(innerItems[index]);
+            detach(innerItems[parseInt(index.toString(), 10)]);
             this.items.splice(eleIdx, 1);
             this.tbarEle.splice(eleIdx, 1);
         }
@@ -5044,7 +5068,8 @@ let Toolbar = class Toolbar extends Component {
             switch (item.type) {
                 case 'Button':
                     dom = this.buttonRendering(item, innerEle);
-                    dom.setAttribute('tabindex', '-1');
+                    dom.setAttribute('tabindex', isNullOrUndefined(item.tabIndex) ? '-1' : item.tabIndex.toString());
+                    dom.setAttribute('data-tabindex', isNullOrUndefined(item.tabIndex) ? '-1' : item.tabIndex.toString());
                     dom.setAttribute('aria-label', (item.text || item.tooltipText));
                     innerEle.appendChild(dom);
                     innerEle.addEventListener('click', this.itemClick.bind(this));
@@ -5087,6 +5112,9 @@ let Toolbar = class Toolbar extends Component {
         }
         return innerEle;
     }
+    getDataTabindex(ele) {
+        return isNullOrUndefined(ele.getAttribute('data-tabindex')) ? '-1' : ele.getAttribute('data-tabindex');
+    }
     itemClick(e) {
         this.activeEleSwitch(e.currentTarget);
     }
@@ -5096,14 +5124,17 @@ let Toolbar = class Toolbar extends Component {
     }
     activeEleRemove(curEle) {
         if (!isNullOrUndefined(this.activeEle)) {
-            this.activeEle.setAttribute('tabindex', '-1');
+            this.activeEle.setAttribute('tabindex', this.getDataTabindex(this.activeEle));
         }
         this.activeEle = curEle;
-        if (isNullOrUndefined(this.trgtEle) && !curEle.parentElement.classList.contains(CLS_TEMPLATE)) {
-            curEle.removeAttribute('tabindex');
-        }
-        else {
-            this.activeEle.setAttribute('tabindex', '0');
+        if (this.getDataTabindex(this.activeEle) === '-1') {
+            if (isNullOrUndefined(this.trgtEle) && !curEle.parentElement.classList.contains(CLS_TEMPLATE)) {
+                this.updateTabIndex('-1');
+                curEle.removeAttribute('tabindex');
+            }
+            else {
+                this.activeEle.setAttribute('tabindex', this.getDataTabindex(this.activeEle));
+            }
         }
     }
     getPersistData() {
@@ -5185,6 +5216,26 @@ let Toolbar = class Toolbar extends Component {
             this.isExtendedOpen = sib.classList.contains(CLS_POPUPOPEN);
         }
     }
+    updateHideEleTabIndex(ele, isHidden, isElement, eleIndex, innerItems) {
+        if (isElement) {
+            eleIndex = innerItems.indexOf(ele);
+        }
+        let nextEle = innerItems[++eleIndex];
+        while (nextEle) {
+            const skipEle = this.eleContains(nextEle);
+            if (!skipEle) {
+                const dataTabIndex = nextEle.firstElementChild.getAttribute('data-tabindex');
+                if (isHidden && dataTabIndex === '-1') {
+                    nextEle.firstElementChild.setAttribute('tabindex', '0');
+                }
+                else if (dataTabIndex !== nextEle.firstElementChild.getAttribute('tabindex')) {
+                    nextEle.firstElementChild.setAttribute('tabindex', dataTabIndex);
+                }
+                break;
+            }
+            nextEle = innerItems[++eleIndex];
+        }
+    }
     /**
      * Gets called when the model property changes.The data that describes the old and new values of the property that changed.
      *
@@ -5203,9 +5254,9 @@ let Toolbar = class Toolbar extends Component {
                     if (!(newProp.items instanceof Array && oldProp.items instanceof Array)) {
                         const changedProb = Object.keys(newProp.items);
                         for (let i = 0; i < changedProb.length; i++) {
-                            const index = parseInt(Object.keys(newProp.items)[i], 10);
-                            const property = Object.keys(newProp.items[index])[0];
-                            const newProperty = Object(newProp.items[index])[property];
+                            const index = parseInt(Object.keys(newProp.items)[parseInt(i.toString(), 10)], 10);
+                            const property = Object.keys(newProp.items[parseInt(index.toString(), 10)])[0];
+                            const newProperty = Object(newProp.items[parseInt(index.toString(), 10)])[`${property}`];
                             if (typeof newProperty !== 'function') {
                                 if (this.tbarAlign || property === 'align') {
                                     this.refresh();
@@ -5214,7 +5265,7 @@ let Toolbar = class Toolbar extends Component {
                                 }
                                 const popupPriCheck = property === 'showAlwaysInPopup' && !newProperty;
                                 const booleanCheck = property === 'overflow' && this.popupPriCount !== 0;
-                                if ((popupPriCheck) || (this.items[index].showAlwaysInPopup) && booleanCheck) {
+                                if ((popupPriCheck) || (this.items[parseInt(index.toString(), 10)].showAlwaysInPopup) && booleanCheck) {
                                     --this.popupPriCount;
                                 }
                                 if (isNullOrUndefined(this.scrollModule)) {
@@ -5224,11 +5275,11 @@ let Toolbar = class Toolbar extends Component {
                                 if (this.isReact) {
                                     this.clearTemplate();
                                 }
-                                detach(itemCol[index]);
+                                detach(itemCol[parseInt(index.toString(), 10)]);
                                 this.tbarEle.splice(index, 1);
-                                this.addItems([this.items[index]], index);
+                                this.addItems([this.items[parseInt(index.toString(), 10)]], index);
                                 this.items.splice(index, 1);
-                                if (this.items[index].template) {
+                                if (this.items[parseInt(index.toString(), 10)].template) {
                                     this.tbarEle.splice(this.items.length, 1);
                                 }
                             }
@@ -5320,67 +5371,32 @@ let Toolbar = class Toolbar extends Component {
     hideItem(index, value) {
         const isElement = (typeof (index) === 'object') ? true : false;
         let eleIndex = index;
-        let initIndex;
         let ele;
+        if (!isElement && isNullOrUndefined(eleIndex)) {
+            return;
+        }
         const innerItems = [].slice.call(selectAll('.' + CLS_ITEM, this.element));
         if (isElement) {
             ele = index;
         }
-        else if (this.tbarEle[eleIndex]) {
+        else if (this.tbarEle[parseInt(eleIndex.toString(), 10)]) {
             const innerItems = [].slice.call(selectAll('.' + CLS_ITEM, this.element));
-            ele = innerItems[eleIndex];
+            ele = innerItems[parseInt(eleIndex.toString(), 10)];
         }
         if (ele) {
             if (value) {
                 ele.classList.add(CLS_HIDDEN);
-            }
-            else {
-                ele.classList.remove(CLS_HIDDEN);
-            }
-            if (value && isNullOrUndefined(this.element.getAttribute('tabindex')) && !ele.classList.contains(CLS_SEPARATOR)) {
-                if (isNullOrUndefined(ele.firstElementChild.getAttribute('tabindex'))) {
-                    ele.firstElementChild.setAttribute('tabindex', '-1');
-                    const innerItems = [].slice.call(selectAll('.' + CLS_ITEM, this.element));
-                    if (isElement) {
-                        eleIndex = innerItems.indexOf(ele);
-                    }
-                    let nextEle = innerItems[++eleIndex];
-                    while (nextEle) {
-                        const skipEle = this.eleContains(nextEle);
-                        if (!skipEle) {
-                            nextEle.firstElementChild.removeAttribute('tabindex');
-                            break;
-                        }
-                        nextEle = innerItems[++eleIndex];
+                if (!ele.classList.contains(CLS_SEPARATOR)) {
+                    if (isNullOrUndefined(ele.firstElementChild.getAttribute('tabindex')) ||
+                        ele.firstElementChild.getAttribute('tabindex') !== '-1') {
+                        this.updateHideEleTabIndex(ele, value, isElement, eleIndex, innerItems);
                     }
                 }
             }
-            else if (isNullOrUndefined(this.element.getAttribute('tabindex')) && !ele.classList.contains(CLS_SEPARATOR)) {
-                initIndex = 0;
-                let setFlag = false;
-                let removeFlag = false;
-                let initELe = innerItems[initIndex];
-                while (initELe) {
-                    if (!initELe.classList.contains(CLS_SEPARATOR)) {
-                        if (isNullOrUndefined(initELe.firstElementChild.getAttribute('tabindex'))) {
-                            initELe.firstElementChild.setAttribute('tabindex', '-1');
-                            setFlag = true;
-                        }
-                        else {
-                            if (setFlag && removeFlag) {
-                                break;
-                            }
-                            const skipEle = this.eleContains(initELe);
-                            if (!skipEle) {
-                                initELe.firstElementChild.removeAttribute('tabindex');
-                                removeFlag = true;
-                            }
-                            initELe = innerItems[++initIndex];
-                        }
-                    }
-                    else {
-                        initELe = innerItems[++initIndex];
-                    }
+            else {
+                ele.classList.remove(CLS_HIDDEN);
+                if (!ele.classList.contains(CLS_SEPARATOR)) {
+                    this.updateHideEleTabIndex(ele, value, isElement, eleIndex, innerItems);
                 }
             }
             this.refreshOverflow();
@@ -5744,7 +5760,7 @@ let Accordion = class Accordion extends Component {
         }
         else {
             for (let i = 0; i < len; i++) {
-                this.expandItem(true, this.initExpand[i]);
+                this.expandItem(true, this.initExpand[parseInt(i.toString(), 10)]);
             }
         }
         if (this.isReact) {
@@ -6103,14 +6119,15 @@ let Accordion = class Accordion extends Component {
             if (this.isReact) {
                 this.renderReactTemplates();
             }
-            append(this.getItemTemplate()(this.dataSource[index], this, 'itemTemplate', this.element.id + '_itemTemplate', false), ctn);
+            append(this.getItemTemplate()(this.dataSource[parseInt(index.toString(), 10)], this, 'itemTemplate', this.element.id + '_itemTemplate', false), ctn);
             itemcnt.appendChild(ctn);
         }
         else {
-            if (this.enableHtmlSanitizer && typeof (this.items[index].content)) {
-                this.items[index].content = SanitizeHtmlHelper.sanitize(this.items[index].content);
+            if (this.enableHtmlSanitizer && typeof (this.items[parseInt(index.toString(), 10)].content)) {
+                this.items[parseInt(index.toString(), 10)].content =
+                    SanitizeHtmlHelper.sanitize(this.items[parseInt(index.toString(), 10)].content);
             }
-            itemcnt.appendChild(this.fetchElement(ctn, this.items[index].content, index, false));
+            itemcnt.appendChild(this.fetchElement(ctn, this.items[parseInt(index.toString(), 10)].content, index, false));
         }
         return itemcnt;
     }
@@ -6352,7 +6369,7 @@ let Accordion = class Accordion extends Component {
                     ele.appendChild(innerItemEle);
                 }
                 else {
-                    ele.insertBefore(innerItemEle, itemEle[itemIndex]);
+                    ele.insertBefore(innerItemEle, itemEle[parseInt(itemIndex.toString(), 10)]);
                 }
                 EventHandler.add(innerItemEle.querySelector('.' + CLS_HEADER), 'focus', this.focusIn, this);
                 EventHandler.add(innerItemEle.querySelector('.' + CLS_HEADER), 'blur', this.focusOut, this);
@@ -6387,7 +6404,7 @@ let Accordion = class Accordion extends Component {
             this.clearTemplate(['headerTemplate', 'itemTemplate'], index);
         }
         const itemEle = this.getItemElements();
-        const ele = itemEle[index];
+        const ele = itemEle[parseInt(index.toString(), 10)];
         const items = this.getItems();
         if (isNullOrUndefined(ele)) {
             return;
@@ -6406,7 +6423,7 @@ let Accordion = class Accordion extends Component {
      */
     select(index) {
         const itemEle = this.getItemElements();
-        const ele = itemEle[index];
+        const ele = itemEle[parseInt(index.toString(), 10)];
         if (isNullOrUndefined(ele) || isNullOrUndefined(select('.' + CLS_HEADER, ele))) {
             return;
         }
@@ -6422,7 +6439,7 @@ let Accordion = class Accordion extends Component {
      */
     hideItem(index, isHidden) {
         const itemEle = this.getItemElements();
-        const ele = itemEle[index];
+        const ele = itemEle[parseInt(index.toString(), 10)];
         if (isNullOrUndefined(ele)) {
             return;
         }
@@ -6446,7 +6463,7 @@ let Accordion = class Accordion extends Component {
      */
     enableItem(index, isEnable) {
         const itemEle = this.getItemElements();
-        const ele = itemEle[index];
+        const ele = itemEle[parseInt(index.toString(), 10)];
         if (isNullOrUndefined(ele)) {
             return;
         }
@@ -6497,7 +6514,7 @@ let Accordion = class Accordion extends Component {
             }
         }
         else {
-            const ele = itemEle[index];
+            const ele = itemEle[parseInt(index.toString(), 10)];
             if (isNullOrUndefined(ele) || !ele.classList.contains(CLS_SLCT) || (ele.classList.contains(CLS_ACTIVE) && isExpand)) {
                 return;
             }
@@ -6547,7 +6564,7 @@ let Accordion = class Accordion extends Component {
             ctnElePos = this.element;
         }
         else {
-            ctnElePos = this.element.querySelectorAll('.' + CLS_ITEM$1)[index];
+            ctnElePos = this.element.querySelectorAll('.' + CLS_ITEM$1)[parseInt(index.toString(), 10)];
         }
         this.templateEle.forEach((eleStr) => {
             if (!isNullOrUndefined(ctnElePos.querySelector(eleStr))) {
@@ -6558,7 +6575,7 @@ let Accordion = class Accordion extends Component {
     updateItem(item, index) {
         if (!isNullOrUndefined(item)) {
             const items = this.getItems();
-            const itemObj = items[index];
+            const itemObj = items[parseInt(index.toString(), 10)];
             items.splice(index, 1);
             this.restoreContent(index);
             detach(item);
@@ -6602,11 +6619,11 @@ let Accordion = class Accordion extends Component {
                     if (!(newProp.items instanceof Array && oldProp.items instanceof Array)) {
                         const changedProp = Object.keys(newProp.items);
                         for (let j = 0; j < changedProp.length; j++) {
-                            const index = parseInt(Object.keys(newProp.items)[j], 10);
-                            const property = Object.keys(newProp.items[index])[0];
-                            const item = selectAll('.' + CLS_ITEM$1, this.element)[index];
-                            const oldVal = Object(oldProp.items[index])[property];
-                            const newVal = Object(newProp.items[index])[property];
+                            const index = parseInt(Object.keys(newProp.items)[parseInt(j.toString(), 10)], 10);
+                            const property = Object.keys(newProp.items[parseInt(index.toString(), 10)])[0];
+                            const item = selectAll('.' + CLS_ITEM$1, this.element)[parseInt(index.toString(), 10)];
+                            const oldVal = Object(oldProp.items[parseInt(index.toString(), 10)])[`${property}`];
+                            const newVal = Object(newProp.items[parseInt(index.toString(), 10)])[`${property}`];
                             const temp = property;
                             if (temp === 'header' || temp === 'iconCss' || temp === 'expanded' || ((temp === 'content') && (oldVal === ''))) {
                                 this.updateItem(item, index);
@@ -6620,7 +6637,7 @@ let Accordion = class Accordion extends Component {
                                 }
                             }
                             if (property === 'visible' && !isNullOrUndefined(item)) {
-                                if (Object(newProp.items[index])[property] === false) {
+                                if (Object(newProp.items[parseInt(index.toString(), 10)])[`${property}`] === false) {
                                     item.classList.add(CLS_ITEMHIDE);
                                 }
                                 else {
@@ -7068,8 +7085,8 @@ let Menu = class Menu extends MenuBase {
         let i;
         let items = this.items;
         const pIdField = this.getField('parentId');
-        if (item[pIdField]) {
-            idx = this.getIndex(item[pIdField].toString(), true);
+        if (item[`${pIdField}`]) {
+            idx = this.getIndex(item[`${pIdField}`].toString(), true);
             for (i = 0; i < idx.length; i++) {
                 if (!items[idx[i]].items) {
                     items[idx[i]].items = [];
@@ -7247,6 +7264,9 @@ __decorate$7([
 __decorate$7([
     Property()
 ], TabItem.prototype, "id", void 0);
+__decorate$7([
+    Property(-1)
+], TabItem.prototype, "tabIndex", void 0);
 /**
  * Tab is a content panel to show multiple contents in a single space, one at a time.
  * Each Tab item has an associated content, that will be displayed based on the active Tab header item.
@@ -7445,9 +7465,10 @@ let Tab = class Tab extends Component {
                 this.setContentHeight(true);
                 this.select(this.selectedItem);
             }
+            this.tbItem = selectAll('.' + CLS_TB_ITEM, this.hdrEle);
             if (!isNullOrUndefined(this.tbItem)) {
                 for (let i = 0; i < this.items.length; i++) {
-                    if (this.items[i]) {
+                    if (this.tbItem[i]) {
                         const tabID = this.items[i].id;
                         this.tbItem[i].setAttribute('data-id', tabID);
                     }
@@ -7548,7 +7569,7 @@ let Tab = class Tab extends Component {
         if (!this.isReplace && tbItems.length > 0) {
             const idList = [];
             tbItems.forEach((item) => {
-                idList.push(parseInt(item.id.slice(item.id.indexOf('_') + 1), 10));
+                idList.push(this.getIndexFromEle(item.id));
             });
             maxId = Math.max(...idList);
         }
@@ -7569,8 +7590,7 @@ let Tab = class Tab extends Component {
             }
             let itemIndex;
             if (this.isReplace && !isNullOrUndefined(this.tbId) && this.tbId !== '') {
-                const num = (this.tbId.indexOf('_'));
-                itemIndex = parseInt(this.tbId.substring(num + 1), 10);
+                itemIndex = parseInt(this.tbId.substring(this.tbId.lastIndexOf('_') + 1), 10);
                 this.tbId = '';
             }
             else {
@@ -7612,7 +7632,8 @@ let Tab = class Tab extends Component {
                     this.isIconAlone = true;
                 }
             }
-            const wrapAttrs = (item.disabled) ? {} : { tabIndex: '-1' };
+            const tabIndex = isNullOrUndefined(item.tabIndex) ? '-1' : item.tabIndex.toString();
+            const wrapAttrs = (item.disabled) ? {} : { tabIndex: tabIndex, 'data-tabindex': tabIndex };
             tCont.appendChild(this.btnCls.cloneNode(true));
             const wrap = this.createElement('div', { className: CLS_WRAP, attrs: wrapAttrs });
             wrap.appendChild(tCont);
@@ -8054,14 +8075,14 @@ let Tab = class Tab extends Component {
             }
             else {
                 if (!this.isVertical()) {
-                    setStyleAttribute(this.cntEle, { 'height': (this.element.offsetHeight - hdrEle.offsetHeight) + 'px' });
+                    setStyleAttribute(this.cntEle, { 'height': (this.element.clientHeight - hdrEle.offsetHeight) + 'px' });
                 }
             }
         }
         else if (this.heightAdjustMode === 'Fill') {
             addClass([this.element], [CLS_FILL]);
             setStyleAttribute(this.element, { 'height': '100%' });
-            setStyleAttribute(this.cntEle, { 'height': (this.element.offsetHeight - hdrEle.offsetHeight) + 'px' });
+            this.cntEle.style.height = 'calc(100% - ' + this.hdrEle.offsetHeight + 'px)';
         }
         else if (this.heightAdjustMode === 'Auto') {
             if (this.isTemplate === true) {
@@ -8398,12 +8419,14 @@ let Tab = class Tab extends Component {
             case 'shiftTab':
                 if (trg.classList.contains(CLS_WRAP)
                     && closest(trg, '.' + CLS_TB_ITEM).classList.contains(CLS_ACTIVE$1) === false) {
-                    trg.setAttribute('tabindex', '-1');
+                    trg.setAttribute('tabindex', trg.getAttribute('data-tabindex'));
                 }
                 if (this.popObj && isVisible(this.popObj.element)) {
                     this.popObj.hide(this.hide);
                 }
-                actEle.children.item(0).setAttribute('tabindex', '0');
+                if (!isNullOrUndefined(actEle) && actEle.children.item(0).getAttribute('tabindex') === '-1') {
+                    actEle.children.item(0).setAttribute('tabindex', '0');
+                }
                 break;
             case 'moveLeft':
             case 'moveRight':
@@ -8453,6 +8476,9 @@ let Tab = class Tab extends Component {
             return;
         }
     }
+    getIndexFromEle(id) {
+        return parseInt(id.substring(id.lastIndexOf('_') + 1), 10);
+    }
     hoverHandler(e) {
         const trg = e.target;
         if (!isNullOrUndefined(trg.classList) && trg.classList.contains(CLS_ICON_CLOSE)) {
@@ -8471,8 +8497,7 @@ let Tab = class Tab extends Component {
                     const hdr = this.element.querySelectorAll('.' + CLS_TB_ITEM)[index];
                     let itemIndex;
                     if (hdr && !isNullOrUndefined(hdr.id) && hdr.id !== '') {
-                        const num = (hdr.id.lastIndexOf('_'));
-                        itemIndex = parseInt(hdr.id.substring(num + 1), 10);
+                        itemIndex = this.getIndexFromEle(hdr.id);
                     }
                     else {
                         itemIndex = index;
@@ -8787,7 +8812,7 @@ let Tab = class Tab extends Component {
         }
         if (value === true) {
             tbItems.classList.remove(CLS_DISABLE$4, CLS_OVERLAY$2);
-            tbItems.firstElementChild.setAttribute('tabindex', '-1');
+            tbItems.firstElementChild.setAttribute('tabindex', tbItems.firstElementChild.getAttribute('data-tabindex'));
         }
         else {
             tbItems.classList.add(CLS_DISABLE$4, CLS_OVERLAY$2);
@@ -9042,7 +9067,7 @@ let Tab = class Tab extends Component {
             this.selectingID = this.extIndex(trg.id);
         }
         if (!isNullOrUndefined(this.prevItem) && !this.prevItem.classList.contains(CLS_DISABLE$4)) {
-            this.prevItem.children.item(0).setAttribute('tabindex', '-1');
+            this.prevItem.children.item(0).setAttribute('tabindex', this.prevItem.firstElementChild.getAttribute('tabindex'));
         }
         const eventArg = {
             event: event,
@@ -9288,7 +9313,8 @@ let Tab = class Tab extends Component {
                         this.isIconAlone = true;
                     }
                 }
-                const wrapAtt = (item.disabled) ? {} : { tabIndex: '-1' };
+                const tabIndex = isNullOrUndefined(item.tabIndex) ? '-1' : item.tabIndex.toString();
+                const wrapAtt = (item.disabled) ? {} : { tabIndex: tabIndex, 'data-tabindex': tabIndex };
                 tConts.appendChild(this.btnCls.cloneNode(true));
                 const wraper = this.createElement('div', { className: CLS_WRAP, attrs: wrapAtt });
                 wraper.appendChild(tConts);
@@ -9332,9 +9358,7 @@ let Tab = class Tab extends Component {
         else {
             const tabItems = this.element.querySelector('.' + CLS_TB_ITEMS);
             const element = this.element.querySelector('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE$1);
-            const id = element.id;
-            const num = (id.indexOf('_'));
-            const index = parseInt(id.substring(num + 1), 10);
+            const index = this.getIndexFromEle(element.id);
             const header = element.innerText;
             const detachContent = this.element.querySelector('.' + CLS_CONTENT$1).querySelector('.' + CLS_ACTIVE$1).children[0];
             const mainContents = detachContent.innerHTML;
@@ -9353,7 +9377,10 @@ let Tab = class Tab extends Component {
             const conte = this.createElement('div', {
                 className: CLS_TEXT_WRAP, innerHTML: txtString + this.btnCls.outerHTML
             }).outerHTML;
-            const wrap = this.createElement('div', { className: CLS_WRAP, innerHTML: conte, attrs: { tabIndex: '-1' } });
+            const tabIndex = element.firstElementChild.getAttribute('data-tabindex');
+            const wrap = this.createElement('div', {
+                className: CLS_WRAP, innerHTML: conte, attrs: { tabIndex: tabIndex, 'data-tabindex': tabIndex }
+            });
             tabItems.insertBefore(this.createElement('div', attr), tabItems.children[index + 1]);
             this.element.querySelector('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE$1).appendChild(wrap);
             const crElem = this.createElement('div', { innerHTML: mainContents });
@@ -9525,6 +9552,7 @@ const SMALL = 'e-small';
 const CHILD = 'e-has-child';
 const ITEM_ANIMATION_ACTIVE = 'e-animation-active';
 const DISABLED$1 = 'e-disabled';
+const PREVENTSELECT = 'e-prevent';
 const treeAriaAttr = {
     treeRole: 'group',
     itemRole: 'treeitem',
@@ -9570,6 +9598,9 @@ __decorate$8([
 __decorate$8([
     Property(null)
 ], FieldsSettings.prototype, "query", void 0);
+__decorate$8([
+    Property('selectable')
+], FieldsSettings.prototype, "selectable", void 0);
 __decorate$8([
     Property('selected')
 ], FieldsSettings.prototype, "selected", void 0);
@@ -9614,11 +9645,11 @@ __decorate$8([
  * The TreeView component is used to represent hierarchical data in a tree like structure with advanced
  * functions to perform edit, drag and drop, selection with check-box, and more.
  * ```html
- *  <div id="tree"></div>
+ * <div id="tree"></div>
  * ```
  * ```typescript
- *  let treeObj: TreeView = new TreeView();
- *  treeObj.appendTo('#tree');
+ * let treeObj: TreeView = new TreeView();
+ * treeObj.appendTo('#tree');
  * ```
  */
 let TreeView = TreeView_1 = class TreeView extends Component {
@@ -9636,7 +9667,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         this.changeDataSource = false;
         this.hasTemplate = false;
         this.isFirstRender = false;
-        // Specifies whether the node is dropped or not 
+        // Specifies whether the node is dropped or not
         this.isNodeDropped = false;
         this.mouseDownStatus = false;
     }
@@ -9685,7 +9716,9 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             csEnter: 'ctrl+shift+enter',
             csHome: 'ctrl+shift+home',
             csEnd: 'ctrl+shift+end',
-            space: 'space'
+            space: 'space',
+            shiftSpace: 'shift+space',
+            ctrlSpace: 'ctrl+space'
         };
         this.listBaseOption = {
             expandCollapse: true,
@@ -10205,6 +10238,10 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         };
         if (!this.isRefreshed) {
             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');
+            }
         }
     }
     frameMouseHandler(e) {
@@ -10893,7 +10930,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         else {
             let classList$$1 = target.classList;
             let li = closest(target, '.' + LISTITEM);
-            if (!li) {
+            if (!li || (li.classList.contains(PREVENTSELECT) && !(classList$$1.contains(EXPANDABLE) || classList$$1.contains(COLLAPSIBLE)))) {
                 return;
             }
             else if (event.originalEvent.which !== 3) {
@@ -11360,7 +11397,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         if (this.isLoaded) {
             eventArgs = this.getSelectEvent(li, 'select', e);
             this.trigger('nodeSelecting', eventArgs, (observedArgs) => {
-                if (!observedArgs.cancel) {
+                if (!observedArgs.cancel && !observedArgs.node.classList.contains(PREVENTSELECT)) {
                     this.nodeSelectAction(li, e, observedArgs, multiSelect);
                 }
             });
@@ -11574,6 +11611,9 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                         if (this.showCheckBox) {
                             this.checkNode(e);
                         }
+                        else {
+                            this.toggleSelect(focusedNode, e);
+                        }
                         break;
                     case 'moveRight':
                         this.openNode(this.enableRtl ? false : true, e);
@@ -11613,6 +11653,8 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                     case 'ctrlEnter':
                     case 'shiftEnter':
                     case 'csEnter':
+                    case 'shiftSpace':
+                    case 'ctrlSpace':
                         this.toggleSelect(focusedNode, e);
                         break;
                     case 'f2':
@@ -12005,7 +12047,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
     }
     setFocus(preNode, nextNode) {
         removeClass([preNode], [HOVER, FOCUS]);
-        if (!nextNode.classList.contains('e-disable')) {
+        if (!nextNode.classList.contains('e-disable') && !nextNode.classList.contains(PREVENTSELECT)) {
             addClass([nextNode], [HOVER, FOCUS]);
             this.updateIdAttr(preNode, nextNode);
         }
@@ -12042,7 +12084,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         }
     }
     setHover(li) {
-        if (!li.classList.contains(HOVER)) {
+        if (!li.classList.contains(HOVER) && !li.classList.contains(PREVENTSELECT)) {
             this.removeHover();
             addClass([li], HOVER);
         }
@@ -12066,6 +12108,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             let pNode = closest(currLi.parentNode, '.' + LISTITEM);
             let pid = pNode ? pNode.getAttribute('data-uid') : null;
             let selected = currLi.classList.contains(ACTIVE);
+            let selectable = currLi.classList.contains(PREVENTSELECT) ? false : true;
             let expanded = (currLi.getAttribute('aria-expanded') === 'true') ? true : false;
             let hasChildren = currLi.getAttribute('aria-expanded') !== null ? true : (select('.' + EXPANDABLE, currLi) || select('.' + COLLAPSIBLE, currLi)) != null ? true : false;
             let checked = null;
@@ -12074,7 +12117,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                 checked = checkboxElement.getAttribute('aria-checked');
             }
             return {
-                id: id, text: text, parentID: pid, selected: selected, expanded: expanded,
+                id: id, text: text, parentID: pid, selected: selected, selectable: selectable, expanded: expanded,
                 isChecked: checked, hasChildren: hasChildren
             };
         }
@@ -13097,7 +13140,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             dropUl = dropEle;
         }
         refNode = dropUl.childNodes[index];
-        if (!this.isFirstRender || (this.dataType === 1)) {
+        if (!this.isFirstRender || this.dataType === 1) {
             if (refNode || this.sortOrder === 'None') {
                 for (let i = 0; i < li.length; i++) {
                     dropUl.insertBefore(li[i], refNode);
@@ -14024,8 +14067,8 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         }
     }
     /**
-     * Instead of clicking on the TreeView node for editing, we can enable it by using
-     * `beginEdit` property. On passing the node ID or element through this property, the edit textBox
+     * Editing can also be enabled by using the `beginEdit` property, instead of clicking on the
+     * TreeView node. On passing the node ID or element through this property, the edit textBox
      * will be created for the particular node thus allowing us to edit it.
      * @param  {string | Element} node - Specifies ID of TreeView node/TreeView node.
      */
@@ -14136,7 +14179,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         return disabledNodes;
     }
     /**
-     * Get the node's data such as id, text, parentID, selected, isChecked, and expanded by passing the node element or it's ID.
+     * Gets the node's data such as id, text, parentID, selected, isChecked, and expanded by passing the node element or it's ID.
      * @param  {string | Element} node - Specifies ID of TreeView node/TreeView node.
      */
     getNode(node) {
@@ -14500,7 +14543,6 @@ const CLOSE = 'e-close';
 const OPEN = 'e-open';
 const TRASITION = 'e-transition';
 const DEFAULTBACKDROP = 'e-sidebar-overlay';
-const CONTEXTBACKDROP = 'e-backdrop';
 const RTL$2 = 'e-rtl';
 const RIGHT = 'e-right';
 const LEFT = 'e-left';
@@ -14671,7 +14713,7 @@ let Sidebar = class Sidebar extends Component {
     destroyBackDrop() {
         const sibling = document.querySelector('.e-main-content') || this.targetEle;
         if (this.target && this.showBackdrop && sibling) {
-            removeClass([sibling], CONTEXTBACKDROP);
+            removeClass([this.defaultBackdropDiv], DEFAULTBACKDROP);
         }
         else if (this.showBackdrop && this.modal) {
             this.modal.style.display = 'none';
@@ -14807,8 +14849,12 @@ let Sidebar = class Sidebar extends Component {
     }
     createBackDrop() {
         if (this.target && this.showBackdrop && this.getState()) {
+            const targetString = this.target;
             const sibling = document.querySelector('.e-main-content') || this.targetEle;
-            addClass([sibling], CONTEXTBACKDROP);
+            this.defaultBackdropDiv = this.createElement('div');
+            addClass([this.defaultBackdropDiv], DEFAULTBACKDROP);
+            setStyleAttribute(this.defaultBackdropDiv, { height: targetString.style.height });
+            sibling.appendChild(this.defaultBackdropDiv);
         }
         else if (this.showBackdrop && !this.modal && this.getState()) {
             this.modal = this.createElement('div');
@@ -15398,11 +15444,13 @@ let Breadcrumb = class Breadcrumb extends Component {
                     }
                     if (args.curData.isEmptyUrl) {
                         args.item.children[0].removeAttribute('href');
-                        if ((!isLastItem || (isLastItem && this.enableActiveItemNavigation)) && !(eventArgs.item.disabled || this.disabled)) {
+                        if ((!isLastItem || (isLastItem && this.enableActiveItemNavigation)) && !(eventArgs.item.disabled
+                            || this.disabled)) {
                             args.item.children[0].setAttribute(TABINDEX, '0');
                             EventHandler.add(args.item.children[0], 'keydown', this.keyDownHandler, this);
                         }
                     }
+                    args.item.removeAttribute('role');
                     if (isLastItem) {
                         args.item.setAttribute('data-active-item', '');
                     }
@@ -15412,7 +15460,8 @@ let Breadcrumb = class Breadcrumb extends Component {
                 }
             };
             for (let i = 0; i < len; i % 2 && j++, i++) {
-                isActiveItem = (this.activeItem && (this.activeItem === items[j].url || this.activeItem === items[j].text));
+                isActiveItem = (this.activeItem && (this.activeItem === items[j].url ||
+                    this.activeItem === items[j].text));
                 if (isCollasped && i > 1 && i < len - 2) {
                     continue;
                 }
@@ -15438,7 +15487,8 @@ let Breadcrumb = class Breadcrumb extends Component {
                     else {
                         isSingleLevel = true;
                     }
-                    item = [extend({}, items[j].properties ? items[j].properties
+                    item = [extend({}, items[j].properties ?
+                            items[j].properties
                             : items[j])];
                     if (!item[0].url && !this.itemTemplate) {
                         item = [extend({}, item[0], { isEmptyUrl: true, url: '#' })];
@@ -15526,7 +15576,8 @@ let Breadcrumb = class Breadcrumb extends Component {
             for (let i = 0; i < liElems.length - 2; i++) {
                 if (liWidth > width) {
                     maxItems = Math.ceil((i - 1) / 2) + ((this.overflowMode === 'Menu' && i <= 2) ? 0 : 1);
-                    if (((this.maxItems > maxItems && !(this.maxItems > -1 && maxItems == -1)) || this.maxItems == -1) && this._maxItems != maxItems) {
+                    if (((this.maxItems > maxItems && !(this.maxItems > -1 && maxItems === -1)) ||
+                        this.maxItems === -1) && this._maxItems !== maxItems) {
                         this._maxItems = maxItems;
                         this.initPvtProps();
                         return this.reRenderItems();
@@ -15569,7 +15620,7 @@ let Breadcrumb = class Breadcrumb extends Component {
     }
     hasField(items, field) {
         for (let i = 0, len = items.length; i < len; i++) {
-            if (items[i][field]) {
+            if (items[i][`${field}`]) {
                 return true;
             }
         }
@@ -15833,8 +15884,8 @@ let Breadcrumb = class Breadcrumb extends Component {
      * @returns {void}
      */
     destroy() {
-        let classes = [];
-        let attributes$$1 = ['aria-label'];
+        const classes = [];
+        const attributes$$1 = ['aria-label'];
         if (this.cssClass) {
             classes.concat(this.cssClass.split(' '));
         }
@@ -16441,15 +16492,15 @@ let Carousel = class Carousel extends Component {
         if (isNullOrUndefined(activeSlide) && this.showIndicators) {
             const activeIndicator = this.element.querySelector(`.${CLS_INDICATOR_BAR}.${CLS_ACTIVE$2}`);
             const activeIndex = parseInt(activeIndicator.dataset.index, 10);
-            addClass([allSlides[activeIndex]], CLS_ACTIVE$2);
+            addClass([allSlides[parseInt(activeIndex.toString(), 10)]], CLS_ACTIVE$2);
             return;
         }
         else if (isNullOrUndefined(activeSlide)) {
-            addClass([allSlides[currentIndex]], CLS_ACTIVE$2);
+            addClass([allSlides[parseInt(currentIndex.toString(), 10)]], CLS_ACTIVE$2);
             return;
         }
         const activeIndex = parseInt(activeSlide.dataset.index, 10);
-        const currentSlide = allSlides[currentIndex];
+        const currentSlide = allSlides[parseInt(currentIndex.toString(), 10)];
         const eventArgs = {
             currentIndex: activeIndex,
             nextIndex: currentIndex,
@@ -16468,10 +16519,10 @@ let Carousel = class Carousel extends Component {
             attributes(args.nextSlide, { 'aria-hidden': 'false' });
             const slideIndicators = [].slice.call(this.element.querySelectorAll(`.${CLS_INDICATOR_BAR}`));
             if (slideIndicators.length > 0) {
-                attributes(slideIndicators[activeIndex], { 'aria-current': 'false' });
-                attributes(slideIndicators[currentIndex], { 'aria-current': 'true' });
+                attributes(slideIndicators[parseInt(activeIndex.toString(), 10)], { 'aria-current': 'false' });
+                attributes(slideIndicators[parseInt(currentIndex.toString(), 10)], { 'aria-current': 'true' });
                 removeClass(slideIndicators, CLS_ACTIVE$2);
-                addClass([slideIndicators[currentIndex]], CLS_ACTIVE$2);
+                addClass([slideIndicators[parseInt(currentIndex.toString(), 10)]], CLS_ACTIVE$2);
             }
             this.slideChangedEventArgs = {
                 currentIndex: args.nextIndex,
@@ -16483,7 +16534,7 @@ let Carousel = class Carousel extends Component {
             };
             if (this.partialVisible) {
                 const container = this.element.querySelector('.' + CLS_ITEMS$2);
-                const slideWidth = allSlides[currentIndex].clientWidth;
+                const slideWidth = allSlides[parseInt(currentIndex.toString(), 10)].clientWidth;
                 container.style.transitionProperty = 'transform';
                 if (this.loop) {
                     if (this.slideChangedEventArgs.currentIndex === 0 && this.slideChangedEventArgs.slideDirection === 'Next') {
@@ -16555,10 +16606,10 @@ let Carousel = class Carousel extends Component {
         const keys = Object.keys(attribute);
         for (const key of keys) {
             if (key === 'class') {
-                addClass([element], attribute[key]);
+                addClass([element], attribute[`${key}`]);
             }
             else {
-                element.setAttribute(key, attribute[key]);
+                element.setAttribute(key, attribute[`${key}`]);
             }
         }
     }
@@ -16672,7 +16723,7 @@ let Carousel = class Carousel extends Component {
         }
     }
     swipeHandler(e) {
-        if (this.element.classList.contains(CLS_HOVER)) {
+        if (this.element.classList.contains(CLS_HOVER) || isNullOrUndefined(this.slideItems) || this.slideItems.length <= 1) {
             return;
         }
         const direction = (e.swipeDirection === 'Right') ? 'Previous' : 'Next';
@@ -17076,7 +17127,7 @@ let AppBar = class AppBar extends Component {
                             const keys = Object.keys(oldProp.htmlAttributes);
                             for (const key of keys) {
                                 if (key === 'class') {
-                                    removeClass([this.element], oldProp.htmlAttributes[key]);
+                                    removeClass([this.element], oldProp.htmlAttributes[`${key}`]);
                                 }
                                 else {
                                     this.element.removeAttribute(key);
@@ -17105,10 +17156,10 @@ let AppBar = class AppBar extends Component {
         const keys = Object.keys(attribute);
         for (const key of keys) {
             if (key === 'class') {
-                addClass([element], attribute[key]);
+                addClass([element], attribute[`${key}`]);
             }
             else {
-                element.setAttribute(key, attribute[key]);
+                element.setAttribute(key, attribute[`${key}`]);
             }
         }
     }