@syncfusion/ej2-navigations 17.2.55-1205479 → 17.3.14-96615

package/src/tab/tab.js

@@ -1,31 +1,32 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __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; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    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;
-};
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __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; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { 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, remove } from '@syncfusion/ej2-base';
 import { EventHandler, rippleEffect, Touch, compile, Animation } from '@syncfusion/ej2-base';
-import { updateBlazorTemplate, isBlazor } from '@syncfusion/ej2-base';
+import { updateBlazorTemplate, resetBlazorTemplate, isBlazor, getRandomId } 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';
@@ -64,6 +65,7 @@ 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 TabActionSettings = /** @class */ (function (_super) {
     __extends(TabActionSettings, _super);
     function TabActionSettings() {
@@ -248,6 +250,7 @@ var Tab = /** @class */ (function (_super) {
      */
     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;
@@ -298,7 +301,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);
@@ -316,12 +319,13 @@ var Tab = /** @class */ (function (_super) {
                 while (this.hdrEle.firstElementChild) {
                     detach(this.hdrEle.firstElementChild);
                 }
-                this.hdrEle.appendChild(this.createElement('div', { className: CLS_ITEMS }));
+                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,
+                        attrs: { role: 'tab', 'aria-controls': CLS_CONTENT + _this.tabId + '_' + index, 'aria-selected': 'false' }
                     };
                     var txt = _this.createElement('span', {
                         className: CLS_TEXT, innerHTML: item, attrs: { 'role': 'presentation' }
@@ -330,8 +334,8 @@ var Tab = /** @class */ (function (_super) {
                         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);
+                    tabItems_1.appendChild(_this.createElement('div', attr));
+                    selectAll('.' + CLS_ITEM, tabItems_1)[index].appendChild(wrap);
                 });
             }
         }
@@ -346,6 +350,7 @@ var Tab = /** @class */ (function (_super) {
         this.tbObj.isStringTemplate = true;
         this.tbObj.createElement = this.createElement;
         this.tbObj.appendTo(this.hdrEle);
+        attributes(this.hdrEle, { 'aria-label': 'tab-header' });
         for (var i = 0; i < this.items.length; i++) {
             var item = this.items[i];
             if (item.headerTemplate && isBlazor() && !this.isStringTemplate &&
@@ -365,8 +370,8 @@ var Tab = /** @class */ (function (_super) {
             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;
+                    attributes(contents.item(i), { 'role': 'tabpanel', 'aria-labelledby': CLS_ITEM + this.tabId + '_' + i });
+                    contents.item(i).id = CLS_CONTENT + this.tabId + '_' + i;
                 }
             }
         }
@@ -433,13 +438,13 @@ var Tab = /** @class */ (function (_super) {
             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, role: 'tab', 'aria-selected': 'false'
             };
             var tItem = { htmlAttributes: attrObj, template: wrap };
             tItem.cssClass = item.cssClass + ' ' + disabled + ' ' + ((css !== '') ? 'e-i' + pos : '') + ' ' + ((!txtEmpty) ? CLS_ICON : '');
@@ -457,14 +462,11 @@ var Tab = /** @class */ (function (_super) {
         (this.isIconAlone) ? this.element.classList.add(CLS_ICON_TAB) : 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];
-        var selectEle = select('.' + CLS_HEADER, this.element);
-        if (this.headerPlacement === 'Bottom') {
-            hdrActEle = selectAll(':root .' + CLS_HEADER + ' .' + CLS_TB_ITEM + '.' + CLS_ACTIVE, selectEle)[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); });
         }
     };
     Tab.prototype.checkPopupOverflow = function (ele) {
@@ -523,8 +525,10 @@ var Tab = /** @class */ (function (_super) {
         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;
@@ -532,8 +536,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;
@@ -645,11 +651,24 @@ var Tab = /** @class */ (function (_super) {
             }
         }
     };
+    Tab.prototype.getTabHeader = function () {
+        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;
@@ -734,10 +753,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;
     };
@@ -785,7 +804,9 @@ var Tab = /** @class */ (function (_super) {
         this.select(this.selectedItem);
     };
     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 {
@@ -807,10 +828,13 @@ 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;
@@ -822,8 +846,9 @@ var Tab = /** @class */ (function (_super) {
             }
         }
         else if (this.heightAdjustMode === 'Fill') {
+            addClass([this.element], [CLS_FILL]);
             setStyle(this.element, { 'height': '100%' });
-            setStyle(this.cntEle, { 'height': 'auto' });
+            setStyle(this.cntEle, { 'height': '100%' });
         }
         else if (this.heightAdjustMode === 'Auto') {
             var cnt = selectAll('.' + CLS_CONTENT + ' > .' + CLS_ITEM, this.element);
@@ -839,8 +864,8 @@ 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);
@@ -868,18 +893,10 @@ 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 = select('.' + CLS_HEADER, this.element);
-            trg = select('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE, trgHdrEle);
-        }
-        else {
-            trgHdrEle = select('.' + CLS_HEADER, this.element);
-            trg = select('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE, this.element);
-        }
+        var trgHdrEle = this.getTabHeader();
+        var trg = select('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE, trgHdrEle);
         if (trg === null) {
             return;
         }
@@ -915,7 +932,7 @@ var Tab = /** @class */ (function (_super) {
         }
     };
     Tab.prototype.setActive = function (value) {
-        this.tbItem = selectAll('.' + CLS_HEADER + ' .' + CLS_TB_ITEM, this.element);
+        this.tbItem = selectAll('.' + CLS_TB_ITEM, this.getTabHeader());
         var trg = this.tbItem[value];
         if (value >= 0) {
             this.setProperties({ selectedItem: value }, true);
@@ -932,20 +949,20 @@ var Tab = /** @class */ (function (_super) {
             if (!isNOU(prev)) {
                 prev.removeAttribute('aria-controls');
             }
-            attributes(trg, { 'aria-controls': CLS_CONTENT + '_' + value });
+            attributes(trg, { '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');
         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);
                 }
@@ -957,8 +974,8 @@ 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);
@@ -980,7 +997,7 @@ var Tab = /** @class */ (function (_super) {
             previousIndex: this.prevIndex,
             selectedItem: trg,
             selectedIndex: value,
-            selectedContent: select('#' + CLS_CONTENT + '_' + this.selectingID, this.content),
+            selectedContent: select('#' + CLS_CONTENT + this.tabId + '_' + this.selectingID, this.content),
             isSwiped: this.isSwipeed
         };
         if (!this.initRender || this.selectedItem !== 0) {
@@ -989,7 +1006,7 @@ var Tab = /** @class */ (function (_super) {
     };
     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;
@@ -1096,9 +1113,9 @@ 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];
         }
@@ -1196,8 +1213,8 @@ var Tab = /** @class */ (function (_super) {
                 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);
+                var hdrItem = select('.' + CLS_TB_ITEMS + ' #' + CLS_ITEM + this.tabId + '_' + index, this.element);
+                var cntItem = select('.' + CLS_CONTENT + ' #' + CLS_CONTENT + this.tabId + '_' + index, this.element);
                 if (property === 'header' || property === 'headerTemplate') {
                     var icon = (isNOU(this.items[index].header) ||
                         isNOU(this.items[index].header.iconCss)) ? '' : this.items[index].header.iconCss;
@@ -1257,6 +1274,10 @@ var Tab = /** @class */ (function (_super) {
                 this.reRenderItems();
             }
             else {
+                var items = newProp.items;
+                for (var i = 0; i < items.length; i++) {
+                    this.resetBlazorTemplates(items[i], i);
+                }
                 this.setItems(newProp.items);
                 if (this.templateEle.length > 0) {
                     this.expTemplateContent();
@@ -1270,6 +1291,17 @@ var Tab = /** @class */ (function (_super) {
             }
         }
     };
+    Tab.prototype.resetBlazorTemplates = function (item, index) {
+        if (!isBlazor()) {
+            return;
+        }
+        if (item.headerTemplate && !this.isStringTemplate && (item.headerTemplate).indexOf('<div>Blazor') === 0) {
+            resetBlazorTemplate(this.element.id + index + '_' + 'headerTemplate', 'HeaderTemplate');
+        }
+        if (item.content && !this.isStringTemplate && item.content.indexOf('<div>Blazor') === 0) {
+            resetBlazorTemplate(this.element.id + index + '_' + 'content', 'ContentTemplate');
+        }
+    };
     /**
      * 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.
@@ -1344,7 +1376,7 @@ var Tab = /** @class */ (function (_super) {
             if (!isNOU(this.bdrLine)) {
                 this.bdrLine.classList.add(CLS_HIDDEN);
             }
-            this.tbItems = select('.' + CLS_HEADER + ' .' + CLS_TB_ITEMS, this.element);
+            this.tbItems = select('.' + CLS_TB_ITEMS, this.getTabHeader());
             this.isAdd = true;
             var tabItems = this.parseObject(items, index);
             this.isAdd = false;
@@ -1360,7 +1392,8 @@ var Tab = /** @class */ (function (_super) {
                 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 }
+                        id: CLS_CONTENT + _this.tabId + '_' + no, className: CLS_ITEM,
+                        attrs: { role: 'tabpanel', 'aria-labelledby': CLS_ITEM + _this.tabId + '_' + no }
                     });
                     _this.cntEle.insertBefore(ele, _this.cntEle.children[(index + place)]);
                     var eleTrg = _this.getTrgContent(_this.cntEle, no.toString());
@@ -1393,11 +1426,12 @@ var Tab = /** @class */ (function (_super) {
         var removeArgs = { removedItem: trg, removedIndex: index, cancel: false };
         this.trigger('removing', removeArgs, function (tabRemovingArgs) {
             if (!tabRemovingArgs.cancel) {
+                _this.resetBlazorTemplates(_this.items[index], index);
                 _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));
+                var cntTrg = select('#' + CLS_CONTENT + _this.tabId + '_' + _this.extIndex(trg.id), select('.' + CLS_CONTENT, _this.element));
                 if (!isNOU(cntTrg)) {
                     detach(cntTrg);
                 }
@@ -1483,8 +1517,9 @@ var Tab = /** @class */ (function (_super) {
      */
     Tab.prototype.select = function (args) {
         var _this = this;
-        this.tbItems = select('.' + CLS_HEADER + ' .' + CLS_TB_ITEMS, this.element);
-        this.tbItem = selectAll('.' + CLS_HEADER + ' .' + CLS_TB_ITEM, this.element);
+        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)) {
@@ -1508,10 +1543,12 @@ var Tab = /** @class */ (function (_super) {
             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,
+            selectingContent: !isNOU(this.content) ?
+                select('#' + CLS_CONTENT + this.tabId + '_' + this.selectingID, this.content) : null,
             isSwiped: this.isSwipeed,
             cancel: false
         };