@syncfusion/ej2-navigations 16.4.47 → 16.4.52-46585

package/src/tab/tab.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,14 +17,16 @@ 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;
 };
-import { Component, Property, Event, closest, Collection, Complex, attributes, detach } from '@syncfusion/ej2-base';
+import { Component, Property, Event, closest, Collection, Complex, attributes, detach, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { NotifyPropertyChanges, ChildProperty, select, isVisible } from '@syncfusion/ej2-base';
 import { KeyboardEvents, Browser, formatUnit, L10n } from '@syncfusion/ej2-base';
-import { setStyleAttribute as setStyle, isNullOrUndefined as isNOU, selectAll, addClass, removeClass } from '@syncfusion/ej2-base';
+import { setStyleAttribute as setStyle, isNullOrUndefined as isNOU, selectAll, addClass, removeClass, remove } from '@syncfusion/ej2-base';
 import { EventHandler, rippleEffect, Touch, compile, Animation } from '@syncfusion/ej2-base';
+import { getRandomId, SanitizeHtmlHelper, Draggable } from '@syncfusion/ej2-base';
 import { Toolbar } from '../toolbar/toolbar';
 var CLS_TAB = 'e-tab';
 var CLS_HEADER = 'e-tab-header';
+var CLS_BLA_TEM = 'blazor-template';
 var CLS_CONTENT = 'e-content';
 var CLS_NEST = 'e-nested';
 var CLS_ITEMS = 'e-items';
@@ -57,11 +59,17 @@ var CLS_IGNORE = 'e-ignore';
 var CLS_OVERLAY = 'e-overlay';
 var CLS_HSCRCNT = 'e-hscroll-content';
 var CLS_VSCRCNT = 'e-vscroll-content';
-var CLS_HORIZONTAL = 'e-horizontal';
 var CLS_VTAB = 'e-vertical-tab';
 var CLS_VERTICAL = 'e-vertical';
 var CLS_VLEFT = 'e-vertical-left';
 var CLS_VRIGHT = 'e-vertical-right';
+var CLS_HBOTTOM = 'e-horizontal-bottom';
+var CLS_FILL = 'e-fill-mode';
+var TABITEMPREFIX = 'tabitem_';
+var CLS_REORDER_ACTIVE_ITEM = 'e-reorder-active-item';
+/**
+ * Objects used for configuring the Tab selecting item action properties.
+ */
 var TabActionSettings = /** @class */ (function (_super) {
     __extends(TabActionSettings, _super);
     function TabActionSettings() {
@@ -79,6 +87,9 @@ var TabActionSettings = /** @class */ (function (_super) {
     return TabActionSettings;
 }(ChildProperty));
 export { TabActionSettings };
+/**
+ * Objects used for configuring the Tab animation properties.
+ */
 var TabAnimationSettings = /** @class */ (function (_super) {
     __extends(TabAnimationSettings, _super);
     function TabAnimationSettings() {
@@ -124,6 +135,9 @@ var TabItem = /** @class */ (function (_super) {
     __decorate([
         Complex({}, Header)
     ], TabItem.prototype, "header", void 0);
+    __decorate([
+        Property(null)
+    ], TabItem.prototype, "headerTemplate", void 0);
     __decorate([
         Property('')
     ], TabItem.prototype, "content", void 0);
@@ -133,6 +147,15 @@ var TabItem = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], TabItem.prototype, "disabled", void 0);
+    __decorate([
+        Property(true)
+    ], TabItem.prototype, "visible", void 0);
+    __decorate([
+        Property()
+    ], TabItem.prototype, "id", void 0);
+    __decorate([
+        Property(-1)
+    ], TabItem.prototype, "tabIndex", void 0);
     return TabItem;
 }(ChildProperty));
 export { TabItem };
@@ -151,21 +174,22 @@ var Tab = /** @class */ (function (_super) {
     __extends(Tab, _super);
     /**
      * Initializes a new instance of the Tab class.
-     * @param options  - Specifies Tab model properties as options.
-     * @param element  - Specifies the element that is rendered as a Tab.
+     *
+     * @param {TabModel} options  - Specifies Tab model properties as options.
+     * @param {string | HTMLElement} element  - Specifies the element that is rendered as a Tab.
      */
     function Tab(options, element) {
         var _this = _super.call(this, options, element) || this;
         _this.show = {};
         _this.hide = {};
-        _this.animateOptions = {};
-        _this.animObj = new Animation(_this.animateOptions);
         _this.maxHeight = 0;
         _this.title = 'Close';
+        _this.isInteracted = false;
         _this.lastIndex = 0;
         _this.isAdd = false;
         _this.isIconAlone = false;
-        _this.resizeContext = _this.refreshActElePosition.bind(_this);
+        _this.draggableItems = [];
+        _this.resizeContext = _this.refreshActiveTabBorder.bind(_this);
         /**
          * Contains the keyboard configuration of the Tab.
          */
@@ -185,20 +209,24 @@ var Tab = /** @class */ (function (_super) {
     }
     /**
      * Removes the component from the DOM and detaches all its related event handlers, attributes and classes.
-     * @returns void
+     *
+     * @returns {void}
      */
     Tab.prototype.destroy = function () {
-        var _this = this;
+        if (this.isReact || this.isAngular) {
+            this.clearTemplate();
+        }
         if (!isNOU(this.tbObj)) {
             this.tbObj.destroy();
+            this.tbObj = null;
         }
         this.unWireEvents();
-        ['role', 'aria-disabled', 'aria-activedescendant', 'tabindex', 'aria-orientation'].forEach(function (val) {
-            _this.element.removeAttribute(val);
-        });
+        this.element.removeAttribute('aria-disabled');
         this.expTemplateContent();
         if (!this.isTemplate) {
-            this.element.innerHTML = '';
+            while (this.element.firstElementChild) {
+                remove(this.element.firstElementChild);
+            }
         }
         else {
             var cntEle = select('.' + CLS_TAB + ' > .' + CLS_CONTENT, this.element);
@@ -207,12 +235,50 @@ var Tab = /** @class */ (function (_super) {
                 cntEle.innerHTML = this.cnt;
             }
         }
+        if (this.btnCls) {
+            this.btnCls = null;
+        }
+        this.hdrEle = null;
+        this.cntEle = null;
+        this.tbItems = null;
+        this.tbItem = null;
+        this.tbPop = null;
+        this.prevItem = null;
+        this.popEle = null;
+        this.bdrLine = null;
+        this.content = null;
+        this.dragItem = null;
+        this.cloneElement = null;
+        this.draggingItems = [];
+        if (this.draggableItems && this.draggableItems.length > 0) {
+            for (var i = 0; i < this.draggableItems.length; i++) {
+                this.draggableItems[i].destroy();
+                this.draggableItems[i] = null;
+            }
+            this.draggableItems = [];
+        }
         _super.prototype.destroy.call(this);
         this.trigger('destroyed');
     };
+    /**
+     * Refresh the tab component
+     *
+     * @returns {void}
+     */
+    Tab.prototype.refresh = function () {
+        if (this.isReact) {
+            this.clearTemplate();
+        }
+        _super.prototype.refresh.call(this);
+        if (this.isReact) {
+            this.renderReactTemplates();
+        }
+    };
     /**
      * Initialize component
+     *
      * @private
+     * @returns {void}
      */
     Tab.prototype.preRender = function () {
         var nested = closest(this.element, '.' + CLS_CONTENT);
@@ -223,6 +289,9 @@ var Tab = /** @class */ (function (_super) {
         this.isSwipeed = false;
         this.itemIndexArray = [];
         this.templateEle = [];
+        if (this.allowDragAndDrop) {
+            this.dragArea = !isNOU(this.dragArea) ? this.dragArea : '#' + this.element.id + ' ' + ('.' + CLS_HEADER);
+        }
         if (!isNOU(nested)) {
             nested.parentElement.classList.add(CLS_NEST);
             this.isNested = true;
@@ -231,22 +300,30 @@ var Tab = /** @class */ (function (_super) {
         var css = (name === 'msie') ? 'e-ie' : (name === 'edge') ? 'e-edge' : (name === 'safari') ? 'e-safari' : '';
         setStyle(this.element, { 'width': formatUnit(this.width), 'height': formatUnit(this.height) });
         this.setCssClass(this.element, this.cssClass, true);
-        attributes(this.element, { role: 'tablist', 'aria-disabled': 'false', 'aria-activedescendant': '' });
+        attributes(this.element, { 'aria-disabled': 'false' });
         this.setCssClass(this.element, css, true);
         this.updatePopAnimationConfig();
     };
     /**
      * Initialize the component rendering
+     *
      * @private
+     * @returns {void}
      */
     Tab.prototype.render = function () {
         this.btnCls = this.createElement('span', { className: CLS_ICONS + ' ' + CLS_ICON_CLOSE, attrs: { title: this.title } });
+        this.tabId = this.element.id.length > 0 ? ('-' + this.element.id) : getRandomId();
         this.renderContainer();
         this.wireEvents();
         this.initRender = false;
     };
     Tab.prototype.renderContainer = function () {
         var ele = this.element;
+        this.items.forEach(function (item, index) {
+            if (isNOU(item.id) && !isNOU(item.setProperties)) {
+                item.setProperties({ id: TABITEMPREFIX + index.toString() }, true);
+            }
+        });
         if (this.items.length > 0 && ele.children.length === 0) {
             ele.appendChild(this.createElement('div', { className: CLS_CONTENT }));
             this.setOrientation(this.headerPlacement, this.createElement('div', { className: CLS_HEADER }));
@@ -268,10 +345,9 @@ var Tab = /** @class */ (function (_super) {
             }
             this.renderContent();
             if (selectAll('.' + CLS_TB_ITEM, this.element).length > 0) {
-                var scrCnt = void 0;
                 this.tbItems = select('.' + CLS_HEADER + ' .' + CLS_TB_ITEMS, this.element);
                 this.bdrLine = this.createElement('div', { className: CLS_INDICATOR + ' ' + CLS_HIDDEN + ' ' + CLS_IGNORE });
-                scrCnt = select('.' + this.scrCntClass, this.tbItems);
+                var scrCnt = select('.' + this.scrCntClass, this.tbItems);
                 if (!isNOU(scrCnt)) {
                     scrCnt.insertBefore(this.bdrLine, scrCnt.firstChild);
                 }
@@ -281,6 +357,15 @@ var Tab = /** @class */ (function (_super) {
                 this.setContentHeight(true);
                 this.select(this.selectedItem);
             }
+            this.tbItem = selectAll('.' + CLS_TB_ITEM, this.hdrEle);
+            if (!isNOU(this.tbItem)) {
+                for (var i = 0; i < this.items.length; i++) {
+                    if (this.tbItem[i]) {
+                        var tabID = this.items[i].id;
+                        this.tbItem[i].setAttribute('data-id', tabID);
+                    }
+                }
+            }
             this.setRTL(this.enableRtl);
         }
     };
@@ -288,7 +373,7 @@ var Tab = /** @class */ (function (_super) {
         var _this = this;
         var hdrPlace = this.headerPlacement;
         var tabItems = [];
-        this.hdrEle = select('.' + CLS_HEADER, this.element);
+        this.hdrEle = this.getTabHeader();
         this.addVerticalClass();
         if (!this.isTemplate) {
             tabItems = this.parseObject(this.items, 0);
@@ -303,13 +388,15 @@ var Tab = /** @class */ (function (_super) {
                 hdrItems.push(this.hdrEle.children.item(i).innerHTML);
             }
             if (count > 0) {
-                this.hdrEle.innerHTML = '';
-                this.hdrEle.appendChild(this.createElement('div', { className: CLS_ITEMS }));
+                while (this.hdrEle.firstElementChild) {
+                    detach(this.hdrEle.firstElementChild);
+                }
+                var tabItems_1 = this.createElement('div', { className: CLS_ITEMS });
+                this.hdrEle.appendChild(tabItems_1);
                 hdrItems.forEach(function (item, index) {
                     _this.lastIndex = index;
                     var attr = {
-                        className: CLS_ITEM, id: CLS_ITEM + '_' + index,
-                        attrs: { role: 'tab', 'aria-controls': CLS_CONTENT + '_' + index, 'aria-selected': 'false' }
+                        className: CLS_ITEM, id: CLS_ITEM + _this.tabId + '_' + index
                     };
                     var txt = _this.createElement('span', {
                         className: CLS_TEXT, innerHTML: item, attrs: { 'role': 'presentation' }
@@ -317,9 +404,12 @@ var Tab = /** @class */ (function (_super) {
                     var cont = _this.createElement('div', {
                         className: CLS_TEXT_WRAP, innerHTML: txt + _this.btnCls.outerHTML
                     }).outerHTML;
-                    var wrap = _this.createElement('div', { className: CLS_WRAP, innerHTML: cont, attrs: { tabIndex: '-1' } });
-                    select('.' + CLS_ITEMS, _this.element).appendChild(_this.createElement('div', attr));
-                    selectAll('.' + CLS_ITEM, _this.element)[index].appendChild(wrap);
+                    var wrap = _this.createElement('div', {
+                        className: CLS_WRAP, innerHTML: cont,
+                        attrs: { role: 'tab', tabIndex: '-1', 'aria-selected': 'false', 'aria-controls': CLS_CONTENT + _this.tabId + '_' + index, 'aria-disabled': 'false' }
+                    });
+                    tabItems_1.appendChild(_this.createElement('div', attr));
+                    selectAll('.' + CLS_ITEM, tabItems_1)[index].appendChild(wrap);
                 });
             }
         }
@@ -328,12 +418,30 @@ var Tab = /** @class */ (function (_super) {
             height: (hdrPlace === 'Left' || hdrPlace === 'Right') ? '100%' : 'auto',
             overflowMode: this.overflowMode,
             items: (tabItems.length !== 0) ? tabItems : [],
-            clicked: this.clickHandler.bind(this)
+            clicked: this.clickHandler.bind(this),
+            scrollStep: this.scrollStep,
+            enableHtmlSanitizer: this.enableHtmlSanitizer,
+            cssClass: this.cssClass
         });
+        this.tbObj.isStringTemplate = true;
         this.tbObj.createElement = this.createElement;
         this.tbObj.appendTo(this.hdrEle);
-        this.updateOrientationAttribute();
+        attributes(this.hdrEle, { role: 'tablist' });
+        if (!isNOU(this.element.getAttribute('aria-label'))) {
+            this.hdrEle.setAttribute('aria-label', this.element.getAttribute('aria-label'));
+            this.element.removeAttribute('aria-label');
+        }
+        else if (!isNOU(this.element.getAttribute('aria-labelledby'))) {
+            this.hdrEle.setAttribute('aria-labelledby', this.element.getAttribute('aria-labelledby'));
+            this.element.removeAttribute('aria-labelledby');
+        }
         this.setCloseButton(this.showCloseButton);
+        var toolbarHeader = this.tbObj.element.querySelector('.' + CLS_TB_ITEMS);
+        if (!isNOU(toolbarHeader)) {
+            if (isNOU(toolbarHeader.id) || toolbarHeader.id === '') {
+                toolbarHeader.id = this.element.id + '_' + 'tab_header_items';
+            }
+        }
     };
     Tab.prototype.renderContent = function () {
         this.cntEle = select('.' + CLS_CONTENT, this.element);
@@ -343,9 +451,9 @@ var Tab = /** @class */ (function (_super) {
             var contents = this.cntEle.children;
             for (var i = 0; i < hdrItem.length; i++) {
                 if (contents.length - 1 >= i) {
-                    contents.item(i).className += CLS_ITEM;
-                    attributes(contents.item(i), { 'role': 'tabpanel', 'aria-labelledby': CLS_ITEM + '_' + i });
-                    contents.item(i).id = CLS_CONTENT + '_' + i;
+                    addClass([contents.item(i)], CLS_ITEM);
+                    attributes(contents.item(i), { 'role': 'tabpanel', 'aria-labelledby': CLS_ITEM + this.tabId + '_' + i });
+                    contents.item(i).id = CLS_CONTENT + this.tabId + '_' + i;
                 }
             }
         }
@@ -358,21 +466,42 @@ var Tab = /** @class */ (function (_super) {
     };
     Tab.prototype.parseObject = function (items, index) {
         var _this = this;
-        var tbCount = selectAll('.' + CLS_TB_ITEM, this.element).length;
+        var tbItems = selectAll('.e-tab-header .' + CLS_TB_ITEM, this.element);
+        var maxId = this.lastIndex;
+        if (!this.isReplace && tbItems.length > 0) {
+            var idList_1 = [];
+            tbItems.forEach(function (item) {
+                idList_1.push(_this.getIndexFromEle(item.id));
+            });
+            maxId = Math.max.apply(Math, idList_1);
+        }
         var tItems = [];
         var txtWrapEle;
         var spliceArray = [];
         var i = 0;
         items.forEach(function (item, i) {
-            var pos = (isNOU(item.header.iconPosition)) ? '' : item.header.iconPosition;
-            var css = (isNOU(item.header.iconCss)) ? '' : item.header.iconCss;
-            if (isNOU(item.header) || isNOU(item.header.text) || ((item.header.text.length === 0) && (css === ''))) {
+            var pos = (isNOU(item.header) || isNOU(item.header.iconPosition)) ? '' : item.header.iconPosition;
+            var css = (isNOU(item.header) || isNOU(item.header.iconCss)) ? '' : item.header.iconCss;
+            if ((isNOU(item.headerTemplate)) && (isNOU(item.header) || isNOU(item.header.text) ||
+                ((item.header.text.length === 0)) && (css === ''))) {
                 spliceArray.push(i);
                 return;
             }
-            var txt = item.header.text;
-            _this.lastIndex = ((tbCount === 0) ? i : ((_this.isReplace) ? (index + i) : (_this.lastIndex + 1)));
+            var txt = item.headerTemplate || item.header.text;
+            if (typeof txt === 'string' && _this.enableHtmlSanitizer) {
+                txt = SanitizeHtmlHelper.sanitize(txt);
+            }
+            var itemIndex;
+            if (_this.isReplace && !isNOU(_this.tbId) && _this.tbId !== '') {
+                itemIndex = parseInt(_this.tbId.substring(_this.tbId.lastIndexOf('_') + 1), 10);
+                _this.tbId = '';
+            }
+            else {
+                itemIndex = index + i;
+            }
+            _this.lastIndex = ((tbItems.length === 0) ? i : ((_this.isReplace) ? (itemIndex) : (maxId + 1 + i)));
             var disabled = (item.disabled) ? ' ' + CLS_DISABLE + ' ' + CLS_OVERLAY : '';
+            var hidden = (item.visible === false) ? ' ' + CLS_HIDDEN : '';
             txtWrapEle = _this.createElement('div', { className: CLS_TEXT, attrs: { 'role': 'presentation' } });
             var tHtml = ((txt instanceof Object) ? txt.outerHTML : txt);
             var txtEmpty = (!isNOU(tHtml) && tHtml !== '');
@@ -380,7 +509,7 @@ var Tab = /** @class */ (function (_super) {
                 txtWrapEle.appendChild(txt);
             }
             else {
-                _this.headerTextCompile(txtWrapEle, txt);
+                _this.headerTextCompile(txtWrapEle, txt, i);
             }
             var tEle;
             var icon = _this.createElement('span', {
@@ -406,21 +535,23 @@ var Tab = /** @class */ (function (_super) {
                     _this.isIconAlone = true;
                 }
             }
-            var wrapAttrs = (item.disabled) ? {} : { tabIndex: '-1' };
+            var tabIndex = isNOU(item.tabIndex) ? '-1' : item.tabIndex.toString();
+            var wrapAttrs = (item.disabled) ? {} : { tabIndex: tabIndex, 'data-tabindex': tabIndex, role: 'tab', 'aria-selected': 'false', 'aria-disabled': 'false' };
             tCont.appendChild(_this.btnCls.cloneNode(true));
             var wrap = _this.createElement('div', { className: CLS_WRAP, attrs: wrapAttrs });
             wrap.appendChild(tCont);
             if (_this.itemIndexArray === []) {
-                _this.itemIndexArray.push(CLS_ITEM + '_' + _this.lastIndex);
+                _this.itemIndexArray.push(CLS_ITEM + _this.tabId + '_' + _this.lastIndex);
             }
             else {
-                _this.itemIndexArray.splice((index + i), 0, CLS_ITEM + '_' + _this.lastIndex);
+                _this.itemIndexArray.splice((index + i), 0, CLS_ITEM + _this.tabId + '_' + _this.lastIndex);
             }
             var attrObj = {
-                id: CLS_ITEM + '_' + _this.lastIndex, role: 'tab', 'aria-selected': 'false'
+                id: CLS_ITEM + _this.tabId + '_' + _this.lastIndex
             };
             var tItem = { htmlAttributes: attrObj, template: wrap };
-            tItem.cssClass = item.cssClass + ' ' + disabled + ' ' + ((css !== '') ? 'e-i' + pos : '') + ' ' + ((!txtEmpty) ? CLS_ICON : '');
+            tItem.cssClass = ((item.cssClass !== undefined) ? item.cssClass : ' ') + ' ' + disabled + ' ' + hidden + ' '
+                + ((css !== '') ? 'e-i' + pos : '') + ' ' + ((!txtEmpty) ? CLS_ICON : '');
             if (pos === 'top' || pos === 'bottom') {
                 _this.element.classList.add('e-vertical-icon');
             }
@@ -432,16 +563,20 @@ var Tab = /** @class */ (function (_super) {
                 _this.items.splice(spliceItemIndex, 1);
             });
         }
-        (this.isIconAlone) ? this.element.classList.add(CLS_ICON_TAB) : this.element.classList.remove(CLS_ICON_TAB);
+        if (this.isIconAlone) {
+            this.element.classList.add(CLS_ICON_TAB);
+        }
+        else {
+            this.element.classList.remove(CLS_ICON_TAB);
+        }
         return tItems;
     };
-    Tab.prototype.removeActiveClass = function (id) {
-        var hdrActEle = selectAll(':root .' + CLS_HEADER + ' .' + CLS_TB_ITEM + '.' + CLS_ACTIVE, this.element)[0];
-        if (this.headerPlacement === 'Bottom') {
-            hdrActEle = selectAll(':root .' + CLS_HEADER + ' .' + CLS_TB_ITEM + '.' + CLS_ACTIVE, this.element.children[1])[0];
-        }
-        if (!isNOU(hdrActEle)) {
-            hdrActEle.classList.remove(CLS_ACTIVE);
+    Tab.prototype.removeActiveClass = function () {
+        var tabHeader = this.getTabHeader();
+        if (tabHeader) {
+            var tabItems = selectAll('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE, tabHeader);
+            [].slice.call(tabItems).forEach(function (node) { return node.classList.remove(CLS_ACTIVE); });
+            [].slice.call(tabItems).forEach(function (node) { return node.firstElementChild.setAttribute('aria-selected', 'false'); });
         }
     };
     Tab.prototype.checkPopupOverflow = function (ele) {
@@ -459,8 +594,7 @@ var Tab = /** @class */ (function (_super) {
         }
         if (isOverflow) {
             ele.classList.add(CLS_TB_POPUP);
-            this.tbPop.insertBefore(ele.cloneNode(true), selectAll('.' + CLS_TB_POPUP, this.tbPop)[0]);
-            ele.outerHTML = '';
+            this.tbPop.insertBefore(ele, selectAll('.' + CLS_TB_POPUP, this.tbPop)[0]);
         }
         return true;
     };
@@ -475,9 +609,8 @@ var Tab = /** @class */ (function (_super) {
         if (this.tbItem.length !== 0) {
             target.classList.remove(CLS_TB_POPUP);
             target.removeAttribute('style');
-            this.tbItems.appendChild(target.cloneNode(true));
+            this.tbItems.appendChild(target);
             this.actEleId = target.id;
-            target.outerHTML = '';
             if (this.checkPopupOverflow(lastChild)) {
                 var prevEle = this.tbItems.lastChild.previousElementSibling;
                 this.checkPopupOverflow(prevEle);
@@ -486,22 +619,26 @@ var Tab = /** @class */ (function (_super) {
         }
         return selectAll('.' + CLS_TB_ITEM, this.tbItems).length - 1;
     };
-    Tab.prototype.updateOrientationAttribute = function () {
-        attributes(this.element, { 'aria-orientation': (this.isVertical() ? 'vertical' : 'horizontal') });
-    };
     Tab.prototype.setCloseButton = function (val) {
         var trg = select('.' + CLS_HEADER, this.element);
-        (val === true) ? trg.classList.add(CLS_CLOSE_SHOW) : trg.classList.remove(CLS_CLOSE_SHOW);
+        if (val === true) {
+            trg.classList.add(CLS_CLOSE_SHOW);
+        }
+        else {
+            trg.classList.remove(CLS_CLOSE_SHOW);
+        }
         this.tbObj.refreshOverflow();
-        this.refreshActElePosition();
+        this.refreshActiveTabBorder();
     };
     Tab.prototype.prevCtnAnimation = function (prev, current) {
         var animation;
         var checkRTL = this.enableRtl || this.element.classList.contains(CLS_RTL);
         if (this.isPopup || prev <= current) {
             if (this.animation.previous.effect === 'SlideLeftIn') {
-                animation = { name: 'SlideLeftOut',
-                    duration: this.animation.previous.duration, timingFunction: this.animation.previous.easing };
+                animation = {
+                    name: 'SlideLeftOut',
+                    duration: this.animation.previous.duration, timingFunction: this.animation.previous.easing
+                };
             }
             else {
                 animation = null;
@@ -509,8 +646,10 @@ var Tab = /** @class */ (function (_super) {
         }
         else {
             if (this.animation.next.effect === 'SlideRightIn') {
-                animation = { name: 'SlideRightOut',
-                    duration: this.animation.next.duration, timingFunction: this.animation.next.easing };
+                animation = {
+                    name: 'SlideRightOut',
+                    duration: this.animation.next.duration, timingFunction: this.animation.next.easing
+                };
             }
             else {
                 animation = null;
@@ -546,22 +685,26 @@ var Tab = /** @class */ (function (_super) {
     Tab.prototype.triggerAnimation = function (id, value) {
         var _this = this;
         var prevIndex = this.prevIndex;
-        var itemCollection = [].slice.call(this.element.querySelector('.' + CLS_CONTENT).children);
         var oldCnt;
+        var itemCollection = [].slice.call(this.element.querySelector('.' + CLS_CONTENT).children);
         itemCollection.forEach(function (item) {
             if (item.id === _this.prevActiveEle) {
                 oldCnt = item;
             }
         });
         var prevEle = this.tbItem[prevIndex];
-        var no = this.extIndex(this.tbItem[this.selectedItem].id);
-        var newCnt = this.getTrgContent(this.cntEle, no);
+        var newCnt = this.getTrgContent(this.cntEle, this.extIndex(id));
         if (isNOU(oldCnt) && !isNOU(prevEle)) {
             var idNo = this.extIndex(prevEle.id);
             oldCnt = this.getTrgContent(this.cntEle, idNo);
         }
-        this.prevActiveEle = newCnt.id;
-        if (this.initRender || value === false || this.animation === {} || isNOU(this.animation)) {
+        if (!isNOU(newCnt)) {
+            this.prevActiveEle = newCnt.id;
+        }
+        var isPrevent = isNOU(this.animation) || this.animation.next === {} || this.animation.previous === {}
+            || isNOU(this.animation.next.effect) || isNOU(this.animation.previous.effect)
+            || this.animation.previous.effect == 'None' || this.animation.next.effect == 'None';
+        if (this.initRender || value === false || this.animation === {} || isPrevent) {
             if (oldCnt && oldCnt !== newCnt) {
                 oldCnt.classList.remove(CLS_ACTIVE);
             }
@@ -615,18 +758,34 @@ var Tab = /** @class */ (function (_super) {
         }
         else {
             if (!isNOU(trgParent) && trgParent.classList.contains(CLS_ACTIVE) === false) {
-                this.select(trgIndex);
+                this.selectTab(trgIndex, null, true);
                 if (!isNOU(this.popEle)) {
                     this.popObj.hide(this.hide);
                 }
             }
         }
     };
+    Tab.prototype.getTabHeader = function () {
+        if (isNOU(this.element)) {
+            return undefined;
+        }
+        var headers = [].slice.call(this.element.children).filter(function (e) { return e.classList.contains(CLS_HEADER); });
+        if (headers.length > 0) {
+            return headers[0];
+        }
+        else {
+            var wrap = [].slice.call(this.element.children).filter(function (e) { return !e.classList.contains(CLS_BLA_TEM); })[0];
+            if (!wrap) {
+                return undefined;
+            }
+            return [].slice.call(wrap.children).filter(function (e) { return e.classList.contains(CLS_HEADER); })[0];
+        }
+    };
     Tab.prototype.getEleIndex = function (item) {
-        return Array.prototype.indexOf.call(selectAll('.' + CLS_HEADER + ' .' + CLS_TB_ITEM, this.element), item);
+        return Array.prototype.indexOf.call(selectAll('.' + CLS_TB_ITEM, this.getTabHeader()), item);
     };
     Tab.prototype.extIndex = function (id) {
-        return id.replace(CLS_ITEM + '_', '');
+        return id.replace(CLS_ITEM + this.tabId + '_', '');
     };
     Tab.prototype.expTemplateContent = function () {
         var _this = this;
@@ -636,18 +795,30 @@ var Tab = /** @class */ (function (_super) {
             }
         });
     };
-    Tab.prototype.templateCompile = function (ele, cnt) {
+    Tab.prototype.templateCompile = function (ele, cnt, index) {
         var tempEle = this.createElement('div');
-        this.compileElement(tempEle, cnt, 'content');
+        this.compileElement(tempEle, cnt, 'content', index);
         if (tempEle.childNodes.length !== 0) {
             ele.appendChild(tempEle);
         }
+        if (this.isReact) {
+            this.renderReactTemplates();
+        }
     };
-    Tab.prototype.compileElement = function (ele, val, prop) {
+    Tab.prototype.compileElement = function (ele, val, prop, index) {
+        var templateFn;
         if (typeof val === 'string') {
             val = val.trim();
+            if (this.isVue) {
+                templateFn = compile(SanitizeHtmlHelper.sanitize(val));
+            }
+            else {
+                ele.innerHTML = SanitizeHtmlHelper.sanitize(val);
+            }
+        }
+        else {
+            templateFn = compile(val);
         }
-        var templateFn = compile(val);
         var templateFUN;
         if (!isNOU(templateFn)) {
             templateFUN = templateFn({}, this, prop);
@@ -658,12 +829,16 @@ var Tab = /** @class */ (function (_super) {
             });
         }
     };
-    Tab.prototype.headerTextCompile = function (element, text) {
-        this.compileElement(element, text, 'headerText');
+    Tab.prototype.headerTextCompile = function (element, text, index) {
+        this.compileElement(element, text, 'headerTemplate', index);
     };
-    Tab.prototype.getContent = function (ele, cnt, callType) {
+    Tab.prototype.getContent = function (ele, cnt, callType, index) {
         var eleStr;
+        cnt = isNOU(cnt) ? "" : cnt;
         if (typeof cnt === 'string' || isNOU(cnt.innerHTML)) {
+            if (typeof cnt === 'string' && this.enableHtmlSanitizer) {
+                cnt = SanitizeHtmlHelper.sanitize(cnt);
+            }
             if (cnt[0] === '.' || cnt[0] === '#') {
                 if (document.querySelectorAll(cnt).length) {
                     var eleVal = document.querySelector(cnt);
@@ -677,11 +852,11 @@ var Tab = /** @class */ (function (_super) {
                     }
                 }
                 else {
-                    this.templateCompile(ele, cnt);
+                    this.templateCompile(ele, cnt, index);
                 }
             }
             else {
-                this.templateCompile(ele, cnt);
+                this.templateCompile(ele, cnt, index);
             }
         }
         else {
@@ -696,10 +871,10 @@ var Tab = /** @class */ (function (_super) {
     Tab.prototype.getTrgContent = function (cntEle, no) {
         var ele;
         if (this.element.classList.contains(CLS_NEST)) {
-            ele = select('.' + CLS_NEST + '> .' + CLS_CONTENT + ' > #' + CLS_CONTENT + '_' + no, this.element);
+            ele = select('.' + CLS_NEST + '> .' + CLS_CONTENT + ' > #' + CLS_CONTENT + this.tabId + '_' + no, this.element);
         }
         else {
-            ele = this.findEle(cntEle.children, CLS_CONTENT + '_' + no);
+            ele = this.findEle(cntEle.children, CLS_CONTENT + this.tabId + '_' + no);
         }
         return ele;
     };
@@ -722,7 +897,15 @@ var Tab = /** @class */ (function (_super) {
         if (this.isVertical()) {
             var tbPos = (this.headerPlacement === 'Left') ? CLS_VLEFT : CLS_VRIGHT;
             addClass([this.hdrEle], [CLS_VERTICAL, tbPos]);
-            this.element.classList.add(CLS_VTAB);
+            if (!this.element.classList.contains(CLS_NEST)) {
+                addClass([this.element], [CLS_VTAB, tbPos]);
+            }
+            else {
+                addClass([this.hdrEle], [CLS_VTAB, tbPos]);
+            }
+        }
+        if (this.headerPlacement === 'Bottom') {
+            addClass([this.hdrEle], [CLS_HBOTTOM]);
         }
     };
     Tab.prototype.updatePopAnimationConfig = function () {
@@ -731,23 +914,39 @@ var Tab = /** @class */ (function (_super) {
     };
     Tab.prototype.changeOrientation = function (place) {
         this.setOrientation(place, this.hdrEle);
+        var activeTab = this.hdrEle.querySelector('.' + CLS_ACTIVE);
         var isVertical = this.hdrEle.classList.contains(CLS_VERTICAL) ? true : false;
         removeClass([this.element], [CLS_VTAB]);
         removeClass([this.hdrEle], [CLS_VERTICAL, CLS_VLEFT, CLS_VRIGHT]);
         if (isVertical !== this.isVertical()) {
-            this.tbObj.setProperties({ height: (this.isVertical() ? '100%' : 'auto'), width: (this.isVertical() ? 'auto' : '100%') }, true);
-            this.tbObj.changeOrientation();
-            this.updatePopAnimationConfig();
+            this.changeToolbarOrientation();
+            if (!isNOU(activeTab) && activeTab.classList.contains(CLS_TB_POPUP)) {
+                this.popupHandler(activeTab);
+            }
         }
         this.addVerticalClass();
-        this.updateOrientationAttribute();
-        this.select(this.selectedItem);
+        this.setActiveBorder();
+        this.focusItem();
+    };
+    Tab.prototype.focusItem = function () {
+        var curActItem = select(' #' + CLS_ITEM + this.tabId + '_' + this.selectedItem, this.hdrEle);
+        if (!isNOU(curActItem)) {
+            curActItem.firstElementChild.focus();
+        }
+    };
+    Tab.prototype.changeToolbarOrientation = function () {
+        this.tbObj.setProperties({ height: (this.isVertical() ? '100%' : 'auto'), width: (this.isVertical() ? 'auto' : '100%') }, true);
+        this.tbObj.changeOrientation();
+        this.updatePopAnimationConfig();
     };
     Tab.prototype.setOrientation = function (place, ele) {
-        if (place === 'Bottom' && Array.prototype.indexOf.call(this.element.children, ele) !== 1) {
+        var headerPos = Array.prototype.indexOf.call(this.element.children, ele);
+        var contentPos = Array.prototype.indexOf.call(this.element.children, this.element.querySelector('.' + CLS_CONTENT));
+        if (place === 'Bottom' && (contentPos > headerPos)) {
             this.element.appendChild(ele);
         }
         else {
+            removeClass([ele], [CLS_HBOTTOM]);
             this.element.insertBefore(ele, select('.' + CLS_CONTENT, this.element));
         }
     };
@@ -766,27 +965,31 @@ var Tab = /** @class */ (function (_super) {
         }
     };
     Tab.prototype.setContentHeight = function (val) {
+        if (this.element.classList.contains(CLS_FILL)) {
+            removeClass([this.element], [CLS_FILL]);
+        }
         if (isNOU(this.cntEle)) {
             return;
         }
-        var hdrEle = select('.' + CLS_HEADER, this.element);
+        var hdrEle = this.getTabHeader();
         if (this.heightAdjustMode === 'None') {
             if (this.height === 'auto') {
                 return;
             }
             else {
                 if (!this.isVertical()) {
-                    setStyle(this.cntEle, { 'height': (this.element.offsetHeight - hdrEle.offsetHeight) + 'px' });
+                    setStyle(this.cntEle, { 'height': (this.element.clientHeight - hdrEle.offsetHeight) + 'px' });
                 }
             }
         }
         else if (this.heightAdjustMode === 'Fill') {
+            addClass([this.element], [CLS_FILL]);
             setStyle(this.element, { 'height': '100%' });
-            setStyle(this.cntEle, { 'height': 'auto' });
+            this.cntEle.style.height = 'calc(100% - ' + this.hdrEle.offsetHeight + 'px)';
         }
         else if (this.heightAdjustMode === 'Auto') {
-            var cnt = selectAll('.' + CLS_CONTENT + ' > .' + CLS_ITEM, this.element);
             if (this.isTemplate === true) {
+                var cnt = selectAll('.' + CLS_CONTENT + ' > .' + CLS_ITEM, this.element);
                 for (var i = 0; i < cnt.length; i++) {
                     cnt[i].setAttribute('style', 'display:block; visibility: visible');
                     this.maxHeight = Math.max(this.maxHeight, this.getHeight(cnt[i]));
@@ -798,21 +1001,26 @@ var Tab = /** @class */ (function (_super) {
                 this.cntEle = select('.' + CLS_CONTENT, this.element);
                 if (val === true) {
                     this.cntEle.appendChild(this.createElement('div', {
-                        id: (CLS_CONTENT + '_' + 0), className: CLS_ITEM + ' ' + CLS_ACTIVE,
-                        attrs: { 'role': 'tabpanel', 'aria-labelledby': CLS_ITEM + '_' + 0 }
+                        id: (CLS_CONTENT + this.tabId + '_' + 0), className: CLS_ITEM + ' ' + CLS_ACTIVE,
+                        attrs: { 'role': 'tabpanel', 'aria-labelledby': CLS_ITEM + this.tabId + '_' + 0 }
                     }));
                 }
                 var ele = this.cntEle.children.item(0);
                 for (var i = 0; i < this.items.length; i++) {
-                    this.getContent(ele, this.items[i].content, 'clone');
+                    this.getContent(ele, this.items[i].content, 'clone', i);
                     this.maxHeight = Math.max(this.maxHeight, this.getHeight(ele));
                     while (ele.firstChild) {
                         ele.removeChild(ele.firstChild);
                     }
                 }
+                if (this.isReact) {
+                    this.clearTemplate(['content']);
+                }
                 this.templateEle = [];
-                this.getContent(ele, this.items[0].content, 'render');
-                ele.classList.remove(CLS_ACTIVE);
+                this.getContent(ele, this.items[0].content, 'render', 0);
+                if (this.prevIndex !== this.selectedItem) {
+                    ele.classList.remove(CLS_ACTIVE);
+                }
             }
             setStyle(this.cntEle, { 'height': this.maxHeight + 'px' });
         }
@@ -826,28 +1034,29 @@ var Tab = /** @class */ (function (_super) {
             parseFloat(cs.getPropertyValue('margin-top')) + parseFloat(cs.getPropertyValue('margin-bottom'));
     };
     Tab.prototype.setActiveBorder = function () {
-        var trg;
-        var bar;
-        var scrollCnt;
-        var trgHdrEle;
-        if (this.headerPlacement === 'Bottom') {
-            trgHdrEle = this.element.children[1];
-            trg = select('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE, this.element.children[1]);
+        var trgHdrEle = this.getTabHeader();
+        var trg = select('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE, trgHdrEle);
+        if (isNOU(trg)) {
+            return;
         }
-        else {
-            trgHdrEle = this.element.children[0];
-            trg = select('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE, this.element);
+        if (!this.reorderActiveTab) {
+            if (trg.classList.contains(CLS_TB_POPUP) && !this.bdrLine.classList.contains(CLS_HIDDEN)) {
+                this.bdrLine.classList.add(CLS_HIDDEN);
+            }
+            if (trgHdrEle && !trgHdrEle.classList.contains(CLS_REORDER_ACTIVE_ITEM)) {
+                trgHdrEle.classList.add(CLS_REORDER_ACTIVE_ITEM);
+            }
         }
-        if (trg === null) {
-            return;
+        else if (trgHdrEle) {
+            trgHdrEle.classList.remove(CLS_REORDER_ACTIVE_ITEM);
         }
         var root = closest(trg, '.' + CLS_TAB);
         if (this.element !== root) {
             return;
         }
         this.tbItems = select('.' + CLS_TB_ITEMS, trgHdrEle);
-        bar = select('.' + CLS_INDICATOR, trgHdrEle);
-        scrollCnt = select('.' + CLS_TB_ITEMS + ' .' + this.scrCntClass, trgHdrEle);
+        var bar = select('.' + CLS_INDICATOR, trgHdrEle);
+        var scrollCnt = select('.' + CLS_TB_ITEMS + ' .' + this.scrCntClass, trgHdrEle);
         if (this.isVertical()) {
             setStyle(bar, { 'left': '', 'right': '' });
             var tbHeight = (isNOU(scrollCnt)) ? this.tbItems.offsetHeight : scrollCnt.offsetHeight;
@@ -859,7 +1068,13 @@ var Tab = /** @class */ (function (_super) {
             }
         }
         else {
-            setStyle(bar, { 'top': '', 'height': '' });
+            if (this.overflowMode === 'MultiRow') {
+                var top_1 = this.headerPlacement === 'Bottom' ? trg.offsetTop : trg.offsetHeight + trg.offsetTop;
+                setStyle(bar, { 'top': top_1 + 'px', 'height': '' });
+            }
+            else {
+                setStyle(bar, { 'top': '', 'height': '' });
+            }
             var tbWidth = (isNOU(scrollCnt)) ? this.tbItems.offsetWidth : scrollCnt.offsetWidth;
             if (tbWidth !== 0) {
                 setStyle(bar, { 'left': trg.offsetLeft + 'px', 'right': tbWidth - (trg.offsetLeft + trg.offsetWidth) + 'px' });
@@ -868,42 +1083,44 @@ var Tab = /** @class */ (function (_super) {
                 setStyle(bar, { 'left': 'auto', 'right': 'auto' });
             }
         }
-        if (!isNOU(this.bdrLine)) {
+        if (!isNOU(this.bdrLine) && !trg.classList.contains(CLS_TB_POPUP)) {
             this.bdrLine.classList.remove(CLS_HIDDEN);
         }
     };
-    Tab.prototype.setActive = function (value) {
-        this.tbItem = selectAll('.' + CLS_HEADER + ' .' + CLS_TB_ITEM, this.element);
+    Tab.prototype.setActive = function (value, skipDataBind, isInteracted) {
+        if (skipDataBind === void 0) { skipDataBind = false; }
+        if (isInteracted === void 0) { isInteracted = false; }
+        this.tbItem = selectAll('.' + CLS_TB_ITEM, this.getTabHeader());
         var trg = this.tbItem[value];
-        if (value >= 0) {
-            this.setProperties({ selectedItem: value }, true);
-        }
         if (value < 0 || isNaN(value) || this.tbItem.length === 0) {
             return;
         }
+        if (value >= 0 && !skipDataBind) {
+            this.allowServerDataBinding = false;
+            this.setProperties({ selectedItem: value }, true);
+            this.allowServerDataBinding = true;
+            if (!this.initRender) {
+                this.serverDataBind();
+            }
+        }
         if (trg.classList.contains(CLS_ACTIVE)) {
             this.setActiveBorder();
             return;
         }
         if (!this.isTemplate) {
-            var prev = this.tbItem[this.prevIndex];
-            if (!isNOU(prev)) {
-                prev.removeAttribute('aria-controls');
-            }
-            attributes(trg, { 'aria-controls': CLS_CONTENT + '_' + value });
+            attributes(trg.firstElementChild, { 'aria-controls': CLS_CONTENT + this.tabId + '_' + value });
         }
         var id = trg.id;
-        this.removeActiveClass(id);
+        this.removeActiveClass();
         trg.classList.add(CLS_ACTIVE);
-        trg.setAttribute('aria-selected', 'true');
+        trg.firstElementChild.setAttribute('aria-selected', 'true');
         var no = Number(this.extIndex(id));
         if (isNOU(this.prevActiveEle)) {
-            this.prevActiveEle = CLS_CONTENT + '_' + no;
+            this.prevActiveEle = CLS_CONTENT + this.tabId + '_' + no;
         }
-        attributes(this.element, { 'aria-activedescendant': id });
         if (this.isTemplate) {
             if (select('.' + CLS_CONTENT, this.element).children.length > 0) {
-                var trg_1 = this.findEle(select('.' + CLS_CONTENT, this.element).children, CLS_CONTENT + '_' + no);
+                var trg_1 = this.findEle(select('.' + CLS_CONTENT, this.element).children, CLS_CONTENT + this.tabId + '_' + no);
                 if (!isNOU(trg_1)) {
                     trg_1.classList.add(CLS_ACTIVE);
                 }
@@ -915,12 +1132,12 @@ var Tab = /** @class */ (function (_super) {
             var item = this.getTrgContent(this.cntEle, this.extIndex(id));
             if (isNOU(item)) {
                 this.cntEle.appendChild(this.createElement('div', {
-                    id: CLS_CONTENT + '_' + this.extIndex(id), className: CLS_ITEM + ' ' + CLS_ACTIVE,
-                    attrs: { role: 'tabpanel', 'aria-labelledby': CLS_ITEM + '_' + this.extIndex(id) }
+                    id: CLS_CONTENT + this.tabId + '_' + this.extIndex(id), className: CLS_ITEM + ' ' + CLS_ACTIVE,
+                    attrs: { role: 'tabpanel', 'aria-labelledby': CLS_ITEM + this.tabId + '_' + this.extIndex(id) }
                 }));
                 var eleTrg = this.getTrgContent(this.cntEle, this.extIndex(id));
-                var itemIndex = Array.prototype.indexOf.call(this.itemIndexArray, trg.id);
-                this.getContent(eleTrg, this.items[itemIndex].content, 'render');
+                var itemIndex = Array.prototype.indexOf.call(this.itemIndexArray, id);
+                this.getContent(eleTrg, this.items[itemIndex].content, 'render', itemIndex);
             }
             else {
                 item.classList.add(CLS_ACTIVE);
@@ -928,24 +1145,24 @@ var Tab = /** @class */ (function (_super) {
             this.triggerAnimation(id, this.enableAnimation);
         }
         this.setActiveBorder();
-        var curActItem = select('.' + CLS_HEADER + ' #' + id, this.element);
-        this.refreshItemVisibility(curActItem);
-        curActItem.firstChild.focus();
-        var eventArg = {
-            previousItem: this.prevItem,
-            previousIndex: this.prevIndex,
-            selectedItem: trg,
-            selectedIndex: value,
-            selectedContent: select('#' + CLS_CONTENT + '_' + this.selectedID, this.content),
-            isSwiped: this.isSwipeed
-        };
-        if (!this.initRender || this.selectedItem !== 0) {
+        this.refreshItemVisibility(trg);
+        if (!this.initRender && !skipDataBind) {
+            trg.firstElementChild.focus();
+            var eventArg = {
+                previousItem: this.prevItem,
+                previousIndex: this.prevIndex,
+                selectedItem: trg,
+                selectedIndex: value,
+                selectedContent: select('#' + CLS_CONTENT + this.tabId + '_' + this.selectingID, this.content),
+                isSwiped: this.isSwipeed,
+                isInteracted: isInteracted
+            };
             this.trigger('selected', eventArg);
         }
     };
     Tab.prototype.setItems = function (items) {
         this.isReplace = true;
-        this.tbItems = select('.' + CLS_HEADER + ' .' + CLS_TB_ITEMS, this.element);
+        this.tbItems = select('.' + CLS_TB_ITEMS, this.getTabHeader());
         this.tbObj.items = this.parseObject(items, 0);
         this.tbObj.dataBind();
         this.isReplace = false;
@@ -971,7 +1188,20 @@ var Tab = /** @class */ (function (_super) {
             tbPopObj.show(config);
         }
     };
+    Tab.prototype.bindDraggable = function () {
+        var _this = this;
+        if (this.allowDragAndDrop) {
+            var tabHeader = this.element.querySelector('.' + CLS_HEADER);
+            if (tabHeader) {
+                var items = tabHeader.querySelectorAll('.' + CLS_TB_ITEM);
+                items.forEach(function (element) {
+                    _this.initializeDrag(element);
+                });
+            }
+        }
+    };
     Tab.prototype.wireEvents = function () {
+        this.bindDraggable();
         window.addEventListener('resize', this.resizeContext);
         EventHandler.add(this.element, 'mouseover', this.hoverHandler, this);
         EventHandler.add(this.element, 'keydown', this.spaceKeyDown, this);
@@ -986,10 +1216,15 @@ var Tab = /** @class */ (function (_super) {
         });
     };
     Tab.prototype.unWireEvents = function () {
-        this.keyModule.destroy();
-        this.tabKeyModule.destroy();
-        if (!isNOU(this.cntEle)) {
+        if (!isNOU(this.keyModule)) {
+            this.keyModule.destroy();
+        }
+        if (!isNOU(this.tabKeyModule)) {
+            this.tabKeyModule.destroy();
+        }
+        if (!isNOU(this.cntEle) && !isNOU(this.touchModule)) {
             this.touchModule.destroy();
+            this.touchModule = null;
         }
         window.removeEventListener('resize', this.resizeContext);
         EventHandler.remove(this.element, 'mouseover', this.hoverHandler);
@@ -1010,8 +1245,8 @@ var Tab = /** @class */ (function (_super) {
         }
         else {
             this.isPopup = false;
-            if (!isNOU(trgParent) && trgIndex !== this.selectedItem) {
-                this.select(trgIndex);
+            if (!isNOU(trgParent) && (trgIndex !== this.selectedItem || trgIndex !== this.prevIndex)) {
+                this.selectTab(trgIndex, args.originalEvent, true);
             }
         }
     };
@@ -1019,11 +1254,19 @@ var Tab = /** @class */ (function (_super) {
         if (e.velocity < 3 && isNOU(e.originalEvent.changedTouches)) {
             return;
         }
+        if (this.isNested) {
+            this.element.setAttribute('data-swipe', 'true');
+        }
+        var nestedTab = this.element.querySelector('[data-swipe="true"]');
+        if (nestedTab) {
+            nestedTab.removeAttribute('data-swipe');
+            return;
+        }
         this.isSwipeed = true;
         if (e.swipeDirection === 'Right' && this.selectedItem !== 0) {
             for (var k = this.selectedItem - 1; k >= 0; k--) {
                 if (!this.tbItem[k].classList.contains(CLS_HIDDEN)) {
-                    this.select(k);
+                    this.selectTab(k, null, true);
                     break;
                 }
             }
@@ -1031,7 +1274,7 @@ var Tab = /** @class */ (function (_super) {
         else if (e.swipeDirection === 'Left' && (this.selectedItem !== selectAll('.' + CLS_TB_ITEM, this.element).length - 1)) {
             for (var i = this.selectedItem + 1; i < this.tbItem.length; i++) {
                 if (!this.tbItem[i].classList.contains(CLS_HIDDEN)) {
-                    this.select(i);
+                    this.selectTab(i, null, true);
                     break;
                 }
             }
@@ -1052,12 +1295,14 @@ var Tab = /** @class */ (function (_super) {
         }
         this.element.classList.add(CLS_FOCUS);
         var trg = e.target;
-        var actEle = select('.' + CLS_HEADER + ' .' + CLS_ACTIVE, this.element);
-        var tabItem = selectAll('.' + CLS_TB_ITEM + ':not(.' + CLS_TB_POPUP + ')', this.element);
-        this.popEle = select('.' + CLS_HEADER + ' .' + CLS_TB_POP, this.element);
+        var tabHeader = this.getTabHeader();
+        var actEle = select('.' + CLS_ACTIVE, tabHeader);
+        this.popEle = select('.' + CLS_TB_POP, tabHeader);
         if (!isNOU(this.popEle)) {
             this.popObj = this.popEle.ej2_instances[0];
         }
+        var item = closest(document.activeElement, '.' + CLS_TB_ITEM);
+        var trgParent = closest(trg, '.' + CLS_TB_ITEM);
         switch (e.action) {
             case 'space':
             case 'enter':
@@ -1074,16 +1319,17 @@ var Tab = /** @class */ (function (_super) {
             case 'shiftTab':
                 if (trg.classList.contains(CLS_WRAP)
                     && closest(trg, '.' + CLS_TB_ITEM).classList.contains(CLS_ACTIVE) === 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 (!isNOU(actEle) && actEle.children.item(0).getAttribute('tabindex') === '-1') {
+                    actEle.children.item(0).setAttribute('tabindex', '0');
+                }
                 break;
             case 'moveLeft':
             case 'moveRight':
-                var item = closest(document.activeElement, '.' + CLS_TB_ITEM);
                 if (!isNOU(item)) {
                     this.refreshItemVisibility(item);
                 }
@@ -1095,11 +1341,10 @@ var Tab = /** @class */ (function (_super) {
                 }
                 break;
             case 'delete':
-                var trgParent = closest(trg, '.' + CLS_TB_ITEM);
                 if (this.showCloseButton === true && !isNOU(trgParent)) {
                     var nxtSib = trgParent.nextSibling;
                     if (!isNOU(nxtSib) && nxtSib.classList.contains(CLS_TB_ITEM)) {
-                        nxtSib.firstChild.focus();
+                        nxtSib.firstElementChild.focus();
                     }
                     this.removeTab(this.getEleIndex(trgParent));
                 }
@@ -1107,17 +1352,11 @@ var Tab = /** @class */ (function (_super) {
                 break;
         }
     };
-    Tab.prototype.refreshActElePosition = function () {
-        var activeEle = select('.' + CLS_TB_ITEM + '.' + CLS_TB_POPUP + '.' + CLS_ACTIVE, this.element);
-        if (!isNOU(activeEle)) {
-            this.select(this.getEleIndex(activeEle));
-        }
-        this.refreshActiveBorder();
-    };
     Tab.prototype.refreshItemVisibility = function (target) {
         var scrCnt = select('.' + this.scrCntClass, this.tbItems);
         if (!this.isVertical() && !isNOU(scrCnt)) {
             var scrBar = select('.e-hscroll-bar', this.tbItems);
+            scrBar.removeAttribute('tabindex');
             var scrStart = scrBar.scrollLeft;
             var scrEnd = scrStart + scrBar.offsetWidth;
             var eleStart = target.offsetLeft;
@@ -1138,6 +1377,9 @@ var Tab = /** @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 (!isNOU(trg.classList) && trg.classList.contains(CLS_ICON_CLOSE)) {
@@ -1149,61 +1391,80 @@ var Tab = /** @class */ (function (_super) {
             var changedProp = Object.keys(newProp.items);
             for (var i = 0; i < changedProp.length; i++) {
                 var index = parseInt(Object.keys(newProp.items)[i], 10);
-                var property = Object.keys(newProp.items[index])[0];
-                var oldVal = Object(oldProp.items[index])[property];
-                var newVal = Object(newProp.items[index])[property];
-                var hdrItem = select('.' + CLS_TB_ITEMS + ' #' + CLS_ITEM + '_' + index, this.element);
-                var cntItem = select('.' + CLS_CONTENT + ' #' + CLS_CONTENT + '_' + index, this.element);
-                if (property === 'header') {
-                    var icon = this.items[index].header.iconCss;
-                    var textVal = this.items[index].header.text;
-                    if ((textVal === '') && (icon === '')) {
-                        this.removeTab(index);
+                var properties = Object.keys(newProp.items[index]);
+                for (var j = 0; j < properties.length; j++) {
+                    var oldVal = Object(oldProp.items[index])[properties[j]];
+                    var newVal = Object(newProp.items[index])[properties[j]];
+                    var hdr = this.element.querySelectorAll('.' + CLS_TB_ITEM)[index];
+                    var itemIndex = void 0;
+                    if (hdr && !isNOU(hdr.id) && hdr.id !== '') {
+                        itemIndex = this.getIndexFromEle(hdr.id);
                     }
                     else {
-                        var arr = [];
-                        arr.push(this.items[index]);
-                        this.items.splice(index, 1);
-                        this.itemIndexArray.splice(index, 1);
-                        this.tbObj.items.splice(index, 1);
-                        var isHiddenEle = hdrItem.classList.contains(CLS_HIDDEN);
-                        detach(hdrItem);
-                        this.isReplace = true;
-                        this.addTab(arr, index);
-                        if (isHiddenEle) {
-                            this.hideTab(index);
-                        }
-                        this.isReplace = false;
+                        itemIndex = index;
                     }
-                }
-                if (property === 'content' && !isNOU(cntItem)) {
-                    var strVal = typeof newVal === 'string' || isNOU(newVal.innerHTML);
-                    if (strVal && (newVal[0] === '.' || newVal[0] === '#') && newVal.length) {
-                        var eleVal = document.querySelector(newVal);
-                        cntItem.appendChild(eleVal);
-                        eleVal.style.display = '';
+                    var hdrItem = select('.' + CLS_TB_ITEMS + ' #' + CLS_ITEM + this.tabId + '_' + itemIndex, this.element);
+                    var cntItem = select('.' + CLS_CONTENT + ' #' + CLS_CONTENT + this.tabId + '_' + itemIndex, this.element);
+                    if (properties[j] === 'header' || properties[j] === 'headerTemplate') {
+                        var icon = (isNOU(this.items[index].header) ||
+                            isNOU(this.items[index].header.iconCss)) ? '' : this.items[index].header.iconCss;
+                        var textVal = this.items[index].headerTemplate || this.items[index].header.text;
+                        if ((textVal === '') && (icon === '')) {
+                            this.removeTab(index);
+                        }
+                        else {
+                            this.tbId = hdr.id;
+                            var arr = [];
+                            arr.push(this.items[index]);
+                            this.items.splice(index, 1);
+                            this.itemIndexArray.splice(index, 1);
+                            this.tbObj.items.splice(index, 1);
+                            var isHiddenEle = hdrItem.classList.contains(CLS_HIDDEN);
+                            detach(hdrItem);
+                            this.isReplace = true;
+                            this.addTab(arr, index);
+                            if (isHiddenEle) {
+                                this.hideTab(index);
+                            }
+                            this.isReplace = false;
+                        }
                     }
-                    else if (newVal === '' && oldVal[0] === '#') {
-                        document.body.appendChild(this.element.querySelector(oldVal)).style.display = 'none';
-                        cntItem.innerHTML = newVal;
+                    if (properties[j] === 'content' && !isNOU(cntItem)) {
+                        var strVal = typeof newVal === 'string' || isNOU(newVal.innerHTML);
+                        if (strVal && (newVal[0] === '.' || newVal[0] === '#') && newVal.length) {
+                            var eleVal = document.querySelector(newVal);
+                            cntItem.appendChild(eleVal);
+                            eleVal.style.display = '';
+                        }
+                        else if (newVal === '' && oldVal[0] === '#') {
+                            document.body.appendChild(this.element.querySelector(oldVal)).style.display = 'none';
+                            cntItem.innerHTML = newVal;
+                        }
+                        else if (this.isReact) {
+                            cntItem.innerHTML = '';
+                            this.templateCompile(cntItem, newVal, index);
+                        }
+                        else if (typeof newVal !== 'function') {
+                            cntItem.innerHTML = newVal;
+                        }
                     }
-                    else {
-                        cntItem.innerHTML = newVal;
+                    if (properties[j] === 'cssClass') {
+                        if (!isNOU(hdrItem)) {
+                            hdrItem.classList.remove(oldVal);
+                            hdrItem.classList.add(newVal);
+                        }
+                        if (!isNOU(cntItem)) {
+                            cntItem.classList.remove(oldVal);
+                            cntItem.classList.add(newVal);
+                        }
                     }
-                }
-                if (property === 'cssClass') {
-                    if (!isNOU(hdrItem)) {
-                        hdrItem.classList.remove(oldVal);
-                        hdrItem.classList.add(newVal);
+                    if (properties[j] === 'disabled') {
+                        this.enableTab(index, ((newVal === true) ? false : true));
                     }
-                    if (!isNOU(cntItem)) {
-                        cntItem.classList.remove(oldVal);
-                        cntItem.classList.add(newVal);
+                    if (properties[j] === 'visible') {
+                        this.hideTab(index, ((newVal === true) ? false : true));
                     }
                 }
-                if (property === 'disabled') {
-                    this.enableTab(index, ((newVal === true) ? false : true));
-                }
             }
         }
         else {
@@ -1212,22 +1473,241 @@ var Tab = /** @class */ (function (_super) {
                 this.reRenderItems();
             }
             else {
+                if (this.isReact || this.isAngular) {
+                    this.clearTemplate();
+                }
                 this.setItems(newProp.items);
                 if (this.templateEle.length > 0) {
                     this.expTemplateContent();
                 }
                 this.templateEle = [];
-                select('.' + CLS_TAB + ' > .' + CLS_CONTENT, this.element).innerHTML = '';
+                var selectElement = select('.' + CLS_TAB + ' > .' + CLS_CONTENT, this.element);
+                while (selectElement.firstElementChild) {
+                    detach(selectElement.firstElementChild);
+                }
                 this.select(this.selectedItem);
+                this.draggableItems = [];
+                this.bindDraggable();
+            }
+        }
+    };
+    Tab.prototype.initializeDrag = function (target) {
+        var _this = this;
+        var dragObj = new Draggable(target, {
+            dragArea: this.dragArea,
+            dragTarget: '.' + CLS_TB_ITEM,
+            clone: true,
+            helper: this.helper.bind(this),
+            dragStart: this.itemDragStart.bind(this),
+            drag: function (e) {
+                var dragIndex = _this.getEleIndex(_this.dragItem);
+                var dropIndex;
+                var dropItem;
+                var dragArgs = {
+                    draggedItem: _this.dragItem,
+                    event: e.event,
+                    target: e.target,
+                    droppedItem: e.target.closest('.' + CLS_TB_ITEM),
+                    clonedElement: _this.cloneElement,
+                    index: dragIndex
+                };
+                if (!isNOU(e.target.closest('.' + CLS_TAB)) && !e.target.closest('.' + CLS_TAB).isEqualNode(_this.element) &&
+                    _this.dragArea !== '.' + CLS_HEADER) {
+                    _this.trigger('dragging', dragArgs);
+                }
+                else {
+                    if (!(e.target.closest(_this.dragArea)) && _this.overflowMode !== 'Popup') {
+                        document.body.style.cursor = 'not-allowed';
+                        addClass([_this.cloneElement], CLS_HIDDEN);
+                        if (_this.dragItem.classList.contains(CLS_HIDDEN)) {
+                            removeClass([_this.dragItem], CLS_HIDDEN);
+                        }
+                        _this.dragItem.querySelector('.' + CLS_WRAP).style.visibility = 'visible';
+                    }
+                    else {
+                        document.body.style.cursor = '';
+                        _this.dragItem.querySelector('.' + CLS_WRAP).style.visibility = 'hidden';
+                        if (_this.cloneElement.classList.contains(CLS_HIDDEN)) {
+                            removeClass([_this.cloneElement], CLS_HIDDEN);
+                        }
+                    }
+                    if (_this.overflowMode === 'Scrollable' && !isNOU(_this.element.querySelector('.e-hscroll'))) {
+                        var scrollRightNavEle = _this.element.querySelector('.e-scroll-right-nav');
+                        var scrollLeftNavEle = _this.element.querySelector('.e-scroll-left-nav');
+                        var hscrollBar = _this.element.querySelector('.e-hscroll-bar');
+                        if (!isNOU(scrollRightNavEle) && Math.abs((scrollRightNavEle.offsetWidth / 2) +
+                            scrollRightNavEle.offsetLeft) > _this.cloneElement.offsetLeft + _this.cloneElement.offsetWidth) {
+                            hscrollBar.scrollLeft -= 10;
+                        }
+                        if (!isNOU(scrollLeftNavEle) && Math.abs((scrollLeftNavEle.offsetLeft + scrollLeftNavEle.offsetWidth) -
+                            _this.cloneElement.offsetLeft) > (scrollLeftNavEle.offsetWidth / 2)) {
+                            hscrollBar.scrollLeft += 10;
+                        }
+                    }
+                    _this.cloneElement.style.pointerEvents = 'none';
+                    dropItem = closest(e.target, '.' + CLS_TB_ITEM + '.e-draggable');
+                    var scrollContentWidth = 0;
+                    if (_this.overflowMode === 'Scrollable' && !isNOU(_this.element.querySelector('.e-hscroll'))) {
+                        scrollContentWidth = _this.element.querySelector('.e-hscroll-content').offsetWidth;
+                    }
+                    if (dropItem != null && !dropItem.isSameNode(_this.dragItem) &&
+                        dropItem.closest('.' + CLS_TAB).isSameNode(_this.dragItem.closest('.' + CLS_TAB))) {
+                        dropIndex = _this.getEleIndex(dropItem);
+                        if (dropIndex < dragIndex &&
+                            (Math.abs((dropItem.offsetLeft + dropItem.offsetWidth) -
+                                _this.cloneElement.offsetLeft) > (dropItem.offsetWidth / 2))) {
+                            _this.dragAction(dropItem, dragIndex, dropIndex);
+                        }
+                        if (dropIndex > dragIndex &&
+                            (Math.abs(dropItem.offsetWidth / 2) + dropItem.offsetLeft -
+                                scrollContentWidth) < _this.cloneElement.offsetLeft + _this.cloneElement.offsetWidth) {
+                            _this.dragAction(dropItem, dragIndex, dropIndex);
+                        }
+                    }
+                    _this.droppedIndex = _this.getEleIndex(_this.dragItem);
+                    _this.trigger('dragging', dragArgs);
+                }
+            },
+            dragStop: this.itemDragStop.bind(this)
+        });
+        this.draggableItems.push(dragObj);
+    };
+    Tab.prototype.helper = function (e) {
+        this.cloneElement = this.createElement('div');
+        if (e.element) {
+            this.cloneElement = (e.element.cloneNode(true));
+            addClass([this.cloneElement], 'e-tab-clone-element');
+            if (this.element.querySelector('.' + CLS_HEADER).classList.contains(CLS_CLOSE_SHOW)) {
+                addClass([this.cloneElement], CLS_CLOSE_SHOW);
+            }
+            removeClass([this.cloneElement.querySelector('.' + CLS_WRAP)], 'e-ripple');
+            if (!isNOU(this.cloneElement.querySelector('.e-ripple-element'))) {
+                remove(this.cloneElement.querySelector('.e-ripple-element'));
+            }
+            document.body.appendChild(this.cloneElement);
+        }
+        return this.cloneElement;
+    };
+    Tab.prototype.itemDragStart = function (e) {
+        var _this = this;
+        this.draggingItems = this.items.map(function (x) { return x; });
+        this.dragItem = e.element;
+        var dragArgs = {
+            draggedItem: e.element,
+            event: e.event,
+            target: e.target,
+            droppedItem: null,
+            index: this.getEleIndex(this.dragItem),
+            clonedElement: this.cloneElement,
+            cancel: false
+        };
+        this.trigger('onDragStart', dragArgs, function (tabitemDragArgs) {
+            if (tabitemDragArgs.cancel) {
+                detach(_this.cloneElement);
+            }
+            else {
+                _this.removeActiveClass();
+                addClass([_this.tbItems.querySelector('.' + CLS_INDICATOR)], CLS_HIDDEN);
+                _this.dragItem.querySelector('.' + CLS_WRAP).style.visibility = 'hidden';
+            }
+        });
+    };
+    Tab.prototype.dragAction = function (dropItem, dragsIndex, dropIndex) {
+        if (this.items.length > 0) {
+            var item = this.draggingItems[dragsIndex];
+            this.draggingItems.splice(dragsIndex, 1);
+            this.draggingItems.splice(dropIndex, 0, item);
+        }
+        if (this.overflowMode === 'MultiRow') {
+            dropItem.parentNode.insertBefore(this.dragItem, dropItem.nextElementSibling);
+        }
+        if (dragsIndex > dropIndex) {
+            if (!(this.dragItem.parentElement).isSameNode(dropItem.parentElement)) {
+                if (this.overflowMode === 'Extended') {
+                    if (dropItem.isSameNode(dropItem.parentElement.lastChild)) {
+                        var popupContainer = this.dragItem.parentNode;
+                        dropItem.parentNode.insertBefore(this.dragItem, dropItem);
+                        popupContainer.insertBefore(dropItem.parentElement.lastChild, popupContainer.childNodes[0]);
+                    }
+                    else {
+                        this.dragItem.parentNode.insertBefore((dropItem.parentElement.lastChild), this.dragItem.parentElement.childNodes[0]);
+                        dropItem.parentNode.insertBefore(this.dragItem, dropItem);
+                    }
+                }
+                else {
+                    var lastEle = (dropItem.parentElement).lastChild;
+                    if (dropItem.isSameNode(lastEle)) {
+                        var popupContainer = this.dragItem.parentNode;
+                        dropItem.parentNode.insertBefore(this.dragItem, dropItem);
+                        popupContainer.insertBefore(lastEle, popupContainer.childNodes[0]);
+                    }
+                    else {
+                        this.dragItem.parentNode.insertBefore((dropItem.parentElement).lastChild, this.dragItem.parentElement.childNodes[0]);
+                        dropItem.parentNode.insertBefore(this.dragItem, dropItem);
+                    }
+                }
+            }
+            else {
+                this.dragItem.parentNode.insertBefore(this.dragItem, dropItem);
+            }
+        }
+        if (dragsIndex < dropIndex) {
+            if (!(this.dragItem.parentElement).isSameNode(dropItem.parentElement)) {
+                if (this.overflowMode === 'Extended') {
+                    this.dragItem.parentElement.appendChild(dropItem.parentElement.firstElementChild);
+                    dropItem.parentNode.insertBefore(this.dragItem, dropItem.nextSibling);
+                }
+                else {
+                    this.dragItem.parentNode.insertBefore((dropItem.parentElement).lastChild, this.dragItem.parentElement.childNodes[0]);
+                    dropItem.parentNode.insertBefore(this.dragItem, dropItem);
+                }
+            }
+            else {
+                this.dragItem.parentNode.insertBefore(this.dragItem, dropItem.nextElementSibling);
             }
         }
     };
+    Tab.prototype.itemDragStop = function (e) {
+        var _this = this;
+        detach(this.cloneElement);
+        this.cloneElement = null;
+        this.dragItem.querySelector('.' + CLS_WRAP).style.visibility = 'visible';
+        document.body.style.cursor = '';
+        var dragStopArgs = {
+            draggedItem: this.dragItem,
+            event: e.event,
+            target: e.target,
+            droppedItem: this.tbItem[this.droppedIndex],
+            clonedElement: null,
+            index: this.droppedIndex,
+            cancel: false
+        };
+        this.trigger('dragged', dragStopArgs, function (tabItemDropArgs) {
+            if (tabItemDropArgs.cancel) {
+                _this.refresh();
+            }
+            else {
+                if (_this.items.length > 0 && _this.draggingItems.length > 0) {
+                    _this.items = _this.draggingItems;
+                    _this.selectedItem = _this.droppedIndex;
+                    _this.refresh();
+                }
+                else {
+                    _this.dragItem.querySelector('.' + CLS_WRAP).style.visibility = '';
+                    removeClass([_this.tbItems.querySelector('.' + CLS_INDICATOR)], CLS_HIDDEN);
+                    _this.selectTab(_this.droppedIndex, null, true);
+                }
+            }
+        });
+        this.dragItem = null;
+    };
     /**
      * Enables or disables the specified Tab item. On passing value as `false`, the item will be disabled.
-     * @param  {number} index - Index value of target Tab item.
-     * @param  {boolean} value - Boolean value that determines whether the command should be enabled or disabled.
+     *
+     * @param {number} index - Index value of target Tab item.
+     * @param {boolean} value - Boolean value that determines whether the command should be enabled or disabled.
      * By default, isEnable is true.
-     * @returns void.
+     * @returns {void}.
      */
     Tab.prototype.enableTab = function (index, value) {
         var tbItems = selectAll('.' + CLS_TB_ITEM, this.element)[index];
@@ -1236,11 +1716,11 @@ var Tab = /** @class */ (function (_super) {
         }
         if (value === true) {
             tbItems.classList.remove(CLS_DISABLE, CLS_OVERLAY);
-            tbItems.firstChild.setAttribute('tabindex', '-1');
+            tbItems.firstElementChild.setAttribute('tabindex', tbItems.firstElementChild.getAttribute('data-tabindex'));
         }
         else {
             tbItems.classList.add(CLS_DISABLE, CLS_OVERLAY);
-            tbItems.firstChild.removeAttribute('tabindex');
+            tbItems.firstElementChild.removeAttribute('tabindex');
             if (tbItems.classList.contains(CLS_ACTIVE)) {
                 this.select(index + 1);
             }
@@ -1249,112 +1729,188 @@ var Tab = /** @class */ (function (_super) {
             this.items[index].disabled = !value;
             this.dataBind();
         }
-        tbItems.setAttribute('aria-disabled', (value === true) ? 'false' : 'true');
+        tbItems.firstElementChild.setAttribute('aria-disabled', (value === true) ? 'false' : 'true');
     };
     /**
      * Adds new items to the Tab that accepts an array as Tab items.
-     * @param  {TabItemsModel[]} items - An array of item that is added to the Tab.
-     * @param  {number} index - Number value that determines where the items to be added. By default, index is 0.
-     * @returns void.
+     *
+     * @param {TabItemModel[]} items - An array of item that is added to the Tab.
+     * @param {number} index - Number value that determines where the items to be added. By default, index is 0.
+     * @returns {void}.
      */
     Tab.prototype.addTab = function (items, index) {
         var _this = this;
-        var lastEleIndex = 0;
+        var addArgs = { addedItems: items, cancel: false };
         if (!this.isReplace) {
-            this.trigger('adding', { addedItems: items });
+            this.trigger('adding', addArgs, function (tabAddingArgs) {
+                if (!tabAddingArgs.cancel) {
+                    _this.addingTabContent(items, index);
+                }
+            });
         }
+        else {
+            this.addingTabContent(items, index);
+        }
+        if (this.isReact) {
+            this.renderReactTemplates();
+        }
+    };
+    Tab.prototype.addingTabContent = function (items, index) {
+        var _this = this;
+        var lastEleIndex = 0;
         this.hdrEle = select('.' + CLS_HEADER, this.element);
         if (isNOU(this.hdrEle)) {
             this.items = items;
             this.reRenderItems();
-            return;
-        }
-        var itemsCount = selectAll('.' + CLS_TB_ITEM, this.element).length;
-        if (itemsCount !== 0) {
-            lastEleIndex = this.lastIndex + 1;
-        }
-        if (isNOU(index)) {
-            index = itemsCount - 1;
-        }
-        if (itemsCount < index || index < 0 || isNaN(index)) {
-            return;
-        }
-        if (itemsCount === 0 && !isNOU(this.hdrEle)) {
-            this.hdrEle.style.display = '';
-        }
-        if (!isNOU(this.bdrLine)) {
-            this.bdrLine.classList.add(CLS_HIDDEN);
-        }
-        this.tbItems = select('.' + CLS_HEADER + ' .' + CLS_TB_ITEMS, this.element);
-        this.isAdd = true;
-        var tabItems = this.parseObject(items, index);
-        this.isAdd = false;
-        var i = 0;
-        var textValue;
-        items.forEach(function (item, place) {
-            textValue = item.header.text;
-            if (!((isNOU(item.header) || isNOU(textValue) || (textValue.length === 0) && isNOU(item.header.iconCss)))) {
-                _this.items.splice((index + i), 0, item);
-                i++;
-            }
-            if (_this.isTemplate && !isNOU(item.header) && !isNOU(item.header.text)) {
-                var no = lastEleIndex + place;
-                var ele = _this.createElement('div', {
-                    id: CLS_CONTENT + '_' + no, className: CLS_ITEM, attrs: { role: 'tabpanel', 'aria-labelledby': CLS_ITEM + '_' + no }
-                });
-                _this.cntEle.insertBefore(ele, _this.cntEle.children[(index + place)]);
-                var eleTrg = _this.getTrgContent(_this.cntEle, no.toString());
-                _this.getContent(eleTrg, item.content, 'render');
-            }
-        });
-        this.tbObj.addItems(tabItems, index);
-        if (!this.isReplace) {
-            this.trigger('added', { addedItems: items });
-        }
-        if (this.selectedItem === index) {
-            this.select(index);
+            this.bindDraggable();
         }
         else {
-            this.setActiveBorder();
+            var itemsCount = selectAll('.e-tab-header .' + CLS_TB_ITEM, this.element).length;
+            if (itemsCount !== 0) {
+                lastEleIndex = this.lastIndex + 1;
+            }
+            if (isNOU(index)) {
+                index = itemsCount - 1;
+            }
+            if (itemsCount < index || index < 0 || isNaN(index)) {
+                return;
+            }
+            if (itemsCount === 0 && !isNOU(this.hdrEle)) {
+                this.hdrEle.style.display = '';
+            }
+            if (!isNOU(this.bdrLine)) {
+                this.bdrLine.classList.add(CLS_HIDDEN);
+            }
+            this.tbItems = select('.' + CLS_TB_ITEMS, this.getTabHeader());
+            this.isAdd = true;
+            var tabItems_2 = this.parseObject(items, index);
+            this.isAdd = false;
+            var i_1 = 0;
+            var textValue_1;
+            items.forEach(function (item, place) {
+                textValue_1 = item.headerTemplate || item.header.text;
+                if (!(isNOU(item.headerTemplate || item.header) || isNOU(textValue_1) ||
+                    (textValue_1.length === 0) && !isNOU(item.header) && isNOU(item.header.iconCss))) {
+                    if (tabItems_2[place]) {
+                        if (isNOU(item.id)) {
+                            item.id = CLS_ITEM + _this.tabId + '_' + TABITEMPREFIX + (lastEleIndex + place).toString();
+                        }
+                        tabItems_2[place].htmlAttributes['data-id'] = item.id;
+                    }
+                    _this.items.splice((index + i_1), 0, item);
+                    i_1++;
+                }
+                if (_this.isTemplate && !isNOU(item.header) && !isNOU(item.header.text)) {
+                    var no = lastEleIndex + place;
+                    var ele = _this.createElement('div', {
+                        id: CLS_CONTENT + _this.tabId + '_' + no, className: CLS_ITEM,
+                        attrs: { role: 'tabpanel', 'aria-labelledby': CLS_ITEM + '_' + no }
+                    });
+                    _this.cntEle.insertBefore(ele, _this.cntEle.children[(index + place)]);
+                    var eleTrg = _this.getTrgContent(_this.cntEle, no.toString());
+                    _this.getContent(eleTrg, item.content, 'render', index);
+                }
+            });
+            this.tbObj.addItems(tabItems_2, index);
+            if (!this.isReplace) {
+                this.trigger('added', { addedItems: items });
+            }
+            if (this.selectedItem === index) {
+                this.select(index);
+            }
+            else {
+                this.setActiveBorder();
+                this.tbItem = selectAll('.' + CLS_TB_ITEM, this.getTabHeader());
+            }
+            this.bindDraggable();
         }
     };
     /**
      * Removes the items in the Tab from the specified index.
-     * @param  {number} index - Index of target item that is going to be removed.
-     * @returns void.
+     *
+     * @param {number} index - Index of target item that is going to be removed.
+     * @returns {void}.
      */
     Tab.prototype.removeTab = function (index) {
+        var _this = this;
         var trg = selectAll('.' + CLS_TB_ITEM, this.element)[index];
-        var removeArgs = { removedItem: trg, removedIndex: index };
-        this.trigger('removing', removeArgs);
         if (isNOU(trg)) {
             return;
         }
-        this.tbObj.removeItems(index);
-        this.items.splice(index, 1);
-        this.itemIndexArray.splice(index, 1);
-        this.refreshActiveBorder();
-        var cntTrg = select('#' + CLS_CONTENT + '_' + this.extIndex(trg.id), select('.' + CLS_CONTENT, this.element));
-        if (!isNOU(cntTrg)) {
-            detach(cntTrg);
-        }
-        this.trigger('removed', removeArgs);
-        if (trg.classList.contains(CLS_ACTIVE)) {
-            index = (index > selectAll('.' + CLS_TB_ITEM + ':not(.' + CLS_TB_POPUP + ')', this.element).length - 1) ? index - 1 : index;
-            this.enableAnimation = false;
-            this.selectedItem = index;
-            this.select(index);
-        }
-        if (selectAll('.' + CLS_TB_ITEM, this.element).length === 0) {
-            this.hdrEle.style.display = 'none';
-        }
-        this.enableAnimation = true;
+        var removeArgs = { removedItem: trg, removedIndex: index, cancel: false };
+        this.trigger('removing', removeArgs, function (tabRemovingArgs) {
+            if (!tabRemovingArgs.cancel) {
+                _this.tbObj.removeItems(index);
+                if (_this.allowDragAndDrop && (index !== Array.prototype.indexOf.call(_this.itemIndexArray, trg.id))) {
+                    index = Array.prototype.indexOf.call(_this.itemIndexArray, trg.id);
+                }
+                var targetEleIndex = _this.itemIndexArray.indexOf(trg.id);
+                _this.items.splice(targetEleIndex, 1);
+                _this.itemIndexArray.splice(targetEleIndex, 1);
+                _this.refreshActiveBorder();
+                var cntTrg = select('#' + CLS_CONTENT + _this.tabId + '_' + _this.extIndex(trg.id), select('.' + CLS_CONTENT, _this.element));
+                if (!isNOU(cntTrg)) {
+                    var registeredTemplate = _this.registeredTemplate;
+                    var portal = _this.portals;
+                    if (registeredTemplate && registeredTemplate.content) {
+                        var templateToClear = [];
+                        for (var i_2 = 0; i_2 < registeredTemplate.content.length; i_2++) {
+                            var registeredItem = registeredTemplate.content[i_2].rootNodes[0];
+                            var closestItem_1 = closest(registeredItem, '.' + CLS_ITEM);
+                            if (!isNullOrUndefined(registeredItem) && closestItem_1 === cntTrg) {
+                                templateToClear.push(registeredTemplate.content[i_2]);
+                                break;
+                            }
+                        }
+                        if (templateToClear.length > 0) {
+                            _this.clearTemplate(['content'], templateToClear);
+                        }
+                    }
+                    else if (portal) {
+                        for (var i = 0; i < portal.length; i++) {
+                            var portalItem = portal[i];
+                            var closestItem = closest(portalItem.containerInfo, '.' + CLS_ITEM);
+                            if (!isNullOrUndefined(portalItem) && closestItem === cntTrg) {
+                                _this.clearTemplate(['content'], i);
+                                break;
+                            }
+                        }
+                    }
+                    detach(cntTrg);
+                }
+                _this.trigger('removed', tabRemovingArgs);
+                if (_this.draggableItems && _this.draggableItems.length > 0) {
+                    _this.draggableItems[index].destroy();
+                    _this.draggableItems[index] = null;
+                    _this.draggableItems.splice(index, 1);
+                }
+                if (trg.classList.contains(CLS_ACTIVE)) {
+                    index = (index > selectAll('.' + CLS_TB_ITEM + ':not(.' + CLS_TB_POPUP + ')', _this.element).length - 1) ? index - 1 : index;
+                    _this.enableAnimation = false;
+                    _this.selectedItem = index;
+                    _this.select(index);
+                }
+                else if (index !== _this.selectedItem) {
+                    if (index < _this.selectedItem) {
+                        index = _this.itemIndexArray.indexOf(_this.tbItem[_this.selectedItem].id);
+                        _this.setProperties({ selectedItem: index > -1 ? index : _this.selectedItem }, true);
+                        _this.prevIndex = _this.selectedItem;
+                    }
+                    _this.tbItem = selectAll('.' + CLS_TB_ITEM, _this.getTabHeader());
+                }
+                if (selectAll('.' + CLS_TB_ITEM, _this.element).length === 0) {
+                    _this.hdrEle.style.display = 'none';
+                }
+                _this.enableAnimation = true;
+            }
+        });
     };
     /**
      * Shows or hides the Tab that is in the specified index.
-     * @param  {number} index - Index value of target item.
-     * @param  {boolean} value - Based on this Boolean value, item will be hide (false) or show (true). By default, value is true.
-     * @returns void.
+     *
+     * @param {number} index - Index value of target item.
+     * @param {boolean} value - Based on this Boolean value, item will be hide (false) or show (true). By default, value is true.
+     * @returns {void}.
      */
     Tab.prototype.hideTab = function (index, value) {
         var items;
@@ -1402,22 +1958,35 @@ var Tab = /** @class */ (function (_super) {
         else {
             this.element.classList.remove(CLS_HIDDEN);
             items = selectAll('.' + CLS_TB_ITEM + ':not(.' + CLS_HIDDEN + ')', this.tbItems);
+            item.classList.remove(CLS_HIDDEN);
             if (items.length === 0) {
                 this.select(index);
             }
-            item.classList.remove(CLS_HIDDEN);
         }
         this.setActiveBorder();
         item.setAttribute('aria-hidden', '' + value);
+        if (this.overflowMode === 'Popup' && this.tbObj) {
+            this.tbObj.refreshOverflow();
+        }
+    };
+    Tab.prototype.selectTab = function (args, event, isInteracted) {
+        if (event === void 0) { event = null; }
+        if (isInteracted === void 0) { isInteracted = false; }
+        this.isInteracted = isInteracted;
+        this.select(args, event);
     };
     /**
      * Specifies the index or HTMLElement to select an item from the Tab.
-     * @param  {number | HTMLElement} args - Index or DOM element is used for selecting an item from the Tab.
-     * @returns void.
+     *
+     * @param {number | HTMLElement} args - Index or DOM element is used for selecting an item from the Tab.
+     * @param {Event} event - An event which takes place in DOM.
+     * @returns {void}
      */
-    Tab.prototype.select = function (args) {
-        this.tbItems = select('.' + CLS_HEADER + ' .' + CLS_TB_ITEMS, this.element);
-        this.tbItem = selectAll('.' + CLS_HEADER + ' .' + CLS_TB_ITEM, this.element);
+    Tab.prototype.select = function (args, event) {
+        var _this = this;
+        var tabHeader = this.getTabHeader();
+        this.tbItems = select('.' + CLS_TB_ITEMS, tabHeader);
+        this.tbItem = selectAll('.' + CLS_TB_ITEM, tabHeader);
         this.content = select('.' + CLS_CONTENT, this.element);
         this.prevItem = this.tbItem[this.prevIndex];
         if (isNOU(this.selectedItem) || (this.selectedItem < 0) || (this.tbItem.length <= this.selectedItem) || isNaN(this.selectedItem)) {
@@ -1434,29 +2003,42 @@ var Tab = /** @class */ (function (_super) {
             this.selectingID = this.extIndex(trg.id);
         }
         if (!isNOU(this.prevItem) && !this.prevItem.classList.contains(CLS_DISABLE)) {
-            this.prevItem.children.item(0).setAttribute('tabindex', '-1');
+            this.prevItem.children.item(0).setAttribute('tabindex', this.prevItem.firstElementChild.getAttribute('tabindex'));
         }
         var eventArg = {
+            event: event,
             previousItem: this.prevItem,
             previousIndex: this.prevIndex,
             selectedItem: this.tbItem[this.selectedItem],
             selectedIndex: this.selectedItem,
-            selectedContent: !isNOU(this.content) ? select('#' + CLS_CONTENT + '_' + this.selectedID, this.content) : null,
+            selectedContent: !isNOU(this.content) ?
+                select('#' + CLS_CONTENT + this.tabId + '_' + this.selectedID, this.content) : null,
             selectingItem: trg,
             selectingIndex: args,
-            selectingContent: !isNOU(this.content) ? select('#' + CLS_CONTENT + '_' + this.selectingID, this.content) : null,
-            isSwiped: this.isSwipeed
+            selectingContent: !isNOU(this.content) ?
+                select('#' + CLS_CONTENT + this.tabId + '_' + this.selectingID, this.content) : null,
+            isSwiped: this.isSwipeed,
+            isInteracted: this.isInteracted,
+            cancel: false
         };
-        if (!this.initRender || this.selectedItem !== 0) {
-            this.trigger('selecting', eventArg);
+        if (!this.initRender) {
+            this.trigger('selecting', eventArg, function (selectArgs) {
+                if (!selectArgs.cancel) {
+                    _this.selectingContent(args, _this.isInteracted);
+                }
+            });
         }
-        if (eventArg.cancel) {
-            return;
+        else {
+            this.selectingContent(args, this.isInteracted);
         }
+        this.isInteracted = false;
+    };
+    Tab.prototype.selectingContent = function (args, isInteracted) {
         if (typeof args === 'number') {
-            if (!isNOU(this.tbItem[args]) && this.tbItem[args].classList.contains(CLS_DISABLE)) {
+            if (!isNOU(this.tbItem[args]) && (this.tbItem[args].classList.contains(CLS_DISABLE) ||
+                this.tbItem[args].classList.contains(CLS_HIDDEN))) {
                 for (var i = args + 1; i < this.items.length; i++) {
-                    if (this.items[i].disabled === false) {
+                    if (this.items[i].disabled === false && this.items[i].visible === true) {
                         args = i;
                         break;
                     }
@@ -1467,26 +2049,54 @@ var Tab = /** @class */ (function (_super) {
             }
             if (this.tbItem.length > args && args >= 0 && !isNaN(args)) {
                 this.prevIndex = this.selectedItem;
-                if (this.tbItem[args].classList.contains(CLS_TB_POPUP)) {
-                    this.setActive(this.popupHandler(this.tbItem[args]));
+                this.prevItem = this.tbItem[this.prevIndex];
+                if (this.tbItem[args].classList.contains(CLS_TB_POPUP) && this.reorderActiveTab) {
+                    this.setActive(this.popupHandler(this.tbItem[args]), null, isInteracted);
+                    if ((!isNOU(this.items) && this.items.length > 0) && this.allowDragAndDrop) {
+                        this.tbItem = selectAll('.' + CLS_TB_ITEMS + ' .' + CLS_TB_ITEM, this.hdrEle);
+                        var item = this.items[args];
+                        this.items.splice(args, 1);
+                        this.items.splice(this.tbItem.length - 1, 0, item);
+                        var itemId = this.itemIndexArray[args];
+                        this.itemIndexArray.splice(args, 1);
+                        this.itemIndexArray.splice(this.tbItem.length - 1, 0, itemId);
+                    }
                 }
                 else {
-                    this.setActive(args);
+                    this.setActive(args, null, isInteracted);
                 }
             }
             else {
-                this.setActive(0);
+                this.setActive(0, null, isInteracted);
             }
         }
         else if (args instanceof (HTMLElement)) {
-            this.setActive(this.getEleIndex(args));
+            this.setActive(this.getEleIndex(args), null, isInteracted);
         }
     };
+    /**
+     * Gets the item index from the Tab.
+     *
+     * @param  {string} tabItemId - Item ID is used for getting index from the Tab.
+     * @returns {number} - It returns item index.
+     */
+    Tab.prototype.getItemIndex = function (tabItemId) {
+        var tabIndex;
+        for (var i = 0; i < this.tbItem.length; i++) {
+            var value = this.tbItem[i].getAttribute('data-id');
+            if (tabItemId === value) {
+                tabIndex = i;
+                break;
+            }
+        }
+        return tabIndex;
+    };
     /**
      * Specifies the value to disable/enable the Tab component.
      * When set to `true`, the component will be disabled.
+     *
      * @param  {boolean} value - Based on this Boolean value, Tab will be enabled (false) or disabled (true).
-     * @returns void.
+     * @returns {void}.
      */
     Tab.prototype.disable = function (value) {
         this.setCssClass(this.element, CLS_DISABLE, value);
@@ -1494,14 +2104,16 @@ var Tab = /** @class */ (function (_super) {
     };
     /**
      * Get the properties to be maintained in the persisted state.
-     * @returns string
+     *
+     * @returns {string} - It returns the persisted state.
      */
     Tab.prototype.getPersistData = function () {
         return this.addOnPersist(['selectedItem', 'actEleId']);
     };
     /**
      * Returns the current module name.
-     * @returns string
+     *
+     * @returns {string} - It returns the current module name.
      * @private
      */
     Tab.prototype.getModuleName = function () {
@@ -1509,12 +2121,14 @@ var Tab = /** @class */ (function (_super) {
     };
     /**
      * Gets called when the model property changes.The data that describes the old and new values of the property that changed.
-     * @param  {TabModel} newProp
-     * @param  {TabModel} oldProp
-     * @returns void
+     *
+     * @param  {TabModel} newProp - It contains the new value of data.
+     * @param  {TabModel} oldProp - It contains the old value of data.
+     * @returns {void}
      * @private
      */
     Tab.prototype.onPropertyChanged = function (newProp, oldProp) {
+        var _this = this;
         for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
             var prop = _a[_i];
             switch (prop) {
@@ -1526,7 +2140,21 @@ var Tab = /** @class */ (function (_super) {
                     this.setContentHeight(false);
                     break;
                 case 'cssClass':
-                    this.setCssClass(this.element, newProp.cssClass, true);
+                    var headerEle = this.element.querySelector('.' + CLS_HEADER);
+                    if (oldProp.cssClass !== '' && !isNullOrUndefined(oldProp.cssClass)) {
+                        this.setCssClass(this.element, oldProp.cssClass, false);
+                        this.setCssClass(this.element, newProp.cssClass, true);
+                        if (!isNullOrUndefined(headerEle)) {
+                            this.setCssClass(headerEle, oldProp.cssClass, false);
+                            this.setCssClass(headerEle, newProp.cssClass, true);
+                        }
+                    }
+                    else {
+                        this.setCssClass(this.element, newProp.cssClass, true);
+                        if (!isNullOrUndefined(headerEle)) {
+                            this.setCssClass(headerEle, newProp.cssClass, true);
+                        }
+                    }
                     break;
                 case 'items':
                     this.evalOnPropertyChangeItems(newProp, oldProp);
@@ -1534,6 +2162,9 @@ var Tab = /** @class */ (function (_super) {
                 case 'showCloseButton':
                     this.setCloseButton(newProp.showCloseButton);
                     break;
+                case 'reorderActiveTab':
+                    this.refreshActiveTabBorder();
+                    break;
                 case 'selectedItem':
                     this.selectedItem = oldProp.selectedItem;
                     this.select(newProp.selectedItem);
@@ -1547,15 +2178,165 @@ var Tab = /** @class */ (function (_super) {
                 case 'overflowMode':
                     this.tbObj.overflowMode = newProp.overflowMode;
                     this.tbObj.dataBind();
-                    this.refreshActElePosition();
+                    this.refreshActiveTabBorder();
                     break;
                 case 'heightAdjustMode':
                     this.setContentHeight(false);
                     this.select(this.selectedItem);
                     break;
+                case 'scrollStep':
+                    if (this.tbObj) {
+                        this.tbObj.scrollStep = this.scrollStep;
+                    }
+                    break;
+                case 'allowDragAndDrop':
+                    this.bindDraggable();
+                    break;
+                case 'dragArea':
+                    if (this.allowDragAndDrop) {
+                        this.draggableItems.forEach(function (item) {
+                            item.dragArea = _this.dragArea;
+                        });
+                        this.refresh();
+                    }
+                    break;
             }
         }
     };
+    /**
+     * To refresh the active tab contents.
+     *
+     * @returns {void}
+     */
+    Tab.prototype.refreshActiveTab = function () {
+        if (this.isReact && this.isTemplate) {
+            this.clearTemplate();
+        }
+        if (!this.isTemplate) {
+            if (this.element.querySelector('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE)) {
+                detach(this.element.querySelector('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE).children[0]);
+                detach(this.element.querySelector('.' + CLS_CONTENT).querySelector('.' + CLS_ACTIVE).children[0]);
+                var item = this.items[this.selectedItem];
+                var pos = (isNOU(item.header) || isNOU(item.header.iconPosition)) ? '' : item.header.iconPosition;
+                var css = (isNOU(item.header) || isNOU(item.header.iconCss)) ? '' : item.header.iconCss;
+                var text = item.headerTemplate || item.header.text;
+                var txtWrap = this.createElement('div', { className: CLS_TEXT, attrs: { 'role': 'presentation' } });
+                if (!isNOU(text.tagName)) {
+                    txtWrap.appendChild(text);
+                }
+                else {
+                    this.headerTextCompile(txtWrap, text, this.selectedItem);
+                }
+                var tEle = void 0;
+                var icon = this.createElement('span', {
+                    className: CLS_ICONS + ' ' + CLS_TAB_ICON + ' ' + CLS_ICON + '-' + pos + ' ' + css
+                });
+                var tConts = this.createElement('div', { className: CLS_TEXT_WRAP });
+                tConts.appendChild(txtWrap);
+                if ((text !== '' && text !== undefined) && css !== '') {
+                    if ((pos === 'left' || pos === 'top')) {
+                        tConts.insertBefore(icon, tConts.firstElementChild);
+                    }
+                    else {
+                        tConts.appendChild(icon);
+                    }
+                    tEle = txtWrap;
+                    this.isIconAlone = false;
+                }
+                else {
+                    tEle = ((css === '') ? txtWrap : icon);
+                    if (tEle === icon) {
+                        detach(txtWrap);
+                        tConts.appendChild(icon);
+                        this.isIconAlone = true;
+                    }
+                }
+                var tabIndex = isNOU(item.tabIndex) ? '-1' : item.tabIndex.toString();
+                var wrapAtt = (item.disabled) ? {} : { tabIndex: tabIndex, 'data-tabindex': tabIndex, role: 'tab', 'aria-selected': 'true', 'aria-disabled': 'false' };
+                tConts.appendChild(this.btnCls.cloneNode(true));
+                var wraper = this.createElement('div', { className: CLS_WRAP, attrs: wrapAtt });
+                wraper.appendChild(tConts);
+                if (pos === 'top' || pos === 'bottom') {
+                    this.element.classList.add('e-vertical-icon');
+                }
+                this.element.querySelector('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE).appendChild(wraper);
+                var crElem = this.createElement('div');
+                var cnt = item.content;
+                var eleStr = void 0;
+                if (typeof cnt === 'string' || isNOU(cnt.innerHTML)) {
+                    if (typeof cnt === 'string' && this.enableHtmlSanitizer) {
+                        cnt = SanitizeHtmlHelper.sanitize(cnt);
+                    }
+                    if (cnt[0] === '.' || cnt[0] === '#') {
+                        if (document.querySelectorAll(cnt).length) {
+                            var eleVal = document.querySelector(cnt);
+                            eleStr = eleVal.outerHTML.trim();
+                            crElem.appendChild(eleVal);
+                            eleVal.style.display = '';
+                        }
+                        else {
+                            this.compileElement(crElem, cnt, 'content', this.selectedItem);
+                        }
+                    }
+                    else {
+                        this.compileElement(crElem, cnt, 'content', this.selectedItem);
+                    }
+                }
+                else {
+                    crElem.appendChild(cnt);
+                }
+                if (!isNOU(eleStr)) {
+                    if (this.templateEle.indexOf(cnt.toString()) === -1) {
+                        this.templateEle.push(cnt.toString());
+                    }
+                }
+                this.element.querySelector('.' + CLS_ITEM + '.' + CLS_ACTIVE).appendChild(crElem);
+            }
+        }
+        else {
+            var tabItems = this.element.querySelector('.' + CLS_TB_ITEMS);
+            var element = this.element.querySelector('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE);
+            var index = this.getIndexFromEle(element.id);
+            var header = element.innerText;
+            var detachContent = this.element.querySelector('.' + CLS_CONTENT).querySelector('.' + CLS_ACTIVE).children[0];
+            var mainContents = detachContent.innerHTML;
+            detach(element);
+            detach(detachContent);
+            var attr = {
+                className: CLS_TB_ITEM + ' ' + CLS_TEMPLATE + ' ' + CLS_ACTIVE, id: CLS_ITEM + this.tabId + '_' + index
+            };
+            var txtString = this.createElement('span', {
+                className: CLS_TEXT, innerHTML: header, attrs: { 'role': 'presentation' }
+            }).outerHTML;
+            var conte = this.createElement('div', {
+                className: CLS_TEXT_WRAP, innerHTML: txtString + this.btnCls.outerHTML
+            }).outerHTML;
+            var tabIndex = element.firstElementChild.getAttribute('data-tabindex');
+            var wrap = this.createElement('div', {
+                className: CLS_WRAP, innerHTML: conte,
+                attrs: { tabIndex: tabIndex, 'data-tabindex': tabIndex, role: 'tab', 'aria-controls': CLS_CONTENT + this.tabId + '_' + index, 'aria-selected': 'true', 'aria-disabled': 'false' }
+            });
+            tabItems.insertBefore(this.createElement('div', attr), tabItems.children[index + 1]);
+            this.element.querySelector('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE).appendChild(wrap);
+            var crElem = this.createElement('div', { innerHTML: mainContents });
+            this.element.querySelector('.' + CLS_CONTENT).querySelector('.' + CLS_ACTIVE).appendChild(crElem);
+        }
+        if (this.isReact) {
+            this.renderReactTemplates();
+        }
+    };
+    /**
+     * To refresh the active tab indicator.
+     *
+     * @returns {void}
+     */
+    Tab.prototype.refreshActiveTabBorder = function () {
+        var activeEle = select('.' + CLS_TB_ITEM + '.' + CLS_TB_POPUP + '.' + CLS_ACTIVE, this.element);
+        if (!isNOU(activeEle) && this.reorderActiveTab) {
+            this.select(this.getEleIndex(activeEle));
+        }
+        this.refreshActiveBorder();
+    };
     __decorate([
         Collection([], TabItem)
     ], Tab.prototype, "items", void 0);
@@ -1581,14 +2362,29 @@ var Tab = /** @class */ (function (_super) {
         Property('Scrollable')
     ], Tab.prototype, "overflowMode", void 0);
     __decorate([
-        Property(false)
-    ], Tab.prototype, "enableRtl", void 0);
+        Property('Dynamic')
+    ], Tab.prototype, "loadOn", void 0);
     __decorate([
         Property(false)
     ], Tab.prototype, "enablePersistence", void 0);
+    __decorate([
+        Property(false)
+    ], Tab.prototype, "enableHtmlSanitizer", void 0);
     __decorate([
         Property(false)
     ], Tab.prototype, "showCloseButton", void 0);
+    __decorate([
+        Property(true)
+    ], Tab.prototype, "reorderActiveTab", void 0);
+    __decorate([
+        Property()
+    ], Tab.prototype, "scrollStep", void 0);
+    __decorate([
+        Property()
+    ], Tab.prototype, "dragArea", void 0);
+    __decorate([
+        Property(false)
+    ], Tab.prototype, "allowDragAndDrop", void 0);
     __decorate([
         Complex({}, TabAnimationSettings)
     ], Tab.prototype, "animation", void 0);
@@ -1613,6 +2409,15 @@ var Tab = /** @class */ (function (_super) {
     __decorate([
         Event()
     ], Tab.prototype, "removed", void 0);
+    __decorate([
+        Event()
+    ], Tab.prototype, "onDragStart", void 0);
+    __decorate([
+        Event()
+    ], Tab.prototype, "dragging", void 0);
+    __decorate([
+        Event()
+    ], Tab.prototype, "dragged", void 0);
     __decorate([
         Event()
     ], Tab.prototype, "destroyed", void 0);