@syncfusion/ej2-navigations
Version:
A package of Essential JS 2 navigation components such as Tree-view, Tab, Toolbar, Context-menu, and Accordion which is used to navigate from one page to another
1,188 lines • 114 kB
JavaScript
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, isNullOrUndefined, animationMode } 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 { 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';
var CLS_ITEM = 'e-item';
var CLS_TEMPLATE = 'e-template';
var CLS_RTL = 'e-rtl';
var CLS_ACTIVE = 'e-active';
var CLS_DISABLE = 'e-disable';
var CLS_HIDDEN = 'e-hidden';
var CLS_FOCUS = 'e-focused';
var CLS_ICONS = 'e-icons';
var CLS_ICON = 'e-icon';
var CLS_ICON_TAB = 'e-icon-tab';
var CLS_ICON_CLOSE = 'e-close-icon';
var CLS_CLOSE_SHOW = 'e-close-show';
var CLS_TEXT = 'e-tab-text';
var CLS_INDICATOR = 'e-indicator';
var CLS_WRAP = 'e-tab-wrap';
var CLS_TEXT_WRAP = 'e-text-wrap';
var CLS_TAB_ICON = 'e-tab-icon';
var CLS_TB_ITEMS = 'e-toolbar-items';
var CLS_TB_ITEM = 'e-toolbar-item';
var CLS_TB_POP = 'e-toolbar-pop';
var CLS_TB_POPUP = 'e-toolbar-popup';
var CLS_HOR_NAV = 'e-hor-nav';
var CLS_POPUP_OPEN = 'e-popup-open';
var CLS_POPUP_CLOSE = 'e-popup-close';
var CLS_PROGRESS = 'e-progress';
var CLS_IGNORE = 'e-ignore';
var CLS_OVERLAY = 'e-overlay';
var CLS_HSCRCNT = 'e-hscroll-content';
var CLS_VSCRCNT = 'e-vscroll-content';
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() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('SlideLeftIn')
], TabActionSettings.prototype, "effect", void 0);
__decorate([
Property(600)
], TabActionSettings.prototype, "duration", void 0);
__decorate([
Property('ease')
], TabActionSettings.prototype, "easing", void 0);
return TabActionSettings;
}(ChildProperty));
export { TabActionSettings };
/**
* Objects used for configuring the Tab animation properties.
*/
var TabAnimationSettings = /** @class */ (function (_super) {
__extends(TabAnimationSettings, _super);
function TabAnimationSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Complex({ effect: 'SlideLeftIn', duration: 600, easing: 'ease' }, TabActionSettings)
], TabAnimationSettings.prototype, "previous", void 0);
__decorate([
Complex({ effect: 'SlideRightIn', duration: 600, easing: 'ease' }, TabActionSettings)
], TabAnimationSettings.prototype, "next", void 0);
return TabAnimationSettings;
}(ChildProperty));
export { TabAnimationSettings };
/**
* Objects used for configuring the Tab item header properties.
*/
var Header = /** @class */ (function (_super) {
__extends(Header, _super);
function Header() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('')
], Header.prototype, "text", void 0);
__decorate([
Property('')
], Header.prototype, "iconCss", void 0);
__decorate([
Property('left')
], Header.prototype, "iconPosition", void 0);
return Header;
}(ChildProperty));
export { Header };
/**
* An array of object that is used to configure the Tab.
*/
var TabItem = /** @class */ (function (_super) {
__extends(TabItem, _super);
function TabItem() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Complex({}, Header)
], TabItem.prototype, "header", void 0);
__decorate([
Property(null)
], TabItem.prototype, "headerTemplate", void 0);
__decorate([
Property('')
], TabItem.prototype, "content", void 0);
__decorate([
Property('')
], TabItem.prototype, "cssClass", void 0);
__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 };
/**
* Tab is a content panel to show multiple contents in a single space, one at a time.
* Each Tab item has an associated content, that will be displayed based on the active Tab header item.
* ```html
* <div id="tab"></div>
* <script>
* var tabObj = new Tab();
* tab.appendTo("#tab");
* </script>
* ```
*/
var Tab = /** @class */ (function (_super) {
__extends(Tab, _super);
/**
* Initializes a new instance of the Tab class.
*
* @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.maxHeight = 0;
_this.title = 'Close';
_this.isInteracted = false;
_this.lastIndex = 0;
_this.isAdd = false;
_this.isIconAlone = false;
_this.draggableItems = [];
_this.resizeContext = _this.refreshActiveTabBorder.bind(_this);
/**
* Contains the keyboard configuration of the Tab.
*/
_this.keyConfigs = {
tab: 'tab',
home: 'home',
end: 'end',
enter: 'enter',
space: 'space',
delete: 'delete',
moveLeft: 'leftarrow',
moveRight: 'rightarrow',
moveUp: 'uparrow',
moveDown: 'downarrow'
};
return _this;
}
/**
* Removes the component from the DOM and detaches all its related event handlers, attributes and classes.
*
* @returns {void}
*/
Tab.prototype.destroy = function () {
if (this.isReact || this.isAngular) {
this.clearTemplate();
}
if (!isNOU(this.tbObj)) {
this.tbObj.destroy();
this.tbObj = null;
}
this.unWireEvents();
this.element.removeAttribute('aria-disabled');
this.expTemplateContent();
if (!this.isTemplate) {
while (this.element.firstElementChild) {
remove(this.element.firstElementChild);
}
}
else {
var cntEle = select('.' + CLS_TAB + ' > .' + CLS_CONTENT, this.element);
this.element.classList.remove(CLS_TEMPLATE);
if (!isNOU(cntEle)) {
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();
}
};
/**
* Reorganizes and adjusts the Tab headers to fit the available width without re-rendering the entire Tab component.
*
* This method is useful for optimizing the layout when:
* - A hidden tab item becomes visible.
* - The number of tab items changes dynamically.
*
* @returns {void} This method does not return a value.
*/
Tab.prototype.refreshOverflow = function () {
if (!isNOU(this.tbObj)) {
this.tbObj.refreshOverflow();
}
};
/**
* Initialize component
*
* @private
* @returns {void}
*/
Tab.prototype.preRender = function () {
var nested = closest(this.element, '.' + CLS_CONTENT);
this.prevIndex = 0;
this.isNested = false;
this.isPopup = false;
this.initRender = true;
this.isSwiped = 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;
}
var name = Browser.info.name;
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, { 'aria-disabled': 'false' });
this.setCssClass(this.element, css, true);
this.updatePopAnimationConfig();
};
/**
* Initialize the component rendering
*
* @private
* @returns {void}
*/
Tab.prototype.render = function () {
var _this = this;
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;
if (this.isReact && this.portals && this.portals.length > 0) {
this.renderReactTemplates(function () {
_this.refreshOverflow();
_this.selectingContent(_this.selectedItem, _this.isInteracted);
_this.refreshActiveBorder();
});
}
};
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 }));
this.isTemplate = false;
}
else if (this.element.children.length > 0) {
this.isTemplate = true;
ele.classList.add(CLS_TEMPLATE);
var header = ele.querySelector('.' + CLS_HEADER);
if (header && this.headerPlacement === 'Bottom') {
this.setOrientation(this.headerPlacement, header);
}
}
if (!isNOU(select('.' + CLS_HEADER, this.element)) && !isNOU(select('.' + CLS_CONTENT, this.element))) {
this.renderHeader();
this.tbItems = select('.' + CLS_HEADER + ' .' + CLS_TB_ITEMS, this.element);
if (!isNOU(this.tbItems)) {
rippleEffect(this.tbItems, { selector: '.e-tab-wrap' });
}
this.renderContent();
if (selectAll('.' + CLS_TB_ITEM, this.element).length > 0) {
this.tbItems = select('.' + CLS_HEADER + ' .' + CLS_TB_ITEMS, this.element);
this.bdrLine = this.createElement('div', { className: CLS_INDICATOR + ' ' + CLS_HIDDEN + ' ' + CLS_IGNORE });
var scrCnt = select('.' + this.scrCntClass, this.tbItems);
if (!isNOU(scrCnt)) {
scrCnt.insertBefore(this.bdrLine, scrCnt.firstChild);
}
else {
this.tbItems.insertBefore(this.bdrLine, this.tbItems.firstChild);
}
this.setContentHeight(true);
this.select(this.selectedItem);
}
this.setRTL(this.enableRtl);
}
};
Tab.prototype.renderHeader = function () {
var _this = this;
var hdrPlace = this.headerPlacement;
var tabItems = [];
this.hdrEle = this.getTabHeader();
this.addVerticalClass();
if (!this.isTemplate) {
tabItems = this.parseObject(this.items, 0);
}
else {
if (this.element.children.length > 1 && this.element.children[1].classList.contains(CLS_HEADER)) {
this.setProperties({ headerPlacement: 'Bottom' }, true);
}
var count = this.hdrEle.children.length;
var hdrItems = [];
for (var i = 0; i < count; i++) {
hdrItems.push(this.hdrEle.children.item(i));
}
if (count > 0) {
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 + _this.tabId + '_' + index
};
var txt = _this.createElement('span', {
className: CLS_TEXT, attrs: { 'role': 'presentation' }
}).outerHTML;
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: { role: 'tab', tabIndex: '-1', 'aria-selected': 'false', 'aria-controls': CLS_CONTENT + _this.tabId + '_' + index, 'aria-disabled': 'false' }
});
wrap.querySelector('.' + CLS_TEXT).appendChild(item);
tabItems_1.appendChild(_this.createElement('div', attr));
selectAll('.' + CLS_ITEM, tabItems_1)[index].appendChild(wrap);
});
}
}
this.tbObj = new Toolbar({
width: (hdrPlace === 'Left' || hdrPlace === 'Right') ? 'auto' : '100%',
height: (hdrPlace === 'Left' || hdrPlace === 'Right') ? '100%' : 'auto',
overflowMode: this.overflowMode,
items: (tabItems.length !== 0) ? tabItems : [],
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);
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.createContentElement = function (index) {
var contentElement = this.createElement('div', {
id: CLS_CONTENT + this.tabId + '_' + index, className: CLS_ITEM,
attrs: { 'role': 'tabpanel', 'aria-labelledby': CLS_ITEM + this.tabId + '_' + index }
});
if (['Dynamic', 'Demand'].indexOf(this.loadOn) !== -1 ||
(this.loadOn === 'Init' && index === this.selectedItem)) {
addClass([contentElement], CLS_ACTIVE);
}
return contentElement;
};
Tab.prototype.renderContent = function () {
this.cntEle = select('.' + CLS_CONTENT, this.element);
var hdrItem = selectAll('.' + CLS_TB_ITEM, this.element);
if (this.isTemplate) {
this.cnt = (this.cntEle.children.length > 0) ? this.cntEle.innerHTML : '';
var contents = this.cntEle.children;
for (var i = 0; i < hdrItem.length; i++) {
if (contents.length - 1 >= 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;
}
}
}
else {
if (selectAll('.' + CLS_TB_ITEM, this.element).length > 0) {
if (this.loadOn === 'Init') {
for (var i = 0; i < this.itemIndexArray.length; i++) {
if (this.itemIndexArray[i]) {
this.cntEle.appendChild(this.createContentElement(Number(this.extIndex(this.itemIndexArray[i]))));
}
}
}
else if (this.loadOn === 'Dynamic') {
this.cntEle.appendChild(this.createContentElement(this.selectedItem > 0 ?
this.selectedItem : Number(this.extIndex(this.itemIndexArray[0]))));
}
}
}
};
Tab.prototype.reRenderItems = function () {
this.renderContainer();
if (!isNOU(this.cntEle)) {
this.bindSwipeEvents();
}
};
Tab.prototype.parseObject = function (items, index) {
var _this = this;
var tbItems = Array.prototype.slice.call(selectAll('.e-tab-header .' + CLS_TB_ITEM, this.element));
var maxId = this.lastIndex;
if (!this.isReplace && tbItems.length > 0) {
maxId = this.getMaxIndicesFromItems(tbItems);
}
var tItems = [];
var txtWrapEle;
var spliceArray = [];
var i = 0;
items.forEach(function (item, i) {
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.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 !== '');
if (!isNOU(txt.tagName)) {
txtWrapEle.appendChild(txt);
}
else {
_this.headerTextCompile(txtWrapEle, txt, i);
}
var tEle;
var icon = _this.createElement('span', {
className: CLS_ICONS + ' ' + CLS_TAB_ICON + ' ' + CLS_ICON + '-' + pos + ' ' + css
});
var tCont = _this.createElement('div', { className: CLS_TEXT_WRAP });
tCont.appendChild(txtWrapEle);
if ((txt !== '' && txt !== undefined) && css !== '') {
if ((pos === 'left' || pos === 'top')) {
tCont.insertBefore(icon, tCont.firstElementChild);
}
else {
tCont.appendChild(icon);
}
tEle = txtWrapEle;
_this.isIconAlone = false;
}
else {
tEle = ((css === '') ? txtWrapEle : icon);
if (tEle === icon) {
detach(txtWrapEle);
tCont.appendChild(icon);
_this.isIconAlone = true;
}
}
var tabIndex = isNOU(item.tabIndex) ? '-1' : item.tabIndex.toString();
var wrapAttrs = (item.disabled) ? { role: 'tab', 'aria-disabled': 'true' } : { 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 instanceof Array) {
_this.itemIndexArray.splice((index + i), 0, CLS_ITEM + _this.tabId + '_' + _this.lastIndex);
}
var attrObj = {
id: CLS_ITEM + _this.tabId + '_' + _this.lastIndex, 'data-id': item.id
};
var tItem = { htmlAttributes: attrObj, template: wrap };
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');
}
tItems.push(tItem);
i++;
});
if (!this.isAdd) {
spliceArray.forEach(function (spliceItemIndex) {
_this.items.splice(spliceItemIndex, 1);
});
}
if (this.isIconAlone) {
this.element.classList.add(CLS_ICON_TAB);
}
else {
this.element.classList.remove(CLS_ICON_TAB);
}
return tItems;
};
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) {
this.tbPop = select('.' + CLS_TB_POP, this.element);
var popIcon = select('.e-hor-nav', this.element);
var tbrItems = select('.' + CLS_TB_ITEMS, this.element);
var lastChild = tbrItems.lastChild;
var isOverflow = false;
if (!this.isVertical() && ((this.enableRtl && ((popIcon.offsetLeft + popIcon.offsetWidth) > tbrItems.offsetLeft))
|| (!this.enableRtl && popIcon.offsetLeft < tbrItems.offsetWidth))) {
isOverflow = true;
}
else if (this.isVertical() && (popIcon.offsetTop < lastChild.offsetTop + lastChild.offsetHeight)) {
isOverflow = true;
}
if (isOverflow && !isNOU(ele)) {
ele.classList.add(CLS_TB_POPUP);
this.tbPop.insertBefore(ele, selectAll('.' + CLS_TB_POPUP, this.tbPop)[0]);
}
return isOverflow;
};
Tab.prototype.popupHandler = function (target) {
var ripEle = target.querySelector('.e-ripple-element');
if (!isNOU(ripEle)) {
ripEle.outerHTML = '';
target.querySelector('.' + CLS_WRAP).classList.remove('e-ripple');
}
this.tbItem = selectAll('.' + CLS_TB_ITEMS + ' .' + CLS_TB_ITEM, this.hdrEle);
var lastChild = this.tbItem[this.tbItem.length - 1];
if (this.tbItem.length >= 0) {
target.classList.remove(CLS_TB_POPUP);
target.removeAttribute('style');
this.tbItems.appendChild(target);
this.actEleId = target.id;
if (this.checkPopupOverflow(lastChild)) {
for (var i = 0; i < this.tbItems.children.length; i++) {
var prevEle = this.tbItems.lastChild.previousElementSibling;
prevEle = (prevEle && prevEle.classList.contains(CLS_INDICATOR) ? prevEle.previousElementSibling : prevEle);
if (!this.checkPopupOverflow(prevEle ? prevEle : target)) {
break;
}
}
}
this.isPopup = true;
}
var tabItemsLength = selectAll('.' + CLS_TB_ITEM, this.tbItems).length;
return tabItemsLength > 0 ? tabItemsLength - 1 : this.getEleIndex(target);
};
Tab.prototype.setCloseButton = function (val) {
var trg = select('.' + CLS_HEADER, this.element);
if (val === true) {
trg.classList.add(CLS_CLOSE_SHOW);
}
else {
trg.classList.remove(CLS_CLOSE_SHOW);
}
this.refreshOverflow();
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
};
}
else {
animation = null;
}
}
else {
if (this.animation.next.effect === 'SlideRightIn') {
animation = {
name: 'SlideRightOut',
duration: this.animation.next.duration, timingFunction: this.animation.next.easing
};
}
else {
animation = null;
}
}
return animation;
};
Tab.prototype.triggerPrevAnimation = function (oldCnt, prevIndex) {
var _this = this;
var animateObj = this.prevCtnAnimation(prevIndex, this.selectedItem);
if (!isNOU(animateObj)) {
animateObj.begin = function () {
setStyle(oldCnt, { 'position': 'absolute' });
oldCnt.classList.add(CLS_PROGRESS);
oldCnt.classList.add('e-view');
};
animateObj.end = function () {
oldCnt.style.display = 'none';
oldCnt.classList.remove(CLS_ACTIVE);
oldCnt.classList.remove(CLS_PROGRESS);
oldCnt.classList.remove('e-view');
setStyle(oldCnt, { 'display': '', 'position': '' });
if (oldCnt.childNodes.length === 0 && !_this.isTemplate) {
detach(oldCnt);
}
};
new Animation(animateObj).animate(oldCnt);
}
else {
oldCnt.classList.remove(CLS_ACTIVE);
}
};
Tab.prototype.triggerAnimation = function (id, value) {
var _this = this;
var prevIndex = this.prevIndex;
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 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);
}
if (!isNOU(newCnt)) {
this.prevActiveEle = newCnt.id;
}
var isPrevent = isNOU(this.animation) || 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 || isPrevent) {
if (oldCnt && oldCnt !== newCnt) {
oldCnt.classList.remove(CLS_ACTIVE);
}
return;
}
var cnt = select('.' + CLS_CONTENT, this.element);
var animateObj;
if (this.prevIndex > this.selectedItem && !this.isPopup) {
var openEff = this.animation.previous.effect;
animateObj = {
name: ((openEff === 'None') ? '' : ((openEff !== 'SlideLeftIn') ? openEff : 'SlideLeftIn')),
duration: (this.animation.previous.duration === 0 && animationMode === 'Enable') ? 600 : this.animation.previous.duration,
timingFunction: this.animation.previous.easing
};
}
else if (this.isPopup || this.prevIndex < this.selectedItem || this.prevIndex === this.selectedItem) {
var clsEff = this.animation.next.effect;
animateObj = {
name: ((clsEff === 'None') ? '' : ((clsEff !== 'SlideRightIn') ? clsEff : 'SlideRightIn')),
duration: (this.animation.next.duration === 0 && animationMode === 'Enable') ? 600 : this.animation.next.duration,
timingFunction: this.animation.next.easing
};
}
animateObj.progress = function () {
cnt.classList.add(CLS_PROGRESS);
_this.setActiveBorder();
};
animateObj.end = function () {
cnt.classList.remove(CLS_PROGRESS);
newCnt.classList.add(CLS_ACTIVE);
};
if (!this.initRender && !isNOU(oldCnt)) {
this.triggerPrevAnimation(oldCnt, prevIndex);
}
this.isPopup = false;
if (animateObj.name === '') {
newCnt.classList.add(CLS_ACTIVE);
}
else {
new Animation(animateObj).animate(newCnt);
}
};
Tab.prototype.keyPressed = function (trg) {
var trgParent = closest(trg, '.' + CLS_HEADER + ' .' + CLS_TB_ITEM);
var trgIndex = this.getEleIndex(trgParent);
if (!isNOU(this.popEle) && trg.classList.contains('e-hor-nav')) {
(this.popEle.classList.contains(CLS_POPUP_OPEN)) ? this.popObj.hide(this.hide) : this.popObj.show(this.show);
}
else if (trg.classList.contains('e-scroll-nav')) {
trg.click();
}
else {
if (!isNOU(trgParent) && trgParent.classList.contains(CLS_ACTIVE) === false) {
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_TB_ITEM, this.getTabHeader()), item);
};
Tab.prototype.extIndex = function (id) {
return id.replace(CLS_ITEM + this.tabId + '_', '');
};
Tab.prototype.getMaxIndicesFromItems = function (tbItems) {
var _this = this;
var idList = [];
tbItems.forEach(function (item) {
idList.push(_this.getIndexFromEle(item.id));
});
return Math.max.apply(Math, idList);
};
Tab.prototype.expTemplateContent = function () {
var _this = this;
this.templateEle.forEach(function (eleStr) {
if (!isNOU(_this.element.querySelector(eleStr))) {
document.body.appendChild(_this.element.querySelector(eleStr)).style.display = 'none';
}
});
};
Tab.prototype.templateCompile = function (ele, cnt, index) {
var tempEle = this.createElement('div');
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, index) {
var templateFn;
if (typeof val === 'string') {
val = val.trim();
if (this.isVue) {
templateFn = compile(this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(val) : val);
}
else {
ele.innerHTML = this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(val) : val;
}
}
else {
templateFn = compile(val);
}
var templateFUN;
if (!isNOU(templateFn)) {
templateFUN = templateFn({}, this, prop);
}
if (!isNOU(templateFn) && templateFUN.length > 0) {
[].slice.call(templateFUN).forEach(function (el) {
ele.appendChild(el);
});
}
};
Tab.prototype.headerTextCompile = function (element, text, index) {
this.compileElement(element, text, 'headerTemplate', index);
};
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);
eleStr = eleVal.outerHTML.trim();
if (callType === 'clone') {
ele.appendChild(eleVal.cloneNode(true));
}
else {
ele.appendChild(eleVal);
eleVal.style.display = '';
}
}
else {
this.templateCompile(ele, cnt, index);
}
}
else {
this.templateCompile(ele, cnt, index);
}
}
else {
ele.appendChild(cnt);
}
if (!isNOU(eleStr)) {
if (this.templateEle.indexOf(cnt.toString()) === -1) {
this.templateEle.push(cnt.toString());
}
}
};
Tab.prototype.getTrgContent = function (cntEle, no) {
var ele;
if (this.element.classList.contains(CLS_NEST)) {
ele = select('.' + CLS_NEST + '> .' + CLS_CONTENT + ' > #' + CLS_CONTENT + this.tabId + '_' + no, this.element);
}
else {
ele = this.findEle(cntEle.children, CLS_CONTENT + this.tabId + '_' + no);
}
return ele;
};
Tab.prototype.findEle = function (items, key) {
var ele;
for (var i = 0; i < items.length; i++) {
if (items[i].id === key) {
ele = items[i];
break;
}
}
return ele;
};
Tab.prototype.isVertical = function () {
var isVertical = (this.headerPlacement === 'Left' || this.headerPlacement === 'Right') ? true : false;
this.scrCntClass = (isVertical) ? CLS_VSCRCNT : CLS_HSCRCNT;
return isVertical;
};
Tab.prototype.addVerticalClass = function () {
if (this.isVertical()) {
var tbPos = (this.headerPlacement === 'Left') ? CLS_VLEFT : CLS_VRIGHT;
addClass([this.hdrEle], [CLS_VERTICAL, tbPos]);
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 () {
this.show = { name: (this.isVertical() ? 'FadeIn' : 'SlideDown'), duration: 100 };
this.hide = { name: (this.isVertical() ? 'FadeOut' : 'SlideUp'), duration: 100 };
};
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.changeToolbarOrientation();
if (!isNOU(activeTab) && activeTab.classList.contains(CLS_TB_POPUP)) {
this.popupHandler(activeTab);
}
}
this.addVerticalClass();
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) {
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));
}
};
Tab.prototype.setCssClass = function (ele, cls, val) {
if (cls === '' || isNOU(cls)) {
return;
}
var list = cls.split(' ');
for (var i = 0; i < list.length; i++) {
if (val) {
ele.classList.add(list[i]);
}
else {
ele.classList.remove(list[i]);
}
}
};
Tab.prototype.loadContentInitMode = function (ele) {
if (!ele) {
return;
}
if (this.loadOn === 'Init') {
for (var i = 0; i < this.items.length; i++) {
if (this.cntEle.children.item(i)) {
this.getContent(this.cntEle.children.item(i), this.items[i].content, 'render', i);
}
}
}
};
Tab.prototype.loadContentElement = function () {
if (!this.isTemplate) {
var ele = this.cntEle.children.item(0);
this.loadContentInitMode(ele);
}
};
Tab.prototype.setContentHeight = function (val) {
if (this.element.classList.contains(CLS_FILL)) {
removeClass([this.element], [CLS_FILL]);
}
if (isNOU(this.cntEle)) {
return;
}
var hdrEle = this.getTabHeader();
if (this.heightAdjustMode === 'None') {
this.loadContentElement();
if (this.height === 'auto') {
return;
}
else {
if (!this.isVertical()) {
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%' });
this.loadContentElement();
this.cntEle.style.height = 'calc(100% - ' + this.hdrEle.offsetHeight + 'px)';
}
else if (this.heightAdjustMode === 'Auto') {
if (this.isTemplate === true) {
var cnt = selectAll('.' + CLS_CONTENT + ' > .' + CLS_ITEM, this.element);
for (var i = 0; i < cnt.length; i++) {
cnt[i].style.display = 'block';
cnt[i].style.visibility = 'visible';
this.maxHeight = Math.max(this.maxHeight, this.getHeight(cnt[i]));
cnt[i].style.removeProperty('display');
cnt[i].style.removeProperty('visibility');
}
}
else {
this.cntEle = select('.' + CLS_CONTENT, this.element);
if (val === true && this.loadOn === 'Demand') {
this.cntEle.appendChild(this.createContentElement(Number(this.extIndex(this.itemIndexArray[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', i);
this.maxHeight = Math.max(this.maxHeight, this.getHeight(ele));
while (ele.firstChild) {
ele.removeChild(ele.firstChild);
}
}
if (this.isReact || this.isAngular || this.isVue) {
this.clearTemplate(['content']);
}
this.templateEle = [];
if (this.loadOn === 'Demand') {
this.getContent(ele, this.items[0].content, 'render', 0);
}
this.loadContentInitMode(ele);
if (this.prevIndex !== this.selectedItem) {
ele.classList.remove(CLS_ACTIVE);
}
}
setStyle(this.cntEle, { 'height': this.maxHeight + 'px' });
}
else {
this.loadContentElement();
setStyle(this.cntEle, { 'height': 'auto' });
}
};
Tab.prototype.getHeight = function (ele) {
var cs = window.getComputedStyle(ele);
return ele.offsetHeight + parseFloat(cs.getPropertyValue('padding-top')) + parseFloat(cs.getPropertyValue('padding-bottom')) +
parseFloat(cs.getPropertyValue('margin-top')) + parseFloat(cs.getPropertyValue('margin-bottom'));
};
Tab.prototype.setActiveBorder = function () {
var trgHdrEle = this.getTabHeader();
var trg = select('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE, trgHdrEle);
if (isNOU(trg)) {
return;
}
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);
}
}
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);
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;
if (tbHeight !== 0) {
setStyle(bar, { 'top': trg.offsetTop + 'px', 'height': trg.offsetHeight + 'px' });
}
else {
setStyle(bar, { 'top': 0, 'height': 0 });
}
}
else {
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' });
}
else {
setStyle(bar, { 'left': 'auto', 'right': 'auto' });
}
}
if (!isNOU(this.bdrLine) && !trg.classList.contains(CLS_TB_POPUP)) {
this.bdrLine.classList.remove(CLS_HIDDEN);
}
};
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 || isNaN(value) || this.tbItem.length === 0 || !isNOU(trg) && trg.classList.contains(CLS_DISABLE)) {
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) {
attributes(trg.firstElementChild, { 'aria-controls': CLS_CONTENT + this.tabId + '_' + this.extIndex(trg.id) });
}
var id = trg.id;
this.removeActiveClass();
trg.classList.add(CLS_ACTIVE);
trg.firstElementChild.setAttribute('aria-selected', 'true');
var no = Number(this.extIndex(id));
if (isNOU(this.prevActiveEle)) {
this.prevActiveEle = CLS_CONTENT + this.tabId + '_' + no;
}
if (this.isTemplate) {
if (select('.' + CLS_CONTENT, this.element).children.length > 0) {
var trg_1 = this.findEle(select('.' + CLS_CONTENT, this.element).children, C