@syncfusion/ej2-navigations 16.4.45 → 16.4.52-46585

package/src/toolbar/toolbar.js

@@ -4,7 +4,7 @@ var __extends = (this && this.__extends) || (function () {
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
             function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
         return extendStatics(d, b);
-    }
+    };
     return function (d, b) {
         extendStatics(d, b);
         function __() { this.constructor = d; }
@@ -17,11 +17,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Component, EventHandler, Property, Event } from '@syncfusion/ej2-base';
 import { addClass, removeClass, isVisible, closest, attributes, detach, classList, KeyboardEvents } from '@syncfusion/ej2-base';
-import { selectAll, setStyleAttribute as setStyle } from '@syncfusion/ej2-base';
+import { selectAll, setStyleAttribute as setStyle, select } from '@syncfusion/ej2-base';
 import { isNullOrUndefined as isNOU, getUniqueID, formatUnit, Collection, compile as templateCompiler } from '@syncfusion/ej2-base';
-import { NotifyPropertyChanges, ChildProperty, Browser } from '@syncfusion/ej2-base';
+import { NotifyPropertyChanges, ChildProperty, Browser, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
 import { Popup } from '@syncfusion/ej2-popups';
 import { calculatePosition } from '@syncfusion/ej2-popups';
 import { Button } from '@syncfusion/ej2-buttons';
@@ -34,6 +35,7 @@ var CLS_RTL = 'e-rtl';
 var CLS_SEPARATOR = 'e-separator';
 var CLS_POPUPICON = 'e-popup-up-icon';
 var CLS_POPUPDOWN = 'e-popup-down-icon';
+var CLS_POPUPOPEN = 'e-popup-open';
 var CLS_TEMPLATE = 'e-template';
 var CLS_DISABLE = 'e-overlay';
 var CLS_POPUPTEXT = 'e-toolbar-text';
@@ -49,6 +51,7 @@ var CLS_TBARCENTER = 'e-toolbar-center';
 var CLS_TBARPOS = 'e-tbar-pos';
 var CLS_HSCROLLCNT = 'e-hscroll-content';
 var CLS_VSCROLLCNT = 'e-vscroll-content';
+var CLS_HSCROLLBAR = 'e-hscroll-bar';
 var CLS_POPUPNAV = 'e-hor-nav';
 var CLS_POPUPCLASS = 'e-toolbar-pop';
 var CLS_POPUP = 'e-toolbar-popup';
@@ -60,7 +63,6 @@ var CLS_HIDDEN = 'e-hidden';
 var CLS_MULTIROW = 'e-toolbar-multirow';
 var CLS_MULTIROWPOS = 'e-multirow-pos';
 var CLS_MULTIROW_SEPARATOR = 'e-multirow-separator';
-var CLS_EXTENDABLE_ITEM = 'e-extended-item';
 var CLS_EXTENDABLE_SEPARATOR = 'e-extended-separator';
 var CLS_EXTEANDABLE_TOOLBAR = 'e-extended-toolbar';
 var CLS_EXTENDABLECLASS = 'e-toolbar-extended';
@@ -89,12 +91,18 @@ var Item = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], Item.prototype, "showAlwaysInPopup", void 0);
+    __decorate([
+        Property(false)
+    ], Item.prototype, "disabled", void 0);
     __decorate([
         Property('')
     ], Item.prototype, "prefixIcon", void 0);
     __decorate([
         Property('')
     ], Item.prototype, "suffixIcon", void 0);
+    __decorate([
+        Property(true)
+    ], Item.prototype, "visible", void 0);
     __decorate([
         Property('None')
     ], Item.prototype, "overflow", void 0);
@@ -119,6 +127,9 @@ var Item = /** @class */ (function (_super) {
     __decorate([
         Event()
     ], Item.prototype, "click", void 0);
+    __decorate([
+        Property(-1)
+    ], Item.prototype, "tabIndex", void 0);
     return Item;
 }(ChildProperty));
 export { Item };
@@ -136,8 +147,9 @@ var Toolbar = /** @class */ (function (_super) {
     __extends(Toolbar, _super);
     /**
      * Initializes a new instance of the Toolbar class.
-     * @param options  - Specifies Toolbar model properties as options.
-     * @param element  - Specifies the element that is rendered as a Toolbar.
+     *
+     * @param {ToolbarModel} options  - Specifies Toolbar model properties as options.
+     * @param { string | HTMLElement} element  - Specifies the element that is rendered as a Toolbar.
      */
     function Toolbar(options, element) {
         var _this = _super.call(this, options, element) || this;
@@ -154,45 +166,69 @@ var Toolbar = /** @class */ (function (_super) {
             popupClose: 'escape',
             tab: 'tab',
             home: 'home',
-            end: 'end',
+            end: 'end'
         };
         return _this;
     }
     /**
      * Removes the control from the DOM and also removes all its related events.
-     * @returns void.
+     *
+     * @returns {void}.
      */
     Toolbar.prototype.destroy = function () {
         var _this = this;
-        var ele = this.element;
-        _super.prototype.destroy.call(this);
+        if (this.isReact || this.isAngular) {
+            this.clearTemplate();
+        }
+        var btnItems = this.element.querySelectorAll('.e-control.e-btn');
+        [].slice.call(btnItems).forEach(function (el) {
+            if (!isNOU(el) && !isNOU(el.ej2_instances) && !isNOU(el.ej2_instances[0]) && !(el.ej2_instances[0].isDestroyed)) {
+                el.ej2_instances[0].destroy();
+            }
+        });
         this.unwireEvents();
         this.tempId.forEach(function (ele) {
             if (!isNOU(_this.element.querySelector(ele))) {
                 document.body.appendChild(_this.element.querySelector(ele)).style.display = 'none';
             }
         });
-        while (ele.firstChild) {
-            ele.removeChild(ele.firstChild);
+        this.destroyItems();
+        while (this.element.lastElementChild) {
+            this.element.removeChild(this.element.lastElementChild);
         }
         if (this.trgtEle) {
-            ele.appendChild(this.ctrlTem);
+            this.element.appendChild(this.ctrlTem);
+            this.trgtEle = null;
+            this.ctrlTem = null;
+        }
+        if (this.popObj) {
+            this.popObj.destroy();
+            detach(this.popObj.element);
+        }
+        if (this.activeEle) {
+            this.activeEle = null;
         }
-        this.clearProperty();
         this.popObj = null;
         this.tbarAlign = null;
+        this.tbarItemsCol = [];
         this.remove(this.element, 'e-toolpop');
-        ele.removeAttribute('style');
-        ['aria-disabled', 'aria-orientation', 'aria-haspopup', 'role'].forEach(function (attrb) {
-            _this.element.removeAttribute(attrb);
+        if (this.cssClass) {
+            removeClass([this.element], this.cssClass.split(' '));
+        }
+        this.element.removeAttribute('style');
+        ['aria-disabled', 'aria-orientation', 'role'].forEach(function (attrb) {
+            return _this.element.removeAttribute(attrb);
         });
+        _super.prototype.destroy.call(this);
     };
     /**
      * Initialize the event handler
+     *
      * @private
+     * @returns {void}
      */
     Toolbar.prototype.preRender = function () {
-        var eventArgs = { enableCollision: true, scrollStep: this.scrollStep };
+        var eventArgs = { enableCollision: this.enableCollision, scrollStep: this.scrollStep };
         this.trigger('beforeCreate', eventArgs);
         this.enableCollision = eventArgs.enableCollision;
         this.scrollStep = eventArgs.scrollStep;
@@ -201,6 +237,7 @@ var Toolbar = /** @class */ (function (_super) {
         this.tempId = [];
         this.tbarItemsCol = this.items;
         this.isVertical = this.element.classList.contains(CLS_VERTICAL) ? true : false;
+        this.isExtendedOpen = false;
         this.popupPriCount = 0;
         if (this.enableRtl) {
             this.add(this.element, CLS_RTL);
@@ -209,12 +246,33 @@ var Toolbar = /** @class */ (function (_super) {
     Toolbar.prototype.wireEvents = function () {
         EventHandler.add(this.element, 'click', this.clickHandler, this);
         window.addEventListener('resize', this.resizeContext);
+        if (this.allowKeyboard) {
+            this.wireKeyboardEvent();
+        }
+    };
+    Toolbar.prototype.wireKeyboardEvent = function () {
         this.keyModule = new KeyboardEvents(this.element, {
             keyAction: this.keyActionHandler.bind(this),
             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 + ' ):not(.' + CLS_SEPARATOR + ' ):not(.' + CLS_HIDDEN + ' )');
+        if (!isNOU(ele) && !isNOU(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) {
+            EventHandler.remove(this.element, 'keydown', this.docKeyDown);
+            this.keyModule.destroy();
+            this.keyModule = null;
+        }
     };
     Toolbar.prototype.docKeyDown = function (e) {
         if (e.target.tagName === 'INPUT') {
@@ -232,10 +290,9 @@ var Toolbar = /** @class */ (function (_super) {
     Toolbar.prototype.unwireEvents = function () {
         EventHandler.remove(this.element, 'click', this.clickHandler);
         this.destroyScroll();
-        this.keyModule.destroy();
+        this.unwireKeyboardEvent();
         window.removeEventListener('resize', this.resizeContext);
         EventHandler.remove(document, 'scroll', this.docEvent);
-        EventHandler.remove(this.element, 'keydown', this.docKeyDown);
         EventHandler.remove(document, 'click', this.docEvent);
     };
     Toolbar.prototype.clearProperty = function () {
@@ -258,11 +315,11 @@ var Toolbar = /** @class */ (function (_super) {
         }
     };
     Toolbar.prototype.destroyItems = function () {
-        [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM)).forEach(function (el) {
-            detach(el);
-        });
-        var tbarItems = this.element.querySelector('.' + CLS_ITEMS);
+        if (this.element) {
+            [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM)).forEach(function (el) { detach(el); });
+        }
         if (this.tbarAlign) {
+            var tbarItems = this.element.querySelector('.' + CLS_ITEMS);
             [].slice.call(tbarItems.children).forEach(function (el) {
                 detach(el);
             });
@@ -308,7 +365,7 @@ var Toolbar = /** @class */ (function (_super) {
             clst = this.popObj.element.querySelector('.' + CLS_ITEM);
         }
         else if (this.element === trgt || tbrNavChk) {
-            clst = this.element.querySelector('.' + CLS_ITEM + ':not(.' + CLS_DISABLE + ' ):not(.' + CLS_SEPARATOR + ' )');
+            clst = this.element.querySelector('.' + CLS_ITEM + ':not(.' + CLS_DISABLE + ' ):not(.' + CLS_SEPARATOR + ' ):not(.' + CLS_HIDDEN + ' )');
         }
         else {
             clst = closest(trgt, '.' + CLS_ITEM);
@@ -319,6 +376,9 @@ var Toolbar = /** @class */ (function (_super) {
         var popObj = this.popObj;
         var rootEle = this.element;
         var popAnimate = { name: 'FadeOut', duration: 100 };
+        var value = e.action === 'moveUp' ? 'previous' : 'next';
+        var ele;
+        var nodes;
         switch (e.action) {
             case 'moveRight':
                 if (this.isVertical) {
@@ -341,10 +401,12 @@ var Toolbar = /** @class */ (function (_super) {
                 break;
             case 'home':
             case 'end':
-                var ele = void 0;
-                var nodes = void 0;
                 if (clst) {
                     var popupCheck = closest(clst, '.e-popup');
+                    var extendedPopup = this.element.querySelector('.' + CLS_EXTENDABLECLASS);
+                    if (this.overflowMode === 'Extended' && extendedPopup && extendedPopup.classList.contains('e-popup-open')) {
+                        popupCheck = e.action === 'end' ? extendedPopup : null;
+                    }
                     if (popupCheck) {
                         if (isVisible(this.popObj.element)) {
                             nodes = [].slice.call(popupCheck.children);
@@ -357,7 +419,7 @@ var Toolbar = /** @class */ (function (_super) {
                         }
                     }
                     else {
-                        nodes = this.element.querySelectorAll('.' + CLS_ITEMS + ' .' + CLS_ITEM);
+                        nodes = this.element.querySelectorAll('.' + CLS_ITEMS + ' .' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + ')');
                         if (e.action === 'home') {
                             ele = nodes[0];
                         }
@@ -372,13 +434,15 @@ var Toolbar = /** @class */ (function (_super) {
                 break;
             case 'moveUp':
             case 'moveDown':
-                var value = e.action === 'moveUp' ? 'previous' : 'next';
                 if (!this.isVertical) {
                     if (popObj && closest(trgt, '.e-popup')) {
                         var popEle = popObj.element;
                         var popFrstEle = popEle.firstElementChild;
-                        if ((value === 'previous' && popFrstEle === clst) || (value === 'next' && popEle.lastElementChild === clst)) {
-                            return;
+                        if ((value === 'previous' && popFrstEle === clst)) {
+                            popEle.lastElementChild.firstChild.focus();
+                        }
+                        else if (value === 'next' && popEle.lastElementChild === clst) {
+                            popFrstEle.firstChild.focus();
                         }
                         else {
                             this.eleFocus(clst, value);
@@ -408,7 +472,6 @@ var Toolbar = /** @class */ (function (_super) {
                             this.activeEleRemove(ele_1);
                             ele_1.focus();
                         }
-                        this.element.removeAttribute('tabindex');
                     }
                 }
                 break;
@@ -437,10 +500,9 @@ var Toolbar = /** @class */ (function (_super) {
             return;
         }
         e.preventDefault();
-        var clst;
         var tbrNavChk = trgt.classList.contains(CLS_TBARNAV);
         var tbarScrollChk = trgt.classList.contains(CLS_TBARSCRLNAV);
-        clst = this.clstElement(tbrNavChk, trgt);
+        var clst = this.clstElement(tbrNavChk, trgt);
         if (clst || tbarScrollChk) {
             this.keyHandling(clst, e, trgt, tbrNavChk, tbarScrollChk);
         }
@@ -448,15 +510,20 @@ var Toolbar = /** @class */ (function (_super) {
     /**
      * Specifies the value to disable/enable the Toolbar component.
      * When set to `true`, the component will be disabled.
+     *
      * @param  {boolean} value - Based on this Boolean value, Toolbar will be enabled (false) or disabled (true).
-     * @returns void.
+     * @returns {void}.
      */
     Toolbar.prototype.disable = function (value) {
         var rootEle = this.element;
-        value ? rootEle.classList.add(CLS_DISABLE) : rootEle.classList.remove(CLS_DISABLE);
-        rootEle.setAttribute('tabindex', !value ? '0' : '-1');
+        if (value) {
+            rootEle.classList.add(CLS_DISABLE);
+        }
+        else {
+            rootEle.classList.remove(CLS_DISABLE);
+        }
         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);
@@ -468,25 +535,16 @@ var Toolbar = /** @class */ (function (_super) {
             rootEle.querySelector('#' + rootEle.id + '_nav').setAttribute('tabindex', !value ? '0' : '-1');
         }
     };
+    Toolbar.prototype.eleContains = function (el) {
+        return el.classList.contains(CLS_SEPARATOR) || el.classList.contains(CLS_DISABLE) || el.getAttribute('disabled') || el.classList.contains(CLS_HIDDEN) || !isVisible(el) || !el.classList.contains(CLS_ITEM);
+    };
     Toolbar.prototype.eleFocus = function (closest, pos) {
         var sib = Object(closest)[pos + 'ElementSibling'];
-        var contains = function (el) {
-            return el.classList.contains(CLS_SEPARATOR) || el.classList.contains(CLS_DISABLE);
-        };
         if (sib) {
-            var skipEle = contains(sib);
+            var skipEle = this.eleContains(sib);
             if (skipEle) {
-                if (Object(sib)[pos + 'ElementSibling']) {
-                    sib = Object(sib)[pos + 'ElementSibling'];
-                    skipEle = contains(sib);
-                    if (skipEle) {
-                        this.eleFocus(sib, pos);
-                        return;
-                    }
-                }
-                else {
-                    return;
-                }
+                this.eleFocus(sib, pos);
+                return;
             }
             this.elementFocus(sib);
         }
@@ -498,7 +556,7 @@ var Toolbar = /** @class */ (function (_super) {
             if (!isNOU(elem) && elem.children.length > 0) {
                 if (pos === 'next') {
                     var el = elem.querySelector('.' + CLS_ITEM);
-                    if (contains(el)) {
+                    if (this.eleContains(el)) {
                         this.eleFocus(el, pos);
                     }
                     else {
@@ -508,7 +566,7 @@ var Toolbar = /** @class */ (function (_super) {
                 }
                 else {
                     var el = elem.lastElementChild;
-                    if (contains(el)) {
+                    if (this.eleContains(el)) {
                         this.eleFocus(el, pos);
                     }
                     else {
@@ -517,12 +575,22 @@ var Toolbar = /** @class */ (function (_super) {
                 }
             }
         }
+        else if (!isNOU(closest)) {
+            var tbrItems = this.element.querySelectorAll('.' + CLS_ITEMS + ' .' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + ')' + ':not(.' + CLS_DISABLE + ')' + ':not(.' + CLS_HIDDEN + ')');
+            if (pos === 'next' && tbrItems) {
+                this.elementFocus(tbrItems[0]);
+            }
+            else if (pos === 'previous' && tbrItems) {
+                this.elementFocus(tbrItems[tbrItems.length - 1]);
+            }
+        }
     };
     Toolbar.prototype.clickHandler = function (e) {
+        var _this = this;
         var trgt = e.target;
-        var clsList = trgt.classList;
         var ele = this.element;
         var isPopupElement = !isNOU(closest(trgt, '.' + CLS_POPUPCLASS));
+        var clsList = trgt.classList;
         var popupNav = closest(trgt, ('.' + CLS_TBARNAV));
         if (!popupNav) {
             popupNav = trgt;
@@ -540,20 +608,22 @@ var Toolbar = /** @class */ (function (_super) {
             return;
         }
         if (clst) {
-            itemObj = this.items[this.tbarEle.indexOf(clst)];
+            var tempItem = this.items[this.tbarEle.indexOf(clst)];
+            itemObj = tempItem;
         }
         var eventArgs = { originalEvent: e, item: itemObj };
         if (itemObj && !isNOU(itemObj.click)) {
             this.trigger('items[' + this.tbarEle.indexOf(clst) + '].click', eventArgs);
         }
         if (!eventArgs.cancel) {
-            this.trigger('clicked', eventArgs);
-        }
-        if (!isNOU(this.popObj) && isPopupElement && !eventArgs.cancel && this.overflowMode === 'Popup') {
-            this.popObj.hide({ name: 'FadeOut', duration: 100 });
+            this.trigger('clicked', eventArgs, function (clickedArgs) {
+                if (!isNOU(_this.popObj) && isPopupElement && !clickedArgs.cancel && _this.overflowMode === 'Popup' &&
+                    clickedArgs.item && clickedArgs.item.type !== 'Input') {
+                    _this.popObj.hide({ name: 'FadeOut', duration: 100 });
+                }
+            });
         }
     };
-    ;
     Toolbar.prototype.popupClickHandler = function (ele, popupNav, CLS_RTL) {
         var popObj = this.popObj;
         if (isVisible(popObj.element)) {
@@ -581,13 +651,15 @@ var Toolbar = /** @class */ (function (_super) {
     };
     /**
      * To Initialize the control rendering
+     *
      * @private
+     * @returns {void}
      */
     Toolbar.prototype.render = function () {
         this.initialize();
         this.renderControl();
-        this.separator();
         this.wireEvents();
+        this.renderComplete();
     };
     Toolbar.prototype.initialize = function () {
         var width = formatUnit(this.width);
@@ -597,15 +669,22 @@ var Toolbar = /** @class */ (function (_super) {
         }
         setStyle(this.element, { 'width': width });
         var ariaAttr = {
-            'role': 'toolbar', 'aria-disabled': 'false', 'aria-haspopup': 'false',
-            'aria-orientation': !this.isVertical ? 'horizontal' : 'vertical',
+            'role': 'toolbar', 'aria-disabled': 'false',
+            'aria-orientation': !this.isVertical ? 'horizontal' : 'vertical'
         };
         attributes(this.element, ariaAttr);
+        if (this.cssClass) {
+            addClass([this.element], this.cssClass.split(' '));
+        }
     };
     Toolbar.prototype.renderControl = function () {
-        this.trgtEle = (this.element.children.length > 0) ? this.element.querySelector('div') : null;
+        var ele = this.element;
+        this.trgtEle = (ele.children.length > 0) ? ele.querySelector('div') : null;
         this.tbarAlgEle = { lefts: [], centers: [], rights: [] };
         this.renderItems();
+        this.renderLayout();
+    };
+    Toolbar.prototype.renderLayout = function () {
         this.renderOverflowMode();
         if (this.tbarAlign) {
             this.itemPositioning();
@@ -613,8 +692,43 @@ var Toolbar = /** @class */ (function (_super) {
         if (this.popObj && this.popObj.element.childElementCount > 1 && this.checkPopupRefresh(this.element, this.popObj.element)) {
             this.popupRefresh(this.popObj.element, false);
         }
+        this.separator();
+    };
+    Toolbar.prototype.itemsAlign = function (items, itemEleDom) {
+        var innerItem;
+        var innerPos;
+        if (!this.tbarEle) {
+            this.tbarEle = [];
+        }
+        for (var i = 0; i < items.length; 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[parseInt(i.toString(), 10)], itemEleDom, i);
+            }
+            innerPos = itemEleDom.querySelector('.e-toolbar-' + items[parseInt(i.toString(), 10)].align.toLowerCase());
+            if (innerPos) {
+                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);
+            }
+            else {
+                itemEleDom.appendChild(innerItem);
+            }
+        }
+        if (this.isReact) {
+            var portals = 'portals';
+            this.notify('render-react-toolbar-template', this["" + portals]);
+            this.renderReactTemplates();
+        }
     };
-    /** @hidden */
+    /**
+     * @hidden
+     * @returns {void}
+     */
     Toolbar.prototype.changeOrientation = function () {
         var ele = this.element;
         if (this.isVertical) {
@@ -645,6 +759,9 @@ var Toolbar = /** @class */ (function (_super) {
             else {
                 this.scrollModule = new HScroll({ scrollStep: this.scrollStep, enableRtl: this.enableRtl }, innerItems[0]);
             }
+            if (this.cssClass) {
+                addClass([innerItems[0]], this.cssClass.split(' '));
+            }
             this.remove(this.scrollModule.element, CLS_TBARPOS);
             setStyle(this.element, { overflow: 'hidden' });
         }
@@ -696,11 +813,18 @@ var Toolbar = /** @class */ (function (_super) {
      * Refresh the whole Toolbar component without re-rendering.
      * - It is used to manually refresh the Toolbar overflow modes such as scrollable, popup, multi row, and extended.
      * - It will refresh the Toolbar component after loading items dynamically.
-     * @returns void.
+     *
+     * @returns {void}.
      */
     Toolbar.prototype.refreshOverflow = function () {
         this.resize();
     };
+    Toolbar.prototype.toolbarAlign = function (innerItems) {
+        if (this.tbarAlign) {
+            this.add(innerItems, CLS_TBARPOS);
+            this.itemPositioning();
+        }
+    };
     Toolbar.prototype.renderOverflowMode = function () {
         var ele = this.element;
         var innerItems = ele.querySelector('.' + CLS_ITEMS);
@@ -714,7 +838,7 @@ var Toolbar = /** @class */ (function (_super) {
             switch (this.overflowMode) {
                 case 'Scrollable':
                     if (isNOU(this.scrollModule)) {
-                        this.initScroll(ele, ele.getElementsByClassName(CLS_ITEMS));
+                        this.initScroll(ele, [].slice.call(ele.getElementsByClassName(CLS_ITEMS)));
                     }
                     break;
                 case 'Popup':
@@ -723,13 +847,9 @@ var Toolbar = /** @class */ (function (_super) {
                         this.removePositioning();
                     }
                     if (this.checkOverflow(ele, innerItems) || priorityCheck) {
-                        this.createPopupEle(ele, [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, ele)));
-                        this.element.querySelector('.' + CLS_TBARNAV).setAttribute('tabIndex', '0');
-                    }
-                    if (this.tbarAlign) {
-                        this.add(innerItems, CLS_TBARPOS);
-                        this.itemPositioning();
+                        this.setOverflowAttributes(ele);
                     }
+                    this.toolbarAlign(innerItems);
                     break;
                 case 'MultiRow':
                     this.add(innerItems, CLS_MULTIROW);
@@ -750,19 +870,26 @@ var Toolbar = /** @class */ (function (_super) {
                         if (this.tbarAlign) {
                             this.removePositioning();
                         }
-                        this.createPopupEle(ele, [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, ele)));
-                        this.element.querySelector('.' + CLS_TBARNAV).setAttribute('tabIndex', '0');
+                        this.setOverflowAttributes(ele);
                     }
+                    this.toolbarAlign(innerItems);
             }
         }
     };
+    Toolbar.prototype.setOverflowAttributes = function (ele) {
+        this.createPopupEle(ele, [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, ele)));
+        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;
         var eleItem = [].slice.call(element.querySelectorAll('.' + CLS_SEPARATOR));
-        var eleInlineItem;
         var multiVar = element.querySelector('.' + CLS_MULTIROW_SEPARATOR);
         var extendVar = element.querySelector('.' + CLS_EXTENDABLE_SEPARATOR);
-        eleInlineItem = this.overflowMode === 'MultiRow' ? multiVar : extendVar;
+        var eleInlineItem = this.overflowMode === 'MultiRow' ? multiVar : extendVar;
         if (eleInlineItem !== null) {
             if (this.overflowMode === 'MultiRow') {
                 eleInlineItem.classList.remove(CLS_MULTIROW_SEPARATOR);
@@ -772,12 +899,12 @@ var Toolbar = /** @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);
                 }
             }
         }
@@ -802,15 +929,15 @@ var Toolbar = /** @class */ (function (_super) {
     };
     Toolbar.prototype.pushingPoppedEle = function (tbarObj, popupPri, ele, eleHeight, sepHeight) {
         var element = tbarObj.element;
+        var poppedEle = [].slice.call(selectAll('.' + CLS_POPUP, element.querySelector('.' + CLS_ITEMS)));
         var nodes = selectAll('.' + CLS_TBAROVERFLOW, ele);
         var nodeIndex = 0;
-        var poppedEle = [].slice.call(selectAll('.' + CLS_POPUP, element.querySelector('.' + CLS_ITEMS)));
         var nodePri = 0;
         poppedEle.forEach(function (el, index) {
             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 {
@@ -848,7 +975,7 @@ var Toolbar = /** @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') {
                 setStyle(tbarElement, { display: 'none' });
             }
@@ -859,20 +986,18 @@ var Toolbar = /** @class */ (function (_super) {
     };
     Toolbar.prototype.createPopup = function () {
         var element = this.element;
-        var eleHeight;
-        var eleItem;
         var sepHeight;
         var sepItem;
         if (this.overflowMode === 'Extended') {
             sepItem = element.querySelector('.' + CLS_SEPARATOR + ':not(.' + CLS_POPUP + ')');
             sepHeight = (element.style.height === 'auto' || element.style.height === '') ? null : sepItem.offsetHeight;
         }
-        eleItem = element.querySelector('.' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + '):not(.' + CLS_POPUP + ')');
-        eleHeight = (element.style.height === 'auto' || element.style.height === '') ? null : (eleItem && eleItem.offsetHeight);
+        var eleItem = element.querySelector('.' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + '):not(.' + CLS_POPUP + ')');
+        var eleHeight = (element.style.height === 'auto' || element.style.height === '') ? null : (eleItem && eleItem.offsetHeight);
         var ele;
         var popupPri = [];
-        if (element.querySelector('#' + element.id + '_popup.' + CLS_POPUPCLASS)) {
-            ele = element.querySelector('#' + element.id + '_popup.' + CLS_POPUPCLASS);
+        if (select('#' + element.id + '_popup.' + CLS_POPUPCLASS, element)) {
+            ele = select('#' + element.id + '_popup.' + CLS_POPUPCLASS, element);
         }
         else {
             var extendEle = this.createElement('div', {
@@ -891,6 +1016,9 @@ var Toolbar = /** @class */ (function (_super) {
     Toolbar.prototype.popupInit = function (element, ele) {
         if (!this.popObj) {
             element.appendChild(ele);
+            if (this.cssClass) {
+                addClass([ele], this.cssClass.split(' '));
+            }
             setStyle(this.element, { overflow: '' });
             var eleStyles = window.getComputedStyle(this.element);
             var popup = new Popup(null, {
@@ -902,20 +1030,27 @@ var Toolbar = /** @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';
             if (this.isVertical) {
                 popup.element.style.visibility = 'hidden';
             }
-            popup.hide();
+            if (this.isExtendedOpen) {
+                var popupNav = this.element.querySelector('.' + CLS_TBARNAV);
+                popupNav.classList.add(CLS_TBARNAVACT);
+                classList(popupNav.firstElementChild, [CLS_POPUPICON], [CLS_POPUPDOWN]);
+                this.element.querySelector('.' + CLS_EXTENDABLECLASS).classList.add(CLS_POPUPOPEN);
+            }
+            else {
+                popup.hide();
+            }
             this.popObj = popup;
-            this.element.setAttribute('aria-haspopup', 'true');
         }
         else {
             var popupEle = this.popObj.element;
@@ -925,9 +1060,15 @@ var Toolbar = /** @class */ (function (_super) {
     };
     Toolbar.prototype.tbarPopupHandler = function (isOpen) {
         if (this.overflowMode === 'Extended') {
-            isOpen ? this.add(this.element, CLS_EXTENDEDPOPOPEN) : this.remove(this.element, CLS_EXTENDEDPOPOPEN);
+            if (isOpen) {
+                this.add(this.element, CLS_EXTENDEDPOPOPEN);
+            }
+            else {
+                this.remove(this.element, CLS_EXTENDEDPOPOPEN);
+            }
         }
     };
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     Toolbar.prototype.popupOpen = function (e) {
         var popObj = this.popObj;
         if (!this.isVertical) {
@@ -937,6 +1078,7 @@ var Toolbar = /** @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');
         setStyle(popObj.element, { height: 'auto', maxHeight: '' });
         popObj.element.style.maxHeight = popObj.element.offsetHeight + 'px';
         if (this.overflowMode === 'Extended') {
@@ -952,7 +1094,7 @@ var Toolbar = /** @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;
@@ -964,10 +1106,20 @@ var Toolbar = /** @class */ (function (_super) {
             var tbEleData = this.element.getBoundingClientRect();
             setStyle(popObj.element, { maxHeight: (tbEleData.top + this.element.offsetHeight) + 'px', bottom: 0, visibility: '' });
         }
+        if (popObj) {
+            var popupOffset = popupEle.getBoundingClientRect();
+            if (popupOffset.right > document.documentElement.clientWidth && popupOffset.width > toolEle.getBoundingClientRect().width) {
+                popObj.collision = { Y: 'none' };
+                popObj.dataBind();
+            }
+            popObj.refreshPosition();
+        }
     };
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     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]);
@@ -993,7 +1145,7 @@ var Toolbar = /** @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);
@@ -1002,35 +1154,37 @@ var Toolbar = /** @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) {
-                    setStyle(inEle[i], { display: 'none', minHeight: eleWid_1 + 'px' });
+                    setStyle(inEle[parseInt(i.toString(), 10)], { display: 'none', minHeight: eleWid_1 + 'px' });
                 }
                 else {
-                    setStyle(inEle[i], { display: 'none', minWidth: eleWid_1 + 'px' });
+                    setStyle(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++;
                             }
                         }
@@ -1051,21 +1205,23 @@ var Toolbar = /** @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) {
-                        setStyle(inEle[i], { display: 'none', minHeight: eleWid_1 + 'px' });
+                        setStyle(inEle[parseInt(i.toString(), 10)], { display: 'none', minHeight: eleWid_1 + 'px' });
                     }
                     else {
-                        setStyle(inEle[i], { display: 'none', minWidth: eleWid_1 + 'px' });
+                        setStyle(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));
                 }
             }
         }
@@ -1085,6 +1241,7 @@ var Toolbar = /** @class */ (function (_super) {
         var navItem = this.createElement('div', { className: CLS_POPUPDOWN + ' e-icons' });
         nav.appendChild(navItem);
         nav.setAttribute('tabindex', '0');
+        nav.setAttribute('role', 'button');
         element.appendChild(nav);
     };
     Toolbar.prototype.tbarPriRef = function (inEle, indx, sepPri, el, des, elWid, wid, ig) {
@@ -1128,8 +1285,8 @@ var Toolbar = /** @class */ (function (_super) {
         var _this = this;
         var ele = this.element;
         var isVer = this.isVertical;
-        var popNav = ele.querySelector('.' + CLS_TBARNAV);
         var innerEle = ele.querySelector('.' + CLS_ITEMS);
+        var popNav = ele.querySelector('.' + CLS_TBARNAV);
         if (isNOU(popNav)) {
             return;
         }
@@ -1158,8 +1315,6 @@ var Toolbar = /** @class */ (function (_super) {
             this.popObj.destroy();
             detach(this.popObj.element);
             this.popObj = null;
-            ele.setAttribute('aria-haspopup', 'false');
-            ele.classList.remove('e-toolpop');
         }
     };
     Toolbar.prototype.ignoreEleFetch = function (index, innerEle) {
@@ -1220,7 +1375,6 @@ var Toolbar = /** @class */ (function (_super) {
         var eleSplice = this.tbarEle;
         var priEleCnt;
         var index;
-        var checkOverflow;
         var innerEle = this.element.querySelector('.' + CLS_ITEMS);
         var ignoreCount = 0;
         var _loop_1 = function (el) {
@@ -1239,7 +1393,7 @@ var Toolbar = /** @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());
@@ -1283,7 +1437,7 @@ var Toolbar = /** @class */ (function (_super) {
             if (state_1 === "break")
                 break;
         }
-        checkOverflow = this.checkOverflow(this.element, this.element.getElementsByClassName(CLS_ITEMS)[0]);
+        var checkOverflow = this.checkOverflow(this.element, this.element.getElementsByClassName(CLS_ITEMS)[0]);
         if (checkOverflow && !destroy) {
             this.renderOverflowMode();
         }
@@ -1330,10 +1484,20 @@ var Toolbar = /** @class */ (function (_super) {
             var popWid = (this.isVertical ? popupNav.offsetHeight : popupNav.offsetWidth) + 'px';
             innerItem[2].removeAttribute('style');
             if (this.isVertical) {
-                this.enableRtl ? innerItem[2].style.top = popWid : innerItem[2].style.bottom = popWid;
+                if (this.enableRtl) {
+                    innerItem[2].style.top = popWid;
+                }
+                else {
+                    innerItem[2].style.bottom = popWid;
+                }
             }
             else {
-                this.enableRtl ? innerItem[2].style.left = popWid : innerItem[2].style.right = popWid;
+                if (this.enableRtl) {
+                    innerItem[2].style.left = popWid;
+                }
+                else {
+                    innerItem[2].style.right = popWid;
+                }
             }
         }
         if (tbarWid <= margin) {
@@ -1343,10 +1507,20 @@ var Toolbar = /** @class */ (function (_super) {
         innerItem[1].removeAttribute('style');
         var mrgn = ((!this.isVertical ? innerItem[0].offsetWidth : innerItem[0].offsetHeight) + value) + 'px';
         if (this.isVertical) {
-            this.enableRtl ? innerItem[1].style.marginBottom = mrgn : innerItem[1].style.marginTop = mrgn;
+            if (this.enableRtl) {
+                innerItem[1].style.marginBottom = mrgn;
+            }
+            else {
+                innerItem[1].style.marginTop = mrgn;
+            }
         }
         else {
-            this.enableRtl ? innerItem[1].style.marginRight = mrgn : innerItem[1].style.marginLeft = mrgn;
+            if (this.enableRtl) {
+                innerItem[1].style.marginRight = mrgn;
+            }
+            else {
+                innerItem[1].style.marginLeft = mrgn;
+            }
         }
     };
     Toolbar.prototype.tbarItemAlign = function (item, itemEle, pos) {
@@ -1388,46 +1562,28 @@ var Toolbar = /** @class */ (function (_super) {
         innerEle.forEach(function (ele) {
             if (ele.tagName === 'DIV') {
                 _this.tbarEle.push(ele);
-                ele.setAttribute('aria-disabled', 'false');
+                if (!isNOU(ele.firstElementChild)) {
+                    ele.firstElementChild.setAttribute('aria-disabled', 'false');
+                }
                 _this.add(ele, CLS_ITEM);
             }
         });
     };
     Toolbar.prototype.renderItems = function () {
         var ele = this.element;
-        var itemEleDom;
-        var innerItem;
-        var innerPos;
         var items = this.items;
-        if (ele && ele.children.length > 0) {
-            itemEleDom = ele.querySelector('.' + CLS_ITEMS);
-        }
         if (this.trgtEle != null) {
             this.ctrlTemplate();
         }
         else if (ele && items.length > 0) {
+            var itemEleDom = void 0;
+            if (ele && ele.children.length > 0) {
+                itemEleDom = ele.querySelector('.' + CLS_ITEMS);
+            }
             if (!itemEleDom) {
                 itemEleDom = this.createElement('div', { className: CLS_ITEMS });
             }
-            for (var i = 0; i < items.length; i++) {
-                innerItem = this.renderSubComponent(items[i], i);
-                if (this.tbarEle.indexOf(innerItem) === -1) {
-                    this.tbarEle.push(innerItem);
-                }
-                if (!this.tbarAlign) {
-                    this.tbarItemAlign(items[i], itemEleDom, i);
-                }
-                innerPos = itemEleDom.querySelector('.e-toolbar-' + items[i].align.toLowerCase());
-                if (innerPos) {
-                    if (!(items[i].showAlwaysInPopup && items[i].overflow !== 'Show')) {
-                        this.tbarAlgEle[(items[i].align + 's').toLowerCase()].push(innerItem);
-                    }
-                    innerPos.appendChild(innerItem);
-                }
-                else {
-                    itemEleDom.appendChild(innerItem);
-                }
-            }
+            this.itemsAlign(items, itemEleDom);
             ele.appendChild(itemEleDom);
         }
     };
@@ -1435,54 +1591,97 @@ var Toolbar = /** @class */ (function (_super) {
         var key = Object.keys(attr);
         var keyVal;
         for (var i = 0; i < key.length; i++) {
-            keyVal = key[i];
-            keyVal === 'class' ? this.add(element, attr[keyVal]) : element.setAttribute(keyVal, attr[keyVal]);
+            keyVal = key[parseInt(i.toString(), 10)];
+            if (keyVal === 'class') {
+                this.add(element, attr["" + keyVal]);
+            }
+            else {
+                element.setAttribute(keyVal, attr["" + keyVal]);
+            }
         }
     };
     /**
      * Enables or disables the specified Toolbar item.
-     * @param  {HTMLElement|NodeList} items - DOM element or an array of items to be enabled or disabled.
+     *
+     * @param  {number|HTMLElement|NodeList} items - DOM element or an array of items to be enabled or disabled.
      * @param  {boolean} isEnable  - Boolean value that determines whether the command should be enabled or disabled.
      * By default, `isEnable` is set to true.
-     * @returns void.
+     * @returns {void}.
      */
     Toolbar.prototype.enableItems = function (items, isEnable) {
         var elements = items;
         var len = elements.length;
+        var ele;
         if (isNOU(isEnable)) {
             isEnable = true;
         }
         var enable = function (isEnable, ele) {
             if (isEnable) {
                 ele.classList.remove(CLS_DISABLE);
-                ele.setAttribute('aria-disabled', 'false');
+                if (!isNOU(ele.firstElementChild)) {
+                    ele.firstElementChild.setAttribute('aria-disabled', 'false');
+                }
             }
             else {
                 ele.classList.add(CLS_DISABLE);
-                ele.setAttribute('aria-disabled', 'true');
+                if (!isNOU(ele.firstElementChild)) {
+                    ele.firstElementChild.setAttribute('aria-disabled', 'true');
+                }
             }
         };
-        if (len && len > 1) {
-            for (var _i = 0, _a = [].slice.call(elements); _i < _a.length; _i++) {
-                var ele = _a[_i];
+        if (!isNOU(len) && len >= 1) {
+            for (var a = 0, element = [].slice.call(elements); a < len; a++) {
+                var itemElement = element[parseInt(a.toString(), 10)];
+                if (typeof (itemElement) === 'number') {
+                    ele = this.getElementByIndex(itemElement);
+                    if (isNOU(ele)) {
+                        return;
+                    }
+                    else {
+                        elements[parseInt(a.toString(), 10)] = ele;
+                    }
+                }
+                else {
+                    ele = itemElement;
+                }
                 enable(isEnable, ele);
             }
-            isEnable ? removeClass(elements, CLS_DISABLE) : addClass(elements, CLS_DISABLE);
+            if (isEnable) {
+                removeClass(elements, CLS_DISABLE);
+            }
+            else {
+                addClass(elements, CLS_DISABLE);
+            }
         }
         else {
-            var ele = void 0;
-            ele = (len && len === 1) ? elements[0] : items;
+            if (typeof (elements) === 'number') {
+                ele = this.getElementByIndex(elements);
+                if (isNOU(ele)) {
+                    return;
+                }
+            }
+            else {
+                ele = items;
+            }
             enable(isEnable, ele);
         }
     };
+    Toolbar.prototype.getElementByIndex = function (index) {
+        if (this.tbarEle[parseInt(index.toString(), 10)]) {
+            return this.tbarEle[parseInt(index.toString(), 10)];
+        }
+        return null;
+    };
     /**
      * Adds new items to the Toolbar that accepts an array as Toolbar items.
-     * @param  {ItemsModel[]} items - DOM element or an array of items to be added to the Toolbar.
+     *
+     * @param  {ItemModel[]} items - DOM element or an array of items to be added to the Toolbar.
      * @param  {number} index - Number value that determines where the command is to be added. By default, index is 0.
-     * @returns void.
+     * @returns {void}.
      */
     Toolbar.prototype.addItems = function (items, index) {
         var innerItems;
+        this.extendedOpen();
         var itemsDiv = this.element.querySelector('.' + CLS_ITEMS);
         if (isNOU(itemsDiv)) {
             this.itemsRerender(items);
@@ -1515,14 +1714,14 @@ var Toolbar = /** @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();
                 }
@@ -1531,9 +1730,12 @@ var Toolbar = /** @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) {
+                    this.tbarEle.splice(this.tbarEle.length - 1, 1);
+                }
                 this.tbarEle.splice(index, 0, innerEle);
                 index++;
                 this.offsetWid = itemsDiv.offsetWidth;
@@ -1541,12 +1743,16 @@ var Toolbar = /** @class */ (function (_super) {
         }
         itemsDiv.style.width = '';
         this.renderOverflowMode();
+        if (this.isReact) {
+            this.renderReactTemplates();
+        }
     };
     /**
      * Removes the items from the Toolbar. Acceptable arguments are index of item/HTMLElement/node list.
+     *
      * @param  {number|HTMLElement|NodeList|HTMLElement[]} args
      * Index or DOM element or an Array of item which is to be removed from the Toolbar.
-     * @returns void.
+     * @returns {void}.
      */
     Toolbar.prototype.removeItems = function (args) {
         var elements = args;
@@ -1574,14 +1780,20 @@ var Toolbar = /** @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 = void 0;
-                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();
             }
-            detach(innerItems[index]);
+            var btnItem = innerItems[parseInt(index.toString(), 10)].querySelector('.e-control.e-btn');
+            if (!isNOU(btnItem) && !isNOU(btnItem.ej2_instances[0]) && !(btnItem.ej2_instances[0].isDestroyed)) {
+                btnItem.ej2_instances[0].destroy();
+            }
+            detach(innerItems[parseInt(index.toString(), 10)]);
             this.items.splice(eleIdx, 1);
             this.tbarEle.splice(eleIdx, 1);
         }
@@ -1596,12 +1808,15 @@ var Toolbar = /** @class */ (function (_super) {
         if (typeof (templateProp) === 'string' || !isComponent) {
             var templateFn = void 0;
             var val = templateProp;
+            var regEx = new RegExp(/<(?=.*? .*?\/ ?>|br|hr|input|!--|wbr)[a-z]+.*?>|<([a-z]+).*?<\/\1>/i);
             val = (typeof (templateProp) === 'string') ? templateProp.trim() : templateProp;
-            var e = void 0;
             try {
                 if (typeof (templateProp) === 'object' && !isNOU(templateProp.tagName)) {
                     innerEle.appendChild(templateProp);
                 }
+                else if (typeof (templateProp) === 'string' && regEx.test(val)) {
+                    innerEle.innerHTML = val;
+                }
                 else if (document.querySelectorAll(val).length) {
                     var ele = document.querySelector(val);
                     var tempStr = ele.outerHTML.trim();
@@ -1611,13 +1826,17 @@ var Toolbar = /** @class */ (function (_super) {
                         this.tempId.push(val);
                     }
                 }
+                else {
+                    templateFn = templateCompiler(val);
+                }
             }
             catch (e) {
                 templateFn = templateCompiler(val);
             }
             var tempArray = void 0;
             if (!isNOU(templateFn)) {
-                tempArray = templateFn({}, this, 'template');
+                var toolbarTemplateID = this.element.id + index + '_template';
+                tempArray = templateFn({}, this, 'template', toolbarTemplateID, this.isStringTemplate);
             }
             if (!isNOU(tempArray) && tempArray.length > 0) {
                 [].slice.call(tempArray).forEach(function (ele) {
@@ -1630,7 +1849,12 @@ var Toolbar = /** @class */ (function (_super) {
         }
         else if (itemType === 'Input') {
             var ele = this.createElement('input');
-            item.id ? (ele.id = item.id) : (ele.id = getUniqueID('tbr-ipt'));
+            if (item.id) {
+                ele.id = item.id;
+            }
+            else {
+                ele.id = getUniqueID('tbr-ipt');
+            }
             innerEle.appendChild(ele);
             eleObj.appendTo(ele);
         }
@@ -1643,10 +1867,15 @@ var Toolbar = /** @class */ (function (_super) {
         var textStr = item.text;
         var iconCss;
         var iconPos;
-        item.id ? (dom.id = item.id) : dom.id = getUniqueID('e-tbr-btn');
-        var btnTxt = this.createElement('div', { className: 'e-tbar-btn-text' });
+        if (item.id) {
+            dom.id = item.id;
+        }
+        else {
+            dom.id = getUniqueID('e-tbr-btn');
+        }
+        var btnTxt = this.createElement('span', { className: 'e-tbar-btn-text' });
         if (textStr) {
-            btnTxt.innerHTML = textStr;
+            btnTxt.innerHTML = this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(textStr) : textStr;
             dom.appendChild(btnTxt);
             dom.classList.add('e-tbtn-txt');
         }
@@ -1672,10 +1901,11 @@ var Toolbar = /** @class */ (function (_super) {
         return dom;
     };
     Toolbar.prototype.renderSubComponent = function (item, index) {
-        var innerEle;
         var dom;
-        innerEle = this.createElement('div', { className: CLS_ITEM });
-        innerEle.setAttribute('aria-disabled', 'false');
+        var innerEle = this.createElement('div', { className: CLS_ITEM });
+        var tempDom = this.createElement('div', {
+            innerHTML: this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(item.tooltipText) : item.tooltipText
+        });
         if (!this.tbarEle) {
             this.tbarEle = [];
         }
@@ -1683,7 +1913,6 @@ var Toolbar = /** @class */ (function (_super) {
             this.setAttr(item.htmlAttributes, innerEle);
         }
         if (item.tooltipText) {
-            var tempDom = this.createElement('div', { innerHTML: item.tooltipText });
             innerEle.setAttribute('title', tempDom.textContent);
         }
         if (item.cssClass) {
@@ -1696,7 +1925,10 @@ var Toolbar = /** @class */ (function (_super) {
             switch (item.type) {
                 case 'Button':
                     dom = this.buttonRendering(item, innerEle);
-                    dom.setAttribute('tabindex', '-1');
+                    dom.setAttribute('tabindex', isNOU(item.tabIndex) ? '-1' : item.tabIndex.toString());
+                    dom.setAttribute('data-tabindex', isNOU(item.tabIndex) ? '-1' : item.tabIndex.toString());
+                    dom.setAttribute('aria-label', (item.text || item.tooltipText));
+                    dom.setAttribute('aria-disabled', 'false');
                     innerEle.appendChild(dom);
                     innerEle.addEventListener('click', this.itemClick.bind(this));
                     break;
@@ -1730,8 +1962,17 @@ var Toolbar = /** @class */ (function (_super) {
             this.add(innerEle, CLS_POPPRI);
             this.popupPriCount++;
         }
+        if (item.disabled) {
+            this.add(innerEle, CLS_DISABLE);
+        }
+        if (item.visible === false) {
+            this.add(innerEle, CLS_HIDDEN);
+        }
         return innerEle;
     };
+    Toolbar.prototype.getDataTabindex = function (ele) {
+        return isNOU(ele.getAttribute('data-tabindex')) ? '-1' : ele.getAttribute('data-tabindex');
+    };
     Toolbar.prototype.itemClick = function (e) {
         this.activeEleSwitch(e.currentTarget);
     };
@@ -1741,14 +1982,17 @@ var Toolbar = /** @class */ (function (_super) {
     };
     Toolbar.prototype.activeEleRemove = function (curEle) {
         if (!isNOU(this.activeEle)) {
-            this.activeEle.setAttribute('tabindex', '-1');
+            this.activeEle.setAttribute('tabindex', this.getDataTabindex(this.activeEle));
         }
         this.activeEle = curEle;
-        if (isNOU(this.trgtEle) && !curEle.parentElement.classList.contains(CLS_TEMPLATE)) {
-            curEle.removeAttribute('tabindex');
-        }
-        else {
-            this.activeEle.setAttribute('tabindex', '0');
+        if (this.getDataTabindex(this.activeEle) === '-1') {
+            if (isNOU(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 () {
@@ -1756,7 +2000,8 @@ var Toolbar = /** @class */ (function (_super) {
     };
     /**
      * Returns the current module name.
-     * @returns string
+     *
+     * @returns {string} - Returns the module name as string.
      * @private
      */
     Toolbar.prototype.getModuleName = function () {
@@ -1764,12 +2009,18 @@ var Toolbar = /** @class */ (function (_super) {
     };
     Toolbar.prototype.itemsRerender = function (newProp) {
         this.items = this.tbarItemsCol;
+        if (this.isReact || this.isAngular) {
+            this.clearTemplate();
+        }
         this.destroyMode();
         this.destroyItems();
         this.items = newProp;
         this.tbarItemsCol = this.items;
         this.renderItems();
         this.renderOverflowMode();
+        if (this.isReact) {
+            this.renderReactTemplates();
+        }
     };
     Toolbar.prototype.resize = function () {
         var ele = this.element;
@@ -1810,19 +2061,51 @@ var Toolbar = /** @class */ (function (_super) {
                 this.refreshPositioning();
             }
         }
+        if (this.element.querySelector('.' + CLS_HSCROLLBAR)) {
+            this.scrollStep = this.element.querySelector('.' + CLS_HSCROLLBAR).offsetWidth;
+        }
         this.offsetWid = ele.offsetWidth;
         this.tbResize = false;
         this.separator();
     };
+    Toolbar.prototype.extendedOpen = function () {
+        var sib = this.element.querySelector('.' + CLS_EXTENDABLECLASS);
+        if (this.overflowMode === 'Extended' && sib) {
+            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.
-     * @param  {ToolbarModel} newProp
-     * @param  {ToolbarModel} oldProp
-     * @returns void
+     *
+     * @param  {ToolbarModel} newProp - It contains new value of the data.
+     * @param  {ToolbarModel} oldProp - It contains old value of the data.
+     * @returns {void}
      * @private
      */
     Toolbar.prototype.onPropertyChanged = function (newProp, oldProp) {
         var tEle = this.element;
+        var wid = tEle.offsetWidth;
+        this.extendedOpen();
         for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
             var prop = _a[_i];
             switch (prop) {
@@ -1830,29 +2113,34 @@ var Toolbar = /** @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 oldProperty = Object(oldProp.items[index])[property];
-                            var newProperty = Object(newProp.items[index])[property];
-                            if (this.tbarAlign || property === 'align') {
-                                this.refresh();
-                                break;
-                            }
-                            var popupPriCheck = property === 'showAlwaysInPopup' && !newProperty;
-                            var booleanCheck = property === 'overflow' && this.popupPriCount !== 0;
-                            if ((popupPriCheck) || (this.items[index].showAlwaysInPopup) && booleanCheck) {
-                                --this.popupPriCount;
-                            }
-                            if (isNOU(this.scrollModule)) {
-                                this.destroyMode();
-                            }
-                            var itemCol = [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, tEle));
-                            detach(itemCol[index]);
-                            this.tbarEle.splice(index, 1);
-                            this.addItems([this.items[index]], index);
-                            this.items.splice(index, 1);
-                            if (this.items[index].template) {
-                                this.tbarEle.splice(this.items.length, 1);
+                            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();
+                                    this.trigger('created');
+                                    break;
+                                }
+                                var popupPriCheck = property === 'showAlwaysInPopup' && !newProperty;
+                                var booleanCheck = property === 'overflow' && this.popupPriCount !== 0;
+                                if ((popupPriCheck) || (this.items[parseInt(index.toString(), 10)].showAlwaysInPopup) && booleanCheck) {
+                                    --this.popupPriCount;
+                                }
+                                if (isNOU(this.scrollModule)) {
+                                    this.destroyMode();
+                                }
+                                var itemCol = [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, tEle));
+                                if (this.isReact && this.items[parseInt(index.toString(), 10)].template) {
+                                    this.clearTemplate();
+                                }
+                                detach(itemCol[parseInt(index.toString(), 10)]);
+                                this.tbarEle.splice(index, 1);
+                                this.addItems([this.items[parseInt(index.toString(), 10)]], index);
+                                this.items.splice(index, 1);
+                                if (this.items[parseInt(index.toString(), 10)].template) {
+                                    this.tbarEle.splice(this.items.length, 1);
+                                }
                             }
                         }
                     }
@@ -1861,7 +2149,6 @@ var Toolbar = /** @class */ (function (_super) {
                     }
                     break;
                 case 'width':
-                    var wid = tEle.offsetWidth;
                     setStyle(tEle, { 'width': formatUnit(newProp.width) });
                     this.renderOverflowMode();
                     if (this.popObj && wid < tEle.offsetWidth) {
@@ -1880,34 +2167,96 @@ var Toolbar = /** @class */ (function (_super) {
                     this.refreshOverflow();
                     break;
                 case 'enableRtl':
-                    newProp.enableRtl ? this.add(tEle, CLS_RTL) : this.remove(tEle, CLS_RTL);
+                    if (newProp.enableRtl) {
+                        this.add(tEle, CLS_RTL);
+                    }
+                    else {
+                        this.remove(tEle, CLS_RTL);
+                    }
                     if (!isNOU(this.scrollModule)) {
-                        newProp.enableRtl ? this.add(this.scrollModule.element, CLS_RTL) : this.remove(this.scrollModule.element, CLS_RTL);
+                        if (newProp.enableRtl) {
+                            this.add(this.scrollModule.element, CLS_RTL);
+                        }
+                        else {
+                            this.remove(this.scrollModule.element, CLS_RTL);
+                        }
                     }
                     if (!isNOU(this.popObj)) {
-                        newProp.enableRtl ? this.add(this.popObj.element, CLS_RTL) : this.remove(this.popObj.element, CLS_RTL);
+                        if (newProp.enableRtl) {
+                            this.add(this.popObj.element, CLS_RTL);
+                        }
+                        else {
+                            this.remove(this.popObj.element, CLS_RTL);
+                        }
                     }
                     if (this.tbarAlign) {
                         this.itemPositioning();
                     }
                     break;
+                case 'scrollStep':
+                    if (this.scrollModule) {
+                        this.scrollModule.scrollStep = this.scrollStep;
+                    }
+                    break;
+                case 'enableCollision':
+                    if (this.popObj) {
+                        this.popObj.collision = { Y: this.enableCollision ? 'flip' : 'none' };
+                    }
+                    break;
+                case 'cssClass':
+                    if (oldProp.cssClass) {
+                        removeClass([this.element], oldProp.cssClass.split(' '));
+                    }
+                    if (newProp.cssClass) {
+                        addClass([this.element], newProp.cssClass.split(' '));
+                    }
+                    break;
+                case 'allowKeyboard':
+                    this.unwireKeyboardEvent();
+                    if (newProp.allowKeyboard) {
+                        this.wireKeyboardEvent();
+                    }
+                    break;
             }
         }
     };
     /**
      * Shows or hides the Toolbar item that is in the specified index.
-     * @param  {number} index - Index value of target item.
+     *
+     * @param  {number | HTMLElement} index - Index value of target item or DOM element  of items to be hidden or shown.
      * @param  {boolean} value - Based on this Boolean value, item will be hide (true) or show (false). By default, value is false.
-     * @returns void.
+     * @returns {void}.
      */
     Toolbar.prototype.hideItem = function (index, value) {
-        if (this.tbarEle[index]) {
-            var innerItems = [].slice.call(selectAll('.' + CLS_ITEM, this.element));
-            if (value === true) {
-                innerItems[index].classList.add(CLS_HIDDEN);
+        var isElement = (typeof (index) === 'object') ? true : false;
+        var eleIndex = index;
+        var ele;
+        if (!isElement && isNOU(eleIndex)) {
+            return;
+        }
+        var innerItems = [].slice.call(selectAll('.' + CLS_ITEM, this.element));
+        if (isElement) {
+            ele = index;
+        }
+        else if (this.tbarEle[parseInt(eleIndex.toString(), 10)]) {
+            var innerItems_1 = [].slice.call(selectAll('.' + CLS_ITEM, this.element));
+            ele = innerItems_1[parseInt(eleIndex.toString(), 10)];
+        }
+        if (ele) {
+            if (value) {
+                ele.classList.add(CLS_HIDDEN);
+                if (!ele.classList.contains(CLS_SEPARATOR)) {
+                    if (isNOU(ele.firstElementChild.getAttribute('tabindex')) ||
+                        ele.firstElementChild.getAttribute('tabindex') !== '-1') {
+                        this.updateHideEleTabIndex(ele, value, isElement, eleIndex, innerItems);
+                    }
+                }
             }
             else {
-                innerItems[index].classList.remove(CLS_HIDDEN);
+                ele.classList.remove(CLS_HIDDEN);
+                if (!ele.classList.contains(CLS_SEPARATOR)) {
+                    this.updateHideEleTabIndex(ele, value, isElement, eleIndex, innerItems);
+                }
             }
             this.refreshOverflow();
         }
@@ -1921,12 +2270,24 @@ var Toolbar = /** @class */ (function (_super) {
     __decorate([
         Property('auto')
     ], Toolbar.prototype, "height", void 0);
+    __decorate([
+        Property('')
+    ], Toolbar.prototype, "cssClass", void 0);
     __decorate([
         Property('Scrollable')
     ], Toolbar.prototype, "overflowMode", void 0);
     __decorate([
-        Property(false)
-    ], Toolbar.prototype, "enableRtl", void 0);
+        Property()
+    ], Toolbar.prototype, "scrollStep", void 0);
+    __decorate([
+        Property(true)
+    ], Toolbar.prototype, "enableCollision", void 0);
+    __decorate([
+        Property(true)
+    ], Toolbar.prototype, "enableHtmlSanitizer", void 0);
+    __decorate([
+        Property(true)
+    ], Toolbar.prototype, "allowKeyboard", void 0);
     __decorate([
         Event()
     ], Toolbar.prototype, "clicked", void 0);