@syncfusion/ej2-navigations 20.3.60 → 20.4.40

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

@@ -1273,6 +1273,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
         this.wireEvents();
         this.renderComplete();
         var wrapper = this.getWrapper();
+        // eslint-disable-next-line
         if (this.template && this.enableScrolling && (this.isReact || this.isAngular)) {
             requestAnimationFrame(function () {
                 addScrolling(_this.createElement, wrapper, _this.element, 'hscroll', _this.enableRtl);
@@ -1490,6 +1491,14 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
                 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;
+                    }
+                }
             }
         }
         var cli = cul.children[fliIdx];
@@ -1659,6 +1668,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
                         _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_1 && trgtpopUp.querySelector('[id="' + liElem_1.id + '"]'));
@@ -1667,7 +1677,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
                     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') {
                         var ele = (e && e.target.classList.contains('e-vscroll'))
                             ? closest(e.target, '.e-menu-wrapper') : null;
                         if (ele) {
@@ -1708,7 +1718,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
                             if (sli_1) {
                                 sli_1.setAttribute('aria-expanded', 'false');
                                 sli_1.classList.remove(SELECTED);
-                                if (observedCloseArgs.isFocused && liElem_1 || _this.keyType === "left") {
+                                if (observedCloseArgs.isFocused && liElem_1 || _this.keyType === 'left') {
                                     sli_1.classList.add(FOCUSED);
                                     sli_1.focus();
                                 }
@@ -1981,6 +1991,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
                                 _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(function () {
                                 _this.collision();
@@ -2212,7 +2223,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
             itemCreated: function (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)]) {
@@ -2224,9 +2235,6 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
                     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) {
@@ -2238,6 +2246,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
                     if (args.item.classList.contains('e-has-child')) {
                         args.item.classList.remove('e-has-child');
                     }
+                    args.item.removeAttribute('aria-level');
                 }
                 var eventArgs = { item: args.curData, element: args.item };
                 _this.trigger('beforeItemRender', eventArgs);
@@ -2249,9 +2258,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
         }
         var 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;
     };
     MenuBase.prototype.moverHandler = function (e) {
@@ -2337,7 +2344,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
     };
     MenuBase.prototype.getField = function (propName, level) {
         if (level === void 0) { level = 0; }
-        var fieldName = this.fields[propName];
+        var fieldName = this.fields["" + propName];
         return typeof fieldName === 'string' ? fieldName :
             (!fieldName[level] ? fieldName[fieldName.length - 1].toString()
                 : fieldName[level].toString());
@@ -2355,7 +2362,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
     };
     MenuBase.prototype.hasField = function (items, field) {
         for (var i = 0, len = items.length; i < len; i++) {
-            if (items[i][field]) {
+            if (items[i]["" + field]) {
                 return true;
             }
         }
@@ -2896,7 +2903,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
             else {
                 var 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();
                         }
@@ -3433,6 +3440,9 @@ var Item = /** @__PURE__ @class */ (function (_super) {
     __decorate$3([
         Event()
     ], Item.prototype, "click", void 0);
+    __decorate$3([
+        Property(-1)
+    ], Item.prototype, "tabIndex", void 0);
     return Item;
 }(ChildProperty));
 /**
@@ -3518,7 +3528,7 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
             removeClass([this.element], this.cssClass.split(' '));
         }
         this.element.removeAttribute('style');
-        ['aria-disabled', 'aria-orientation', 'aria-haspopup', 'role'].forEach(function (attrb) {
+        ['aria-disabled', 'aria-orientation', 'role'].forEach(function (attrb) {
             return _this.element.removeAttribute(attrb);
         });
         _super.prototype.destroy.call(this);
@@ -3558,7 +3568,16 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
             keyConfigs: this.keyConfigs
         });
         EventHandler.add(this.element, 'keydown', this.docKeyDown, this);
-        this.element.setAttribute('tabIndex', '0');
+        this.updateTabIndex('0');
+    };
+    Toolbar.prototype.updateTabIndex = function (tabIndex) {
+        var ele = this.element.querySelector('.' + CLS_ITEM + ':not(.' + CLS_DISABLE$2 + ' ):not(.' + CLS_SEPARATOR + ' ):not(.' + CLS_HIDDEN + ' )');
+        if (!isNullOrUndefined(ele) && !isNullOrUndefined(ele.firstElementChild)) {
+            var dataTabIndex = ele.firstElementChild.getAttribute('data-tabindex');
+            if (dataTabIndex && dataTabIndex === '-1' && ele.firstElementChild.tagName !== 'INPUT') {
+                ele.firstElementChild.setAttribute('tabindex', tabIndex);
+            }
+        }
     };
     Toolbar.prototype.unwireKeyboardEvent = function () {
         if (this.keyModule) {
@@ -3762,7 +3781,6 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
                             this.activeEleRemove(ele_1);
                             ele_1.focus();
                         }
-                        this.element.removeAttribute('tabindex');
                     }
                 }
                 break;
@@ -3813,9 +3831,8 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
         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);
@@ -3952,7 +3969,7 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
         }
         setStyleAttribute(this.element, { 'width': width });
         var ariaAttr = {
-            'role': 'toolbar', 'aria-disabled': 'false', 'aria-haspopup': 'false',
+            'role': 'toolbar', 'aria-disabled': 'false',
             'aria-orientation': !this.isVertical ? 'horizontal' : 'vertical'
         };
         attributes(this.element, ariaAttr);
@@ -3984,17 +4001,17 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
             this.tbarEle = [];
         }
         for (var 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);
             }
@@ -4004,7 +4021,7 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
         }
         if (this.isReact) {
             var portals = 'portals';
-            this.notify('render-react-toolbar-template', this[portals]);
+            this.notify('render-react-toolbar-template', this["" + portals]);
             this.renderReactTemplates();
         }
     };
@@ -4161,8 +4178,11 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
     };
     Toolbar.prototype.setOverflowAttributes = function (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');
+        var ariaAttr = {
+            'tabindex': '0', 'role': 'button', 'aria-haspopup': 'true',
+            'aria-label': 'overflow'
+        };
+        attributes(this.element.querySelector('.' + CLS_TBARNAV), ariaAttr);
     };
     Toolbar.prototype.separator = function () {
         var element = this.element;
@@ -4179,12 +4199,12 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
             }
         }
         for (var 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);
                 }
             }
         }
@@ -4217,7 +4237,7 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
             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 {
@@ -4255,7 +4275,7 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
         });
         var tbarEle = selectAll('.' + CLS_ITEM, element.querySelector('.' + CLS_ITEMS));
         for (var i = tbarEle.length - 1; i >= 0; i--) {
-            var tbarElement = tbarEle[i];
+            var tbarElement = tbarEle[parseInt(i.toString(), 10)];
             if (tbarElement.classList.contains(CLS_SEPARATOR) && this.overflowMode !== 'Extended') {
                 setStyleAttribute(tbarElement, { display: 'none' });
             }
@@ -4310,11 +4330,11 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
                 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';
@@ -4331,7 +4351,6 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
                 popup.hide();
             }
             this.popObj = popup;
-            this.element.setAttribute('aria-haspopup', 'true');
         }
         else {
             var popupEle = this.popObj.element;
@@ -4359,6 +4378,7 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
         var popupEle = this.popObj.element;
         var toolEle = this.popObj.element.parentElement;
         var 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') {
@@ -4374,7 +4394,7 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
             var overflowHeight = (popupEle.offsetHeight - ((popupElePos - window.innerHeight - scrollVal) + 5));
             popObj.height = overflowHeight + 'px';
             for (var i = 0; i <= popupEle.childElementCount; i++) {
-                var ele = popupEle.children[i];
+                var ele = popupEle.children[parseInt(i.toString(), 10)];
                 if (ele.offsetTop + ele.offsetHeight > overflowHeight) {
                     overflowHeight = ele.offsetTop;
                     break;
@@ -4399,6 +4419,7 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
     Toolbar.prototype.popupClose = function (e) {
         var element = this.element;
         var popupNav = element.querySelector('.' + CLS_TBARNAV);
+        popupNav.setAttribute('aria-expanded', 'false');
         var popIcon = popupNav.firstElementChild;
         popupNav.classList.remove(CLS_TBARNAVACT);
         classList(popIcon, [CLS_POPUPDOWN], [CLS_POPUPICON]);
@@ -4424,7 +4445,7 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
         };
         for (var i = len - 1; i >= 0; i--) {
             var mrgn = void 0;
-            var compuStyle = window.getComputedStyle(inEle[i]);
+            var compuStyle = window.getComputedStyle(inEle[parseInt(i.toString(), 10)]);
             if (this.isVertical) {
                 mrgn = parseFloat((compuStyle).marginTop);
                 mrgn += parseFloat((compuStyle).marginBottom);
@@ -4433,35 +4454,37 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
                 mrgn = parseFloat((compuStyle).marginRight);
                 mrgn += parseFloat((compuStyle).marginLeft);
             }
-            var fstEleCheck = inEle[i] === this.tbarEle[0];
+            var 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;
             var eleWid_1 = 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_1 + 'px' });
+                    setStyleAttribute(inEle[parseInt(i.toString(), 10)], { display: 'none', minHeight: eleWid_1 + 'px' });
                 }
                 else {
-                    setStyleAttribute(inEle[i], { display: 'none', minWidth: eleWid_1 + 'px' });
+                    setStyleAttribute(inEle[parseInt(i.toString(), 10)], { display: 'none', minWidth: eleWid_1 + '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) {
-                            var sepEle = inEle[i];
+                            var 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++;
                             }
                         }
@@ -4482,21 +4505,23 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
                 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_1 + 'px' });
+                        setStyleAttribute(inEle[parseInt(i.toString(), 10)], { display: 'none', minHeight: eleWid_1 + 'px' });
                     }
                     else {
-                        setStyleAttribute(inEle[i], { display: 'none', minWidth: eleWid_1 + 'px' });
+                        setStyleAttribute(inEle[parseInt(i.toString(), 10)], { display: 'none', minWidth: eleWid_1 + '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));
                 }
             }
         }
@@ -4516,7 +4541,7 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
         var 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);
     };
     Toolbar.prototype.tbarPriRef = function (inEle, indx, sepPri, el, des, elWid, wid, ig) {
@@ -4590,7 +4615,6 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
             this.popObj.destroy();
             detach(this.popObj.element);
             this.popObj = null;
-            ele.setAttribute('aria-haspopup', 'false');
         }
     };
     Toolbar.prototype.ignoreEleFetch = function (index, innerEle) {
@@ -4669,7 +4693,7 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
                 }
                 index = this_1.tbarEle.indexOf(el);
                 if (this_1.tbarAlign) {
-                    var pos = this_1.items[index].align;
+                    var pos = this_1.items[parseInt(index.toString(), 10)].align;
                     index = this_1.tbarAlgEle[(pos + 's').toLowerCase()].indexOf(el);
                     eleSplice = this_1.tbarAlgEle[(pos + 's').toLowerCase()];
                     innerEle = this_1.element.querySelector('.' + CLS_ITEMS + ' .' + 'e-toolbar-' + pos.toLowerCase());
@@ -4865,12 +4889,12 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
         var key = Object.keys(attr);
         var keyVal;
         for (var 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]);
             }
         }
     };
@@ -4901,14 +4925,14 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
         };
         if (!isNullOrUndefined(len) && len >= 1) {
             for (var a = 0, element = [].slice.call(elements); a < len; a++) {
-                var itemElement = element[a];
+                var 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 {
@@ -4937,8 +4961,8 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
         }
     };
     Toolbar.prototype.getElementByIndex = function (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;
     };
@@ -4984,14 +5008,14 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
                 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();
                 }
@@ -5000,7 +5024,7 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
                     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) {
@@ -5050,20 +5074,20 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
         this.resize();
     };
     Toolbar.prototype.removeItemByIndex = function (index, innerItems) {
-        if (this.tbarEle[index] && innerItems[index]) {
-            var eleIdx = this.tbarEle.indexOf(innerItems[index]);
+        if (this.tbarEle[parseInt(index.toString(), 10)] && innerItems[parseInt(index.toString(), 10)]) {
+            var eleIdx = this.tbarEle.indexOf(innerItems[parseInt(index.toString(), 10)]);
             if (this.tbarAlign) {
-                var indexAgn = this.tbarAlgEle[(this.items[eleIdx].align + 's').toLowerCase()].indexOf(this.tbarEle[eleIdx]);
-                this.tbarAlgEle[(this.items[eleIdx].align + 's').toLowerCase()].splice(indexAgn, 1);
+                var 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();
             }
-            var btnItem = innerItems[index].querySelector('.e-control.e-btn');
+            var 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);
         }
@@ -5196,7 +5220,8 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
             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));
@@ -5239,6 +5264,9 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
         }
         return innerEle;
     };
+    Toolbar.prototype.getDataTabindex = function (ele) {
+        return isNullOrUndefined(ele.getAttribute('data-tabindex')) ? '-1' : ele.getAttribute('data-tabindex');
+    };
     Toolbar.prototype.itemClick = function (e) {
         this.activeEleSwitch(e.currentTarget);
     };
@@ -5248,14 +5276,17 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
     };
     Toolbar.prototype.activeEleRemove = function (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));
+            }
         }
     };
     Toolbar.prototype.getPersistData = function () {
@@ -5337,6 +5368,26 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
             this.isExtendedOpen = sib.classList.contains(CLS_POPUPOPEN);
         }
     };
+    Toolbar.prototype.updateHideEleTabIndex = function (ele, isHidden, isElement, eleIndex, innerItems) {
+        if (isElement) {
+            eleIndex = innerItems.indexOf(ele);
+        }
+        var nextEle = innerItems[++eleIndex];
+        while (nextEle) {
+            var skipEle = this.eleContains(nextEle);
+            if (!skipEle) {
+                var 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.
      *
@@ -5356,9 +5407,9 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
                     if (!(newProp.items instanceof Array && oldProp.items instanceof Array)) {
                         var changedProb = Object.keys(newProp.items);
                         for (var i = 0; i < changedProb.length; i++) {
-                            var index = parseInt(Object.keys(newProp.items)[i], 10);
-                            var property = Object.keys(newProp.items[index])[0];
-                            var newProperty = Object(newProp.items[index])[property];
+                            var index = parseInt(Object.keys(newProp.items)[parseInt(i.toString(), 10)], 10);
+                            var property = Object.keys(newProp.items[parseInt(index.toString(), 10)])[0];
+                            var newProperty = Object(newProp.items[parseInt(index.toString(), 10)])["" + property];
                             if (typeof newProperty !== 'function') {
                                 if (this.tbarAlign || property === 'align') {
                                     this.refresh();
@@ -5367,7 +5418,7 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
                                 }
                                 var popupPriCheck = property === 'showAlwaysInPopup' && !newProperty;
                                 var 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)) {
@@ -5377,11 +5428,11 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
                                 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);
                                 }
                             }
@@ -5473,67 +5524,32 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
     Toolbar.prototype.hideItem = function (index, value) {
         var isElement = (typeof (index) === 'object') ? true : false;
         var eleIndex = index;
-        var initIndex;
         var ele;
+        if (!isElement && isNullOrUndefined(eleIndex)) {
+            return;
+        }
         var 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)]) {
             var innerItems_1 = [].slice.call(selectAll('.' + CLS_ITEM, this.element));
-            ele = innerItems_1[eleIndex];
+            ele = innerItems_1[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');
-                    var innerItems_2 = [].slice.call(selectAll('.' + CLS_ITEM, this.element));
-                    if (isElement) {
-                        eleIndex = innerItems_2.indexOf(ele);
-                    }
-                    var nextEle = innerItems_2[++eleIndex];
-                    while (nextEle) {
-                        var skipEle = this.eleContains(nextEle);
-                        if (!skipEle) {
-                            nextEle.firstElementChild.removeAttribute('tabindex');
-                            break;
-                        }
-                        nextEle = innerItems_2[++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;
-                var setFlag = false;
-                var removeFlag = false;
-                var 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;
-                            }
-                            var 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();
@@ -5929,7 +5945,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
         }
         else {
             for (var i = 0; i < len; i++) {
-                this.expandItem(true, this.initExpand[i]);
+                this.expandItem(true, this.initExpand[parseInt(i.toString(), 10)]);
             }
         }
         if (this.isReact) {
@@ -6291,14 +6307,15 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
             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;
     };
@@ -6545,7 +6562,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
                     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);
@@ -6581,7 +6598,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
             this.clearTemplate(['headerTemplate', 'itemTemplate'], index);
         }
         var itemEle = this.getItemElements();
-        var ele = itemEle[index];
+        var ele = itemEle[parseInt(index.toString(), 10)];
         var items = this.getItems();
         if (isNullOrUndefined(ele)) {
             return;
@@ -6600,7 +6617,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
      */
     Accordion.prototype.select = function (index) {
         var itemEle = this.getItemElements();
-        var ele = itemEle[index];
+        var ele = itemEle[parseInt(index.toString(), 10)];
         if (isNullOrUndefined(ele) || isNullOrUndefined(select('.' + CLS_HEADER, ele))) {
             return;
         }
@@ -6616,7 +6633,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
      */
     Accordion.prototype.hideItem = function (index, isHidden) {
         var itemEle = this.getItemElements();
-        var ele = itemEle[index];
+        var ele = itemEle[parseInt(index.toString(), 10)];
         if (isNullOrUndefined(ele)) {
             return;
         }
@@ -6640,7 +6657,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
      */
     Accordion.prototype.enableItem = function (index, isEnable) {
         var itemEle = this.getItemElements();
-        var ele = itemEle[index];
+        var ele = itemEle[parseInt(index.toString(), 10)];
         if (isNullOrUndefined(ele)) {
             return;
         }
@@ -6692,7 +6709,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
             }
         }
         else {
-            var ele = itemEle[index];
+            var ele = itemEle[parseInt(index.toString(), 10)];
             if (isNullOrUndefined(ele) || !ele.classList.contains(CLS_SLCT) || (ele.classList.contains(CLS_ACTIVE) && isExpand)) {
                 return;
             }
@@ -6742,7 +6759,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
             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(function (eleStr) {
             if (!isNullOrUndefined(ctnElePos.querySelector(eleStr))) {
@@ -6753,7 +6770,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
     Accordion.prototype.updateItem = function (item, index) {
         if (!isNullOrUndefined(item)) {
             var items = this.getItems();
-            var itemObj = items[index];
+            var itemObj = items[parseInt(index.toString(), 10)];
             items.splice(index, 1);
             this.restoreContent(index);
             detach(item);
@@ -6798,11 +6815,11 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
                     if (!(newProp.items instanceof Array && oldProp.items instanceof Array)) {
                         var changedProp = Object.keys(newProp.items);
                         for (var j = 0; j < changedProp.length; j++) {
-                            var index = parseInt(Object.keys(newProp.items)[j], 10);
-                            var property = Object.keys(newProp.items[index])[0];
-                            var item = selectAll('.' + CLS_ITEM$1, this.element)[index];
-                            var oldVal = Object(oldProp.items[index])[property];
-                            var newVal = Object(newProp.items[index])[property];
+                            var index = parseInt(Object.keys(newProp.items)[parseInt(j.toString(), 10)], 10);
+                            var property = Object.keys(newProp.items[parseInt(index.toString(), 10)])[0];
+                            var item = selectAll('.' + CLS_ITEM$1, this.element)[parseInt(index.toString(), 10)];
+                            var oldVal = Object(oldProp.items[parseInt(index.toString(), 10)])["" + property];
+                            var newVal = Object(newProp.items[parseInt(index.toString(), 10)])["" + property];
                             var temp = property;
                             if (temp === 'header' || temp === 'iconCss' || temp === 'expanded' || ((temp === 'content') && (oldVal === ''))) {
                                 this.updateItem(item, index);
@@ -6816,7 +6833,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
                                 }
                             }
                             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 {
@@ -7298,8 +7315,8 @@ var Menu = /** @__PURE__ @class */ (function (_super) {
         var i;
         var items = this.items;
         var 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 = [];
@@ -7509,6 +7526,9 @@ var TabItem = /** @__PURE__ @class */ (function (_super) {
     __decorate$7([
         Property()
     ], TabItem.prototype, "id", void 0);
+    __decorate$7([
+        Property(-1)
+    ], TabItem.prototype, "tabIndex", void 0);
     return TabItem;
 }(ChildProperty));
 /**
@@ -7712,9 +7732,10 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                 this.setContentHeight(true);
                 this.select(this.selectedItem);
             }
+            this.tbItem = selectAll('.' + CLS_TB_ITEM, this.hdrEle);
             if (!isNullOrUndefined(this.tbItem)) {
                 for (var i = 0; i < this.items.length; i++) {
-                    if (this.items[i]) {
+                    if (this.tbItem[i]) {
                         var tabID = this.items[i].id;
                         this.tbItem[i].setAttribute('data-id', tabID);
                     }
@@ -7817,7 +7838,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         if (!this.isReplace && tbItems.length > 0) {
             var idList_1 = [];
             tbItems.forEach(function (item) {
-                idList_1.push(parseInt(item.id.slice(item.id.indexOf('_') + 1), 10));
+                idList_1.push(_this.getIndexFromEle(item.id));
             });
             maxId = Math.max.apply(Math, idList_1);
         }
@@ -7838,8 +7859,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             }
             var itemIndex;
             if (_this.isReplace && !isNullOrUndefined(_this.tbId) && _this.tbId !== '') {
-                var 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 {
@@ -7881,7 +7901,8 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                     _this.isIconAlone = true;
                 }
             }
-            var wrapAttrs = (item.disabled) ? {} : { tabIndex: '-1' };
+            var tabIndex = isNullOrUndefined(item.tabIndex) ? '-1' : item.tabIndex.toString();
+            var wrapAttrs = (item.disabled) ? {} : { tabIndex: tabIndex, 'data-tabindex': tabIndex };
             tCont.appendChild(_this.btnCls.cloneNode(true));
             var wrap = _this.createElement('div', { className: CLS_WRAP, attrs: wrapAttrs });
             wrap.appendChild(tCont);
@@ -8326,14 +8347,14 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             }
             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) {
@@ -8673,12 +8694,14 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             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':
@@ -8728,6 +8751,9 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             return;
         }
     };
+    Tab.prototype.getIndexFromEle = function (id) {
+        return parseInt(id.substring(id.lastIndexOf('_') + 1), 10);
+    };
     Tab.prototype.hoverHandler = function (e) {
         var trg = e.target;
         if (!isNullOrUndefined(trg.classList) && trg.classList.contains(CLS_ICON_CLOSE)) {
@@ -8746,8 +8772,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                     var hdr = this.element.querySelectorAll('.' + CLS_TB_ITEM)[index];
                     var itemIndex = void 0;
                     if (hdr && !isNullOrUndefined(hdr.id) && hdr.id !== '') {
-                        var num = (hdr.id.lastIndexOf('_'));
-                        itemIndex = parseInt(hdr.id.substring(num + 1), 10);
+                        itemIndex = this.getIndexFromEle(hdr.id);
                     }
                     else {
                         itemIndex = index;
@@ -9065,7 +9090,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         }
         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);
@@ -9326,7 +9351,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             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'));
         }
         var eventArg = {
             event: event,
@@ -9574,7 +9599,8 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                         this.isIconAlone = true;
                     }
                 }
-                var wrapAtt = (item.disabled) ? {} : { tabIndex: '-1' };
+                var tabIndex = isNullOrUndefined(item.tabIndex) ? '-1' : item.tabIndex.toString();
+                var wrapAtt = (item.disabled) ? {} : { tabIndex: tabIndex, 'data-tabindex': tabIndex };
                 tConts.appendChild(this.btnCls.cloneNode(true));
                 var wraper = this.createElement('div', { className: CLS_WRAP, attrs: wrapAtt });
                 wraper.appendChild(tConts);
@@ -9618,9 +9644,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         else {
             var tabItems = this.element.querySelector('.' + CLS_TB_ITEMS);
             var element = this.element.querySelector('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE$1);
-            var id = element.id;
-            var num = (id.indexOf('_'));
-            var index = parseInt(id.substring(num + 1), 10);
+            var index = this.getIndexFromEle(element.id);
             var header = element.innerText;
             var detachContent = this.element.querySelector('.' + CLS_CONTENT$1).querySelector('.' + CLS_ACTIVE$1).children[0];
             var mainContents = detachContent.innerHTML;
@@ -9639,7 +9663,10 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             var conte = this.createElement('div', {
                 className: CLS_TEXT_WRAP, innerHTML: txtString + this.btnCls.outerHTML
             }).outerHTML;
-            var wrap = this.createElement('div', { className: CLS_WRAP, innerHTML: conte, attrs: { tabIndex: '-1' } });
+            var tabIndex = element.firstElementChild.getAttribute('data-tabindex');
+            var 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);
             var crElem = this.createElement('div', { innerHTML: mainContents });
@@ -9824,6 +9851,7 @@ var SMALL = 'e-small';
 var CHILD = 'e-has-child';
 var ITEM_ANIMATION_ACTIVE = 'e-animation-active';
 var DISABLED$1 = 'e-disabled';
+var PREVENTSELECT = 'e-prevent';
 var treeAriaAttr = {
     treeRole: 'group',
     itemRole: 'treeitem',
@@ -9872,6 +9900,9 @@ var FieldsSettings = /** @__PURE__ @class */ (function (_super) {
     __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);
@@ -9928,11 +9959,11 @@ var NodeAnimationSettings = /** @__PURE__ @class */ (function (_super) {
  * 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');
  * ```
  */
 var TreeView = /** @__PURE__ @class */ (function (_super) {
@@ -9951,7 +9982,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         _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;
         return _this;
@@ -10003,7 +10034,9 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
             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,
@@ -10526,6 +10559,10 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         };
         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');
+            }
         }
     };
     TreeView.prototype.frameMouseHandler = function (e) {
@@ -11215,7 +11252,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         else {
             var classList$$1 = target.classList;
             var 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) {
@@ -11689,7 +11726,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         if (this.isLoaded) {
             eventArgs = this.getSelectEvent(li, 'select', e);
             this.trigger('nodeSelecting', eventArgs, function (observedArgs) {
-                if (!observedArgs.cancel) {
+                if (!observedArgs.cancel && !observedArgs.node.classList.contains(PREVENTSELECT)) {
                     _this.nodeSelectAction(li, e, observedArgs, multiSelect);
                 }
             });
@@ -11907,6 +11944,9 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
                         if (_this.showCheckBox) {
                             _this.checkNode(e);
                         }
+                        else {
+                            _this.toggleSelect(focusedNode, e);
+                        }
                         break;
                     case 'moveRight':
                         _this.openNode(_this.enableRtl ? false : true, e);
@@ -11946,6 +11986,8 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
                     case 'ctrlEnter':
                     case 'shiftEnter':
                     case 'csEnter':
+                    case 'shiftSpace':
+                    case 'ctrlSpace':
                         _this.toggleSelect(focusedNode, e);
                         break;
                     case 'f2':
@@ -12339,7 +12381,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
     };
     TreeView.prototype.setFocus = function (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);
         }
@@ -12376,7 +12418,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         }
     };
     TreeView.prototype.setHover = function (li) {
-        if (!li.classList.contains(HOVER)) {
+        if (!li.classList.contains(HOVER) && !li.classList.contains(PREVENTSELECT)) {
             this.removeHover();
             addClass([li], HOVER);
         }
@@ -12400,6 +12442,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
             var pNode = closest(currLi.parentNode, '.' + LISTITEM);
             var pid = pNode ? pNode.getAttribute('data-uid') : null;
             var selected = currLi.classList.contains(ACTIVE);
+            var selectable = currLi.classList.contains(PREVENTSELECT) ? false : true;
             var expanded = (currLi.getAttribute('aria-expanded') === 'true') ? true : false;
             var hasChildren = currLi.getAttribute('aria-expanded') !== null ? true : (select('.' + EXPANDABLE, currLi) || select('.' + COLLAPSIBLE, currLi)) != null ? true : false;
             var checked = null;
@@ -12408,7 +12451,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
                 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
             };
         }
@@ -13436,7 +13479,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
             dropUl = dropEle;
         }
         refNode = dropUl.childNodes[index];
-        if (!this.isFirstRender || (this.dataType === 1)) {
+        if (!this.isFirstRender || this.dataType === 1) {
             if (refNode || this.sortOrder === 'None') {
                 for (var i = 0; i < li.length; i++) {
                     dropUl.insertBefore(li[i], refNode);
@@ -14368,8 +14411,8 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * 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.
      */
@@ -14480,7 +14523,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         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.
      */
     TreeView.prototype.getNode = function (node) {
@@ -14860,7 +14903,6 @@ var CLOSE = 'e-close';
 var OPEN = 'e-open';
 var TRASITION = 'e-transition';
 var DEFAULTBACKDROP = 'e-sidebar-overlay';
-var CONTEXTBACKDROP = 'e-backdrop';
 var RTL$2 = 'e-rtl';
 var RIGHT = 'e-right';
 var LEFT = 'e-left';
@@ -15032,7 +15074,7 @@ var Sidebar = /** @__PURE__ @class */ (function (_super) {
     Sidebar.prototype.destroyBackDrop = function () {
         var 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';
@@ -15170,8 +15212,12 @@ var Sidebar = /** @__PURE__ @class */ (function (_super) {
     };
     Sidebar.prototype.createBackDrop = function () {
         if (this.target && this.showBackdrop && this.getState()) {
+            var targetString = this.target;
             var 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');
@@ -15784,11 +15830,13 @@ var Breadcrumb = /** @__PURE__ @class */ (function (_super) {
                     }
                     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', '');
                     }
@@ -15798,7 +15846,8 @@ var Breadcrumb = /** @__PURE__ @class */ (function (_super) {
                 }
             };
             for (var i = 0; i < len; i % 2 && j_1++, i++) {
-                isActiveItem = (this.activeItem && (this.activeItem === items[j_1].url || this.activeItem === items[j_1].text));
+                isActiveItem = (this.activeItem && (this.activeItem === items[j_1].url ||
+                    this.activeItem === items[j_1].text));
                 if (isCollasped && i > 1 && i < len - 2) {
                     continue;
                 }
@@ -15824,7 +15873,8 @@ var Breadcrumb = /** @__PURE__ @class */ (function (_super) {
                     else {
                         isSingleLevel = true;
                     }
-                    item = [extend({}, items[j_1].properties ? items[j_1].properties
+                    item = [extend({}, items[j_1].properties ?
+                            items[j_1].properties
                             : items[j_1])];
                     if (!item[0].url && !this.itemTemplate) {
                         item = [extend({}, item[0], { isEmptyUrl: true, url: '#' })];
@@ -15912,7 +15962,8 @@ var Breadcrumb = /** @__PURE__ @class */ (function (_super) {
             for (var 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();
@@ -15955,7 +16006,7 @@ var Breadcrumb = /** @__PURE__ @class */ (function (_super) {
     };
     Breadcrumb.prototype.hasField = function (items, field) {
         for (var i = 0, len = items.length; i < len; i++) {
-            if (items[i][field]) {
+            if (items[i]["" + field]) {
                 return true;
             }
         }
@@ -16857,15 +16908,15 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
         if (isNullOrUndefined(activeSlide) && this.showIndicators) {
             var activeIndicator = this.element.querySelector("." + CLS_INDICATOR_BAR + "." + CLS_ACTIVE$2);
             var activeIndex_1 = parseInt(activeIndicator.dataset.index, 10);
-            addClass([allSlides[activeIndex_1]], CLS_ACTIVE$2);
+            addClass([allSlides[parseInt(activeIndex_1.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;
         }
         var activeIndex = parseInt(activeSlide.dataset.index, 10);
-        var currentSlide = allSlides[currentIndex];
+        var currentSlide = allSlides[parseInt(currentIndex.toString(), 10)];
         var eventArgs = {
             currentIndex: activeIndex,
             nextIndex: currentIndex,
@@ -16884,10 +16935,10 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
             attributes(args.nextSlide, { 'aria-hidden': 'false' });
             var 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,
@@ -16899,7 +16950,7 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
             };
             if (_this.partialVisible) {
                 var container = _this.element.querySelector('.' + CLS_ITEMS$2);
-                var slideWidth = allSlides[currentIndex].clientWidth;
+                var slideWidth = allSlides[parseInt(currentIndex.toString(), 10)].clientWidth;
                 container.style.transitionProperty = 'transform';
                 if (_this.loop) {
                     if (_this.slideChangedEventArgs.currentIndex === 0 && _this.slideChangedEventArgs.slideDirection === 'Next') {
@@ -16973,10 +17024,10 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
         for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
             var key = keys_1[_i];
             if (key === 'class') {
-                addClass([element], attribute[key]);
+                addClass([element], attribute["" + key]);
             }
             else {
-                element.setAttribute(key, attribute[key]);
+                element.setAttribute(key, attribute["" + key]);
             }
         }
     };
@@ -17091,7 +17142,7 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
         }
     };
     Carousel.prototype.swipeHandler = function (e) {
-        if (this.element.classList.contains(CLS_HOVER)) {
+        if (this.element.classList.contains(CLS_HOVER) || isNullOrUndefined(this.slideItems) || this.slideItems.length <= 1) {
             return;
         }
         var direction = (e.swipeDirection === 'Right') ? 'Previous' : 'Next';
@@ -17515,7 +17566,7 @@ var AppBar = /** @__PURE__ @class */ (function (_super) {
                             for (var _b = 0, keys_1 = keys; _b < keys_1.length; _b++) {
                                 var key = keys_1[_b];
                                 if (key === 'class') {
-                                    removeClass([this.element], oldProp.htmlAttributes[key]);
+                                    removeClass([this.element], oldProp.htmlAttributes["" + key]);
                                 }
                                 else {
                                     this.element.removeAttribute(key);
@@ -17545,10 +17596,10 @@ var AppBar = /** @__PURE__ @class */ (function (_super) {
         for (var _i = 0, keys_2 = keys; _i < keys_2.length; _i++) {
             var key = keys_2[_i];
             if (key === 'class') {
-                addClass([element], attribute[key]);
+                addClass([element], attribute["" + key]);
             }
             else {
-                element.setAttribute(key, attribute[key]);
+                element.setAttribute(key, attribute["" + key]);
             }
         }
     };