com.phloxui
Version:
PhloxUI Ng2+ Framework
1,645 lines • 146 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
import * as tslib_1 from "tslib";
import { Component, ElementRef, Input, Type, Output, EventEmitter } from '@angular/core';
import { TabModel } from '../model/TabModel';
import { TAB_CHANGE_EVENT, TAB_ADD_EVENT, TAB_MOVE_EVENT, NEW_TAB_BTN_CLICK, BEFORE_NEW_TAB_BTN_CLICK, BEFORE_TAB_CHANGE_EVENT, BEFORE_TAB_ADD_EVENT, BEFORE_TAB_MOVE_EVENT } from '../../share/CustomEventType';
import { ArrayUtils } from '../../share/utils/ArrayUtils';
import { Option } from '../../decorator/Option.decorator';
import { I18N } from '../../decorator/I18N.decorator';
import { AbstractDataView } from "./AbstractDataView";
import { EventUtils } from '../../share/utils/EventUtils';
var /** @type {?} */ TYPE_NAME = "phx-tab-pane";
var TabPane = /** @class */ (function (_super) {
tslib_1.__extends(TabPane, _super);
function TabPane(elementRef) {
var _this = _super.call(this, elementRef) || this;
_this.TAB_GROUP_SELECTOR = ".tab-group";
_this.TAB_LEFT_MOVING_CLASS = "insert-left";
_this.TAB_RIGHT_MOVING_CLASS = "insert-right";
_this.tabModels = [];
_this.tabHeaders = [];
_this.tabBodies = [];
_this.newTabClickEvent = new EventEmitter();
_this.tabChangeEvent = new EventEmitter();
_this.tabAddEvent = new EventEmitter();
_this.tabMoveEvent = new EventEmitter();
_this.beforeNewTabClickEvent = new EventEmitter();
_this.beforeTabChangeEvent = new EventEmitter();
_this.beforeTabAddEvent = new EventEmitter();
_this.beforeTabMoveEvent = new EventEmitter();
_this.changeEvent = new EventEmitter();
_this.showAddTabBtn = true;
_this.tabDragging = false;
_this.tabComponentHandler = function (data) {
if (_this != null && typeof _this !== 'undefined') {
_this.addTabBody(data.instance);
// emit event
var /** @type {?} */ lastIndex = _this.tabModels.length - 1;
_this.emitTabAddEvent(_this.tabModels[lastIndex], _this.tabHeaders[lastIndex], _this.tabBodies[lastIndex]);
}
};
return _this;
}
/**
* @return {?}
*/
TabPane.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
this.currentIndex = -1;
// mousemoving on body
$("body").mousemove(function (event) {
if (event === null || typeof event === 'undefined') {
return;
}
var /** @type {?} */ clientX = event.pageX;
if (_this.draggingTab === null || typeof _this.draggingTab === 'undefined') {
return;
}
_this.tabDragging = true;
var /** @type {?} */ adding = false;
var /** @type {?} */ tabSelector = _this.TAB_GROUP_SELECTOR + " > .tab-label";
$(_this.elementRef.nativeElement).find(tabSelector).each(function (index, value) {
var /** @type {?} */ width = $(value).width();
var /** @type {?} */ offset = $(value).offset();
var /** @type {?} */ left = 0;
if (typeof offset !== 'undefined') {
left = offset.left;
}
var /** @type {?} */ end = left + width;
var /** @type {?} */ half = left + (width / 2);
if (clientX >= left && clientX < half) {
if (!adding) {
$(value).addClass(_this.TAB_LEFT_MOVING_CLASS);
$(value).removeClass(_this.TAB_RIGHT_MOVING_CLASS);
adding = true;
}
}
else if (clientX >= half && clientX < end) {
if (!adding) {
$(value).addClass(_this.TAB_RIGHT_MOVING_CLASS);
$(value).removeClass(_this.TAB_LEFT_MOVING_CLASS);
adding = true;
}
}
else {
$(value).removeClass(_this.TAB_LEFT_MOVING_CLASS);
$(value).removeClass(_this.TAB_RIGHT_MOVING_CLASS);
}
});
});
// onmouseup on body
$("body").mouseup(function (mouseMoveEV) {
if (!_this.tabDragging) {
_this.draggingTab = null;
return;
}
_this.onTabMove(mouseMoveEV);
});
};
/**
* @param {?} tab
* @param {?} type
* @return {?}
*/
TabPane.prototype.applyI18NToTab = /**
* @param {?} tab
* @param {?} type
* @return {?}
*/
function (tab, type) {
if (type === "tabHeaders") {
// add tabHeaders add i18N
if (typeof this.i18nValue !== 'undefined') {
var /** @type {?} */ tabI18NMap = this.i18nValue['defaultTab']; // reserved keyword
if (typeof tab.applyI18N === 'function' && tabI18NMap !== undefined) {
tab.applyI18N(tabI18NMap);
}
}
}
else if (type === "tabBodies") {
// add tabBodies add i18N
if (typeof this.i18nValue !== 'undefined') {
var /** @type {?} */ tabI18NMap = this.i18nValue['defaultTabInstance']; // reserved keyword
if (typeof tab.applyI18N === 'function' && tabI18NMap !== undefined) {
tab.applyI18N(tabI18NMap);
}
}
}
};
/**
* @param {?} event
* @return {?}
*/
TabPane.prototype._onMouseMove = /**
* @param {?} event
* @return {?}
*/
function (event) {
var _this = this;
// reset style & get final Index
var /** @type {?} */ fromIndex = -1;
if (this.draggingTab !== null && typeof this.draggingTab !== 'undefined') {
fromIndex = this.tabModels.indexOf(this.draggingTab);
}
var /** @type {?} */ toIndex = -1;
var /** @type {?} */ tabSelector = this.TAB_GROUP_SELECTOR + " > .tab-label";
$(this.elementRef.nativeElement).find(tabSelector).each(function (index, value) {
if ($(value).hasClass(_this.TAB_LEFT_MOVING_CLASS)) {
if (fromIndex > index) {
toIndex = index;
}
else {
toIndex = index - 1;
}
$(value).removeClass(_this.TAB_LEFT_MOVING_CLASS);
}
if ($(value).hasClass(_this.TAB_RIGHT_MOVING_CLASS)) {
if (fromIndex > index) {
toIndex = index + 1;
}
else {
toIndex = index;
}
$(value).removeClass(_this.TAB_RIGHT_MOVING_CLASS);
}
});
// reRender tab if need change ordering
if (toIndex > -1) {
this.moveTabModel(fromIndex, toIndex);
if (fromIndex !== toIndex) {
this.showTabAtIndex(toIndex);
}
}
this.draggingTab = null;
this.tabDragging = false;
this.emitTabMoveEvent(fromIndex, toIndex, event);
};
/**
* @param {?} $event
* @param {?=} fireEvent
* @return {?}
*/
TabPane.prototype.onTabMove = /**
* @param {?} $event
* @param {?=} fireEvent
* @return {?}
*/
function ($event, fireEvent) {
var _this = this;
if (fireEvent === null || fireEvent === undefined) {
fireEvent = true;
}
var /** @type {?} */ fromIndex = -1;
if (this.draggingTab !== null && typeof this.draggingTab !== 'undefined') {
fromIndex = this.tabModels.indexOf(this.draggingTab);
}
var /** @type {?} */ toIndex = -1;
var /** @type {?} */ tabSelector = this.TAB_GROUP_SELECTOR + " > .tab-label";
$(this.elementRef.nativeElement).find(tabSelector).each(function (index, value) {
if ($(value).hasClass(_this.TAB_LEFT_MOVING_CLASS)) {
if (fromIndex > index) {
toIndex = index;
}
else {
toIndex = index - 1;
}
}
if ($(value).hasClass(_this.TAB_RIGHT_MOVING_CLASS)) {
if (fromIndex > index) {
toIndex = index + 1;
}
else {
toIndex = index;
}
}
});
EventUtils.handleBrowserEvent(this, 'beforeTabMoveEvent', $event, fireEvent, function ($event) {
// doEvent
// doEvent
_this._onMouseMove($event);
}, function ($event) {
// emitBeforeEvent
// emitBeforeEvent
_this.emitBeforeTabMoveEvent(fromIndex, toIndex, $event);
}, function ($event, result) {
// emitAfterEvent
// emit after in move end
}, function ($event) {
// doPrevented
// remove class because prevent default
$(_this.elementRef.nativeElement).find(tabSelector).each(function (index, value) {
if ($(value).hasClass(_this.TAB_LEFT_MOVING_CLASS)) {
$(value).removeClass(_this.TAB_LEFT_MOVING_CLASS);
}
if ($(value).hasClass(_this.TAB_RIGHT_MOVING_CLASS)) {
$(value).removeClass(_this.TAB_RIGHT_MOVING_CLASS);
}
});
_this.draggingTab = null;
_this.tabDragging = false;
});
};
/**
* @param {?} body
* @return {?}
*/
TabPane.prototype.getTabBodyIndex = /**
* @param {?} body
* @return {?}
*/
function (body) {
if (body !== null && typeof body !== 'undefined') {
var /** @type {?} */ index = 0;
try {
for (var _a = tslib_1.__values(this.tabBodies), _b = _a.next(); !_b.done; _b = _a.next()) {
var item = _b.value;
if (item === body) {
return index;
}
index += 1;
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_b && !_b.done && (_c = _a.return)) _c.call(_a);
}
finally { if (e_1) throw e_1.error; }
}
}
return -1;
var e_1, _c;
};
/**
* @param {?} body
* @return {?}
*/
TabPane.prototype.addTabBody = /**
* @param {?} body
* @return {?}
*/
function (body) {
var _this = this;
if (body === null) {
return;
}
this.tabBodies.push(body);
this.applyI18NToTab(body, "tabBodies");
var /** @type {?} */ lastIndex = this.tabBodies.length - 1;
if (lastIndex > -1 && lastIndex < this.tabHeaders.length) {
var /** @type {?} */ header = this.tabHeaders[lastIndex];
header.addDataChild(body);
}
if (typeof body.getChange === 'function') {
body.getChangedEvent().subscribe(function (event) {
if (event.detail !== null && typeof event.detail !== 'undefined') {
if (event.detail.data !== null && typeof event.detail.data !== 'undefined') {
if (event.detail.data.bubbleStack !== null && typeof event.detail.data.bubbleStack !== 'undefined') {
event.detail.data.bubbleStack.push(_this);
}
else {
event.detail.data.bubbleStack = [_this];
}
}
}
event.tabIndex = _this.getTabBodyIndex(body); //! bug fix here
_this.changeEvent.emit(event);
});
}
};
/**
* @param {?} body
* @return {?}
*/
TabPane.prototype.removeTabBody = /**
* @param {?} body
* @return {?}
*/
function (body) {
if (body === null) {
return;
}
var /** @type {?} */ toRemoveIdx = this.tabBodies.indexOf(body);
if (toRemoveIdx > -1 && toRemoveIdx < this.tabHeaders.length) {
var /** @type {?} */ header = this.tabHeaders[toRemoveIdx];
header.removeDataChild(body);
}
if (toRemoveIdx > -1) {
this.tabBodies.splice(toRemoveIdx, 1);
}
};
/**
* @param {?} index
* @return {?}
*/
TabPane.prototype._setTabSelected = /**
* @param {?} index
* @return {?}
*/
function (index) {
this.currentIndex = index;
this.tabHeaders.forEach(function (item, idx) {
if (idx === index) {
item.setSelected(true);
}
else {
item.setSelected(false);
}
});
};
/**
* @param {?} index
* @param {?=} $event
* @param {?=} fireEvent
* @return {?}
*/
TabPane.prototype.setTabSelected = /**
* @param {?} index
* @param {?=} $event
* @param {?=} fireEvent
* @return {?}
*/
function (index, $event, fireEvent) {
var _this = this;
if (index === null || index <= -1 || typeof index === 'undefined') {
return;
}
if (this.currentIndex === index) {
return;
}
if (fireEvent === null || fireEvent === undefined) {
fireEvent = true;
}
var /** @type {?} */ oldIndex = this.currentIndex;
EventUtils.handleBrowserEvent(this, 'beforeTabChangeEvent', $event, fireEvent, function ($event) {
// doEvent
// doEvent
_this._setTabSelected(index);
}, function ($event) {
// emitBeforeEvent
// emitBeforeEvent
_this.emitBeforeTabChangeEvent(oldIndex, index, $event);
}, function ($event, result) {
// emitAfterEvent
// emitAfterEvent
_this.emitTabChangeEvent(oldIndex, index, $event);
}, function ($event) {
// doPrevented
});
};
/**
* @param {?} fromIndex
* @param {?} toIndex
* @return {?}
*/
TabPane.prototype.moveTabModel = /**
* @param {?} fromIndex
* @param {?} toIndex
* @return {?}
*/
function (fromIndex, toIndex) {
if (toIndex === null || typeof toIndex === 'undefined' || toIndex <= -1) {
return;
}
if (fromIndex === null || typeof fromIndex === 'undefined' || fromIndex <= -1) {
return;
}
if (fromIndex === toIndex) {
return;
}
ArrayUtils.move(this.tabHeaders, fromIndex, toIndex);
ArrayUtils.move(this.tabBodies, fromIndex, toIndex);
ArrayUtils.move(this.tabModels, fromIndex, toIndex);
};
/**
* @return {?}
*/
TabPane.prototype.addDefaultTabWithSelected = /**
* @return {?}
*/
function () {
if (this.tabComponentType !== null && (typeof this.tabComponentType !== 'undefined')) {
this.addDefaultTab();
}
else {
throw "Tab component type was not found.";
}
var /** @type {?} */ lastIndex = this.tabModels.length - 1;
if (lastIndex <= -1) {
lastIndex = 0;
}
this.setTabSelected(lastIndex);
};
/**
* @param {?=} $event
* @return {?}
*/
TabPane.prototype.emitBeforeNewTabClickEvent = /**
* @param {?=} $event
* @return {?}
*/
function ($event) {
var /** @type {?} */ eventData = null;
// emit event
// no model added
var /** @type {?} */ bfData = {
model: undefined,
tabHeader: undefined,
tabBody: undefined
};
var /** @type {?} */ bfEV = EventUtils.newCustomEvent(BEFORE_NEW_TAB_BTN_CLICK, this, bfData, $event);
this.beforeNewTabClickEvent.emit(bfEV);
};
/**
* @param {?=} $event
* @return {?}
*/
TabPane.prototype.emitNewTabClickEvent = /**
* @param {?=} $event
* @return {?}
*/
function ($event) {
var /** @type {?} */ eventData = null;
// emit event
var /** @type {?} */ data = {
model: this.tabModels[this.currentIndex],
tabHeader: this.tabHeaders[this.currentIndex],
tabBody: this.tabBodies[this.currentIndex]
};
var /** @type {?} */ ev = EventUtils.newCustomEvent(NEW_TAB_BTN_CLICK, this, data, $event);
this.newTabClickEvent.emit(ev);
};
/**
* @param {?} tabModel
* @param {?} header
* @param {?} body
* @param {?=} $event
* @return {?}
*/
TabPane.prototype.emitBeforeTabAddEvent = /**
* @param {?} tabModel
* @param {?} header
* @param {?} body
* @param {?=} $event
* @return {?}
*/
function (tabModel, header, body, $event) {
// emit event
var /** @type {?} */ bfd = {
model: tabModel,
tabHeader: undefined,
tabBody: undefined
};
var /** @type {?} */ bfev = EventUtils.newCustomEvent(BEFORE_TAB_ADD_EVENT, this, bfd, $event);
this.beforeTabAddEvent.emit(bfev);
};
/**
* @param {?} tabModel
* @param {?} header
* @param {?} body
* @param {?=} $event
* @return {?}
*/
TabPane.prototype.emitTabAddEvent = /**
* @param {?} tabModel
* @param {?} header
* @param {?} body
* @param {?=} $event
* @return {?}
*/
function (tabModel, header, body, $event) {
// emit event
var /** @type {?} */ d = {
model: tabModel,
tabHeader: header,
tabBody: body
};
var /** @type {?} */ ev = EventUtils.newCustomEvent(TAB_ADD_EVENT, this, d, $event);
this.tabAddEvent.emit(ev);
};
/**
* @param {?} oldIndex
* @param {?} newIndex
* @param {?=} $event
* @return {?}
*/
TabPane.prototype.emitBeforeTabChangeEvent = /**
* @param {?} oldIndex
* @param {?} newIndex
* @param {?=} $event
* @return {?}
*/
function (oldIndex, newIndex, $event) {
// emit event
var /** @type {?} */ bfData = {
oldIndex: oldIndex,
newIndex: newIndex
};
var /** @type {?} */ bfEV = EventUtils.newCustomEvent(BEFORE_TAB_CHANGE_EVENT, this, bfData, $event);
this.beforeTabChangeEvent.emit(bfEV);
};
/**
* @param {?} oldIndex
* @param {?} newIndex
* @param {?=} $event
* @return {?}
*/
TabPane.prototype.emitTabChangeEvent = /**
* @param {?} oldIndex
* @param {?} newIndex
* @param {?=} $event
* @return {?}
*/
function (oldIndex, newIndex, $event) {
// emit event
var /** @type {?} */ data = {
oldIndex: oldIndex,
newIndex: newIndex
};
var /** @type {?} */ ev = EventUtils.newCustomEvent(TAB_CHANGE_EVENT, this, data, $event);
this.tabChangeEvent.emit(ev);
};
/**
* @param {?} fromIndex
* @param {?} toIndex
* @param {?=} $event
* @return {?}
*/
TabPane.prototype.emitBeforeTabMoveEvent = /**
* @param {?} fromIndex
* @param {?} toIndex
* @param {?=} $event
* @return {?}
*/
function (fromIndex, toIndex, $event) {
// emit event
var /** @type {?} */ bfdata = {
fromIndex: fromIndex,
toIndex: toIndex
};
var /** @type {?} */ bfev = EventUtils.newCustomEvent(BEFORE_TAB_MOVE_EVENT, this, bfdata, $event);
this.beforeTabMoveEvent.emit(bfev);
};
/**
* @param {?} fromIndex
* @param {?} toIndex
* @param {?=} $event
* @return {?}
*/
TabPane.prototype.emitTabMoveEvent = /**
* @param {?} fromIndex
* @param {?} toIndex
* @param {?=} $event
* @return {?}
*/
function (fromIndex, toIndex, $event) {
// emit event
var /** @type {?} */ data = {
fromIndex: fromIndex,
toIndex: toIndex
};
var /** @type {?} */ ev = EventUtils.newCustomEvent(TAB_MOVE_EVENT, this, data, $event);
this.tabMoveEvent.emit(ev);
};
/**
* mouse dragging *
* @param {?} $event
* @param {?} tab
* @return {?}
*/
TabPane.prototype.onMouseDownTab = /**
* mouse dragging *
* @param {?} $event
* @param {?} tab
* @return {?}
*/
function ($event, tab) {
if (this.draggingTab !== null && typeof this.draggingTab !== 'undefined') {
this.draggingTab = null;
this.tabMouseDifPositionY = null;
}
else {
this.draggingTab = tab;
}
};
/**
* @param {?} model
* @return {?}
*/
TabPane.prototype.getTabModelIndex = /**
* @param {?} model
* @return {?}
*/
function (model) {
if (this.tabModels !== null && typeof this.tabModels !== 'undefined') {
var /** @type {?} */ index = 0;
try {
for (var _a = tslib_1.__values(this.tabModels), _b = _a.next(); !_b.done; _b = _a.next()) {
var innerModel = _b.value;
if (innerModel === model) {
return index;
}
index += 1;
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (_b && !_b.done && (_c = _a.return)) _c.call(_a);
}
finally { if (e_2) throw e_2.error; }
}
}
return -1;
var e_2, _c;
};
/**
* @param {?} data
* @return {?}
*/
TabPane.prototype.applyI18N = /**
* @param {?} data
* @return {?}
*/
function (data) {
_super.prototype.applyI18N.call(this, data);
if (data["defaultTab"]) {
if (this.tabHeaders !== null && this.tabHeaders !== undefined) {
try {
for (var _a = tslib_1.__values(this.tabHeaders), _b = _a.next(); !_b.done; _b = _a.next()) {
var h = _b.value;
this.applyI18NToTab(h, "tabHeaders");
}
}
catch (e_3_1) { e_3 = { error: e_3_1 }; }
finally {
try {
if (_b && !_b.done && (_c = _a.return)) _c.call(_a);
}
finally { if (e_3) throw e_3.error; }
}
}
}
if (data["defaultTabInstance"]) {
if (this.tabBodies !== null && this.tabBodies !== undefined) {
try {
for (var _d = tslib_1.__values(this.tabBodies), _e = _d.next(); !_e.done; _e = _d.next()) {
var b = _e.value;
this.applyI18NToTab(b, "tabBodies");
}
}
catch (e_4_1) { e_4 = { error: e_4_1 }; }
finally {
try {
if (_e && !_e.done && (_f = _d.return)) _f.call(_d);
}
finally { if (e_4) throw e_4.error; }
}
}
}
var e_3, _c, e_4, _f;
};
/**
* @return {?}
*/
TabPane.prototype.getTabsCount = /**
* @return {?}
*/
function () {
return this.tabModels.length;
};
/**
* @return {?}
*/
TabPane.prototype.addDefaultTab = /**
* @return {?}
*/
function () {
this.addTab(new TabModel((this.tabLabel === "" || this.tabLabel === undefined || this.tabLabel === null) ? 'New tab' : this.tabLabel, null, this.tabComponentType, this.tabComponentModel, null, this.labelField));
};
/**
* @param {?} tabModel
* @param {?=} $event
* @param {?=} fireEvent
* @return {?}
*/
TabPane.prototype.addTab = /**
* @param {?} tabModel
* @param {?=} $event
* @param {?=} fireEvent
* @return {?}
*/
function (tabModel, $event, fireEvent) {
var _this = this;
if (tabModel == null || typeof tabModel === 'undefined') {
return;
}
// no bodyComponent no adding
if (tabModel.bodyComponent == null || typeof tabModel.bodyComponent === 'undefined') {
return;
}
if (fireEvent === null || fireEvent === undefined) {
fireEvent = true;
}
EventUtils.handleBrowserEvent(this, 'beforeTabAddEvent', $event, fireEvent, function ($event) {
// doEvent
// doEvent
_this.tabModels.push(tabModel);
}, function ($event) {
// emitBeforeEvent
// emitBeforeEvent
_this.emitBeforeTabAddEvent(tabModel, undefined, undefined, $event);
}, function ($event, result) {
// emitAfterEvent
// emit addEvent is in handler
}, function ($event) {
// doPrevented
});
};
/**
* @param {?} $event
* @param {?=} fireEvent
* @return {?}
*/
TabPane.prototype.onNewTabClicked = /**
* @param {?} $event
* @param {?=} fireEvent
* @return {?}
*/
function ($event, fireEvent) {
var _this = this;
if (fireEvent === null || fireEvent === undefined) {
fireEvent = true;
}
EventUtils.handleBrowserEvent(this, 'beforeNewTabClickEvent', $event, fireEvent, function ($event) {
// doEvent
// doEvent
_this.addDefaultTabWithSelected();
}, function ($event) {
// emitBeforeEvent
// emitBeforeEvent
_this.emitBeforeNewTabClickEvent($event);
}, function ($event, result) {
// emitAfterEvent
// emitAfterEvent
_this.emitNewTabClickEvent($event);
}, function ($event) {
// doPrevented
});
};
/**
* @param {?} index
* @param {?=} $event
* @param {?=} fireEvent
* @return {?}
*/
TabPane.prototype.showTabAtIndex = /**
* @param {?} index
* @param {?=} $event
* @param {?=} fireEvent
* @return {?}
*/
function (index, $event, fireEvent) {
if (index === null || typeof index === 'undefined') {
return;
}
this.setTabSelected(index, $event, fireEvent);
};
/**
* @param {?} index
* @return {?}
*/
TabPane.prototype.isTabSelected = /**
* @param {?} index
* @return {?}
*/
function (index) {
if (index === null || typeof index === 'undefined') {
return false;
}
if (this.currentIndex !== null && this.currentIndex > -1) {
if (this.currentIndex === index) {
return true;
}
}
return false;
};
/**
* @param {?} tab
* @return {?}
*/
TabPane.prototype.addTabHeader = /**
* @param {?} tab
* @return {?}
*/
function (tab) {
if (tab === null) {
return;
}
this.tabHeaders.push(tab);
};
/**
* @param {?} tab
* @return {?}
*/
TabPane.prototype.removeTabHeader = /**
* @param {?} tab
* @return {?}
*/
function (tab) {
if (tab === null) {
return;
}
var /** @type {?} */ toRemoveIdx = -1;
this.tabHeaders.forEach(function (item, index) {
if (item === tab) {
toRemoveIdx = index;
}
});
if (toRemoveIdx >= 0) {
this.tabHeaders.splice(toRemoveIdx, 1);
}
};
/**
* @param {?} index
* @return {?}
*/
TabPane.prototype.closeTabAtIndex = /**
* @param {?} index
* @return {?}
*/
function (index) {
if (index === null || index <= -1) {
return;
}
var /** @type {?} */ currentTabSize = this.tabModels.length;
if (index < currentTabSize) {
var /** @type {?} */ nextIndex = this.currentIndex;
if (nextIndex === index) {
// this tab will close so change index
if (nextIndex === currentTabSize - 1) {
nextIndex = nextIndex - 1;
}
}
else {
// close none current selected tab
if (index < this.currentIndex) {
nextIndex = this.currentIndex - 1;
}
}
// close and selected new index
if (index < this.tabModels.length) {
this.tabModels.splice(index, 1);
}
if (index < this.tabHeaders.length) {
this.tabHeaders.splice(index, 1);
}
if (index < this.tabBodies.length) {
this.tabBodies.splice(index, 1);
}
if (nextIndex !== this.currentIndex) {
this.showTabAtIndex(nextIndex);
}
}
};
/**
* @param {?} index
* @return {?}
*/
TabPane.prototype.closeTabOther = /**
* @param {?} index
* @return {?}
*/
function (index) {
if (index === null || index <= -1) {
return;
}
var /** @type {?} */ currentTabSize = this.tabModels.length;
if (index < currentTabSize) {
var /** @type {?} */ leftCloseTab = index;
var /** @type {?} */ rightCloseTab = this.tabModels.length - (index + 1);
// close tab to the left
this.tabModels.splice(0, leftCloseTab);
this.tabHeaders.splice(0, leftCloseTab);
this.tabBodies.splice(0, leftCloseTab);
// close tab to the right
if (rightCloseTab > 0) {
this.tabModels.splice(1, rightCloseTab);
this.tabHeaders.splice(1, rightCloseTab);
this.tabBodies.splice(1, rightCloseTab);
}
this.showTabAtIndex(0);
}
};
/**
* @param {?} index
* @return {?}
*/
TabPane.prototype.closeTabToTheLeft = /**
* @param {?} index
* @return {?}
*/
function (index) {
if (index === null || index <= -1) {
return;
}
var /** @type {?} */ currentTabSize = this.tabModels.length;
if (index < currentTabSize) {
var /** @type {?} */ leftCloseTab = index;
// close tab to the left
if (leftCloseTab > 0) {
this.tabModels.splice(0, leftCloseTab);
this.tabHeaders.splice(0, leftCloseTab);
this.tabBodies.splice(0, leftCloseTab);
}
this.showTabAtIndex(0);
}
};
/**
* @param {?} index
* @return {?}
*/
TabPane.prototype.closeTabToTheRight = /**
* @param {?} index
* @return {?}
*/
function (index) {
if (index === null || index <= -1) {
return;
}
var /** @type {?} */ currentTabSize = this.tabModels.length;
if (index < currentTabSize) {
var /** @type {?} */ rightCloseTab = this.tabModels.length - (index + 1);
// close tab to the right
if (rightCloseTab > 0) {
this.tabModels.splice(index + 1, rightCloseTab);
this.tabHeaders.splice(index + 1, rightCloseTab);
this.tabBodies.splice(index + 1, rightCloseTab);
}
if (this.currentIndex === this.tabModels.length - 1) {
this.showTabAtIndex(this.currentIndex);
}
else {
this.showTabAtIndex(index);
}
}
};
/**
* @param {?} indexDirty
* @return {?}
*/
TabPane.prototype.closeTabSaved = /**
* @param {?} indexDirty
* @return {?}
*/
function (indexDirty) {
var /** @type {?} */ currentTabSize = this.tabModels.length;
if (currentTabSize > 0) {
// close tab saved
var /** @type {?} */ indexDirtyClone = JSON.parse(JSON.stringify(indexDirty));
var /** @type {?} */ countDirty = indexDirtyClone.length;
for (var /** @type {?} */ i = 0; i < this.tabModels.length; i++) {
if (indexDirtyClone.length > 0) {
if (indexDirtyClone[0] !== i) {
this.tabModels.splice(i, 1);
this.tabHeaders.splice(i, 1);
this.tabBodies.splice(i, 1);
for (var /** @type {?} */ d = 0; d < indexDirtyClone.length; d++) {
indexDirtyClone[d] = indexDirtyClone[d] - 1;
}
i--;
}
else if (indexDirtyClone[0] === i) {
indexDirtyClone.splice(0, 1);
}
}
else {
this.tabModels.splice(i, this.tabModels.length - countDirty);
this.tabHeaders.splice(i, this.tabHeaders.length - countDirty);
this.tabBodies.splice(i, this.tabBodies.length - countDirty);
}
}
}
this.showTabAtIndex(0);
};
/**
* @return {?}
*/
TabPane.prototype.closeTabAll = /**
* @return {?}
*/
function () {
var /** @type {?} */ currentTabSize = this.tabModels.length;
if (currentTabSize > 0) {
// close tab all
this.tabModels = [];
this.tabHeaders = [];
this.tabBodies = [];
}
};
/**
* @param {?} index
* @param {?} data
* @return {?}
*/
TabPane.prototype.setTabData = /**
* @param {?} index
* @param {?} data
* @return {?}
*/
function (index, data) {
if (index < this.tabHeaders.length) {
this.tabHeaders[index].setData(data);
}
if (index < this.tabBodies.length) {
if (typeof this.tabBodies[index].setData === 'function') {
this.tabBodies[index].setData(data);
}
}
};
/**
* @param {?} index
* @return {?}
*/
TabPane.prototype.saveTabData = /**
* @param {?} index
* @return {?}
*/
function (index) {
if (index < this.tabHeaders.length) {
if (typeof this.tabHeaders[index].saveData === 'function') {
this.tabHeaders[index].saveData();
}
}
if (index < this.tabBodies.length) {
if (typeof this.tabBodies[index].saveData === 'function') {
this.tabBodies[index].saveData();
}
}
};
/**
* @param {?} show
* @return {?}
*/
TabPane.prototype.setShowHelp = /**
* @param {?} show
* @return {?}
*/
function (show) {
_super.prototype.setShowHelp.call(this, show);
// chain from header to body
if (this.tabHeaders !== null && this.tabHeaders !== undefined) {
try {
for (var _a = tslib_1.__values(this.tabHeaders), _b = _a.next(); !_b.done; _b = _a.next()) {
var tab = _b.value;
tab.setShowHelp(show);
}
}
catch (e_5_1) { e_5 = { error: e_5_1 }; }
finally {
try {
if (_b && !_b.done && (_c = _a.return)) _c.call(_a);
}
finally { if (e_5) throw e_5.error; }
}
}
var e_5, _c;
};
/**
* @return {?}
*/
TabPane.prototype.getCurrentTabIndex = /**
* @return {?}
*/
function () {
return this.currentIndex;
};
/**
* @return {?}
*/
TabPane.prototype.getTabModels = /**
* @return {?}
*/
function () {
return this.tabModels;
};
/**
* @return {?}
*/
TabPane.prototype.getTabBodies = /**
* @return {?}
*/
function () {
return this.tabBodies;
};
/**
* @return {?}
*/
TabPane.prototype.getCreateTitle = /**
* @return {?}
*/
function () {
return (this.createTitle === undefined || this.createTitle === null) ? "There is no document." : this.createTitle;
};
/**
* @return {?}
*/
TabPane.prototype.getCreateBtn = /**
* @return {?}
*/
function () {
return (this.createBtn === undefined || this.createBtn === null) ? "Create Tab" : this.createBtn;
};
/**
* @param {?} index
* @return {?}
*/
TabPane.prototype.getTabBody = /**
* @param {?} index
* @return {?}
*/
function (index) {
if (index === null || typeof index !== 'number' || index < 0) {
return null;
}
if (this.tabBodies !== null && typeof this.tabBodies !== 'undefined') {
if (index < this.tabBodies.length) {
return this.tabBodies[index];
}
}
return null;
};
/**
* @return {?}
*/
TabPane.prototype.getTabHeaders = /**
* @return {?}
*/
function () {
return this.tabHeaders;
};
/**
* @param {?} index
* @return {?}
*/
TabPane.prototype.getTabHeader = /**
* @param {?} index
* @return {?}
*/
function (index) {
if (index === null || typeof index !== 'number' || index < 0) {
return null;
}
if (this.tabHeaders !== null && typeof this.tabHeaders !== 'undefined') {
if (index < this.tabHeaders.length) {
return this.tabHeaders[index];
}
}
return null;
};
/**
* @param {?} tab
* @return {?}
*/
TabPane.prototype.getTabHeaderIndex = /**
* @param {?} tab
* @return {?}
*/
function (tab) {
if (tab !== null && typeof tab !== 'undefined') {
if (this.tabHeaders !== null && typeof this.tabHeaders !== 'undefined') {
return this.tabHeaders.indexOf(tab);
}
}
return -1;
};
/**
* @return {?}
*/
TabPane.prototype.getMenuModelFactory = /**
* @return {?}
*/
function () {
return this.menuFactory;
};
/**
* @param {?} menuFactory
* @return {?}
*/
TabPane.prototype.setMenuModelFactory = /**
* @param {?} menuFactory
* @return {?}
*/
function (menuFactory) {
this.menuFactory = menuFactory;
};
/**
* @return {?}
*/
TabPane.prototype.getChangeEvent = /**
* @return {?}
*/
function () {
return this.changeEvent;
};
/**
* @param {?} index
* @return {?}
*/
TabPane.prototype.isTabDirty = /**
* @param {?} index
* @return {?}
*/
function (index) {
if (index === null || typeof index === 'undefined') {
return false;
}
if (index < 0) {
return false;
}
if (index < this.tabHeaders.length) {
var /** @type {?} */ tabHeader = this.tabHeaders[index];
if (typeof tabHeader.isDataDirty === 'function') {
return tabHeader.isDataDirty();
}
}
return false;
};
/**
* @return {?}
*/
TabPane.prototype.getMenuFactory = /**
* @return {?}
*/
function () {
return this.menuFactory;
};
/**
* @return {?}
*/
TabPane.prototype.isShowMoreMenu = /**
* @return {?}
*/
function () {
return this.showMoreMenu;
};
/**
* @return {?}
*/
TabPane.prototype.getTabComponentHandler = /**
* @return {?}
*/
function () {
return this.tabComponentHandler;
};
/**
* @return {?}
*/
TabPane.prototype.getTabGroupPaddingLeft = /**
* @return {?}
*/
function () {
if (!this.showAddTabBtn) {
return "0";
}
var /** @type {?} */ btnGroupWidth = $(this.elementRef.nativeElement).find(".adding-group").css("width");
return btnGroupWidth;
};
/**
* @return {?}
*/
TabPane.prototype.isShowAddTabBtn = /**
* @return {?}
*/
function () {
return this.showAddTabBtn;
};
/**
* @return {?}
*/
TabPane.prototype.isSelfDataDirty = /**
* @return {?}
*/
function () {
return false;
};
/**
* @param {?} data
* @return {?}
*/
TabPane.prototype.selfSaveData = /**
* @param {?} data
* @return {?}
*/
function (data) {
};
/**
* @return {?}
*/
TabPane.prototype.selfResetData = /**
* @return {?}
*/
function () {
};
/**
* @return {?}
*/
TabPane.prototype.getNewTabClickEvent = /**
* @return {?}
*/
function () {
return this.newTabClickEvent;
};
/**
* @param {?} event
* @return {?}
*/
TabPane.prototype.setNewTabClickEvent = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.newTabClickEvent = event;
};
/**
* @return {?}
*/
TabPane.prototype.getBeforeNewTabClickEvent = /**
* @return {?}
*/
function () {
return this.beforeNewTabClickEvent;
};
/**
* @param {?} event
* @return {?}
*/
TabPane.prototype.setBeforeNewTabClickEvent = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.beforeNewTabClickEvent = event;
};
/**
* @return {?}
*/
TabPane.prototype.getTabChangeEvent = /**
* @return {?}
*/
function () {
return this.tabChangeEvent;
};
/**
* @param {?} event
* @return {?}
*/
TabPane.prototype.setTabChangeEvent = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.tabChangeEvent = event;
};
/**
* @return {?}
*/
TabPane.prototype.getBeforeTabChangeEvent = /**
* @return {?}
*/
function () {
return this.beforeTabChangeEvent;
};
/**
* @param {?} event
* @return {?}
*/
TabPane.prototype.setBeforeTabChangeEvent = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.beforeTabChangeEvent = event;
};
/**
* @return {?}
*/
TabPane.prototype.getTabAddEvent = /**
* @return {?}
*/
function () {
return this.tabAddEvent;
};
/**
* @param {?} event
* @return {?}
*/
TabPane.prototype.setTabAddEvent = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.tabAddEvent = event;
};
/**
* @return {?}
*/
TabPane.prototype.getBeforeTabAddEvent = /**
* @return {?}
*/
function () {
return this.beforeTabAddEvent;
};
/**
* @param {?} event
* @return {?}
*/
TabPane.prototype.setBeforeTabAddEvent = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.beforeTabAddEvent = event;
};
/**
* @return {?}
*/
TabPane.prototype.getTabMoveEvent = /**
* @return {?}
*/
function () {
return this.tabMoveEvent;
};
/**
* @param {?} event
* @return {?}
*/
TabPane.prototype.setTabMoveEvent = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.tabMoveEvent = event;
};
/**
* @return {?}
*/
TabPane.prototype.getBeforeTabMoveEvent = /**
* @return {?}
*/
function () {
return this.beforeTabMoveEvent;
};
/**
* @param {?} event
* @return {?}
*/
TabPane.prototype.setBeforeTabMoveEvent = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.beforeTabMoveEvent = event;
};
/**
* @return {?}
*/
TabPane.prototype.getTabComponentType = /**
* @return {?}
*/
function () {
return this.tabComponentType;
};
/**
* @param {?} type
* @return {?}
*/
TabPane.prototype.setTabComponentType = /**
* @param {?} type
* @return {?}
*/
function (type) {
this.tabComponentType = type;
};
/**
* @return {?}
*/
TabPane.prototype.getTabComponentModel = /**
* @return {?}
*/
function () {
return this.tabComponentModel;
};
/**
* @param {?} model
* @return {?}
*/
TabPane.prototype.setTabComponentModel = /**
* @param {?} model
* @return {?}
*/
function (model) {
this.tabComponentModel = model;
};
/**
* @param {?} factory
* @return {?}
*/
TabPane.prototype.setMenuFactory = /**
* @param {?} factory
* @return {?}
*/
function (factory) {
this.menuFactory = factory;
};
/**
* @param {?} value
* @return {?}
*/
TabPane.prototype.setShowAddTabBtn = /**
* @param {?} value
* @return {?}
*/
function (value) {
this.showAddTabBtn = value;
};
/**
* @param {?} value
* @return {?}
*/
TabPane.prototype.setShowMoreMenu = /**
* @param {?} value
* @return {?}
*/
function (value) {
this.showMoreMenu = value;
};
/**
* @return {?}
*/
TabPane.prototype.getLabelField = /**
* @return {?}
*/
function () {
return this.labelField;
};
/**
* @param {?} labelField
* @return {?}
*/
TabPane.prototype.setLabelField = /**
* @param {?} labelField
* @return {?}
*/
function (labelField) {
this.labelField = labelField;
};
TabPane.TYPE_NAME = TYPE_NAME;
TabPane.TAB_CHANGE_EVENT = TAB_CHANGE_EVENT;
TabPane.TAB_ADDED_EVENT = TAB_ADD_EVENT;
TabPane.decorators = [
{ type: Component, args: [{
moduleId: module.id,
selector: TYPE_NAME,
template: "<div class=\"phx-tab-pane disabled-overlay\">\n\t<div class=\"header\">\n\t\t<div class=\"tab-group-wrapper\" [style.padding-left]=\"getTabGroupPaddingLeft()\">\n\t\t\t <div class=\"tab-group\">\n\t\t\t\t<div *ngFor=\"let item of getTabModels(); let j = index\" class=\"tab-label no-select\" [class.active]=\"isTabSelected(j)\" (click)=\"showTabAtIndex(j)\"\n\t\t\t\t\t\t\t(mousedown)=\"onMouseDownTab($event, item)\">\n\t\t\t\t\t<phx-tab [model]=\"item\" [tabPane]=\"this\" [menuFactory]=\"getMenuFactory()\" [showMoreMenu]=\"isShowMoreMenu()\" [ignoreParentData]=\"isIgnoreParentData()\"></phx-tab>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"adding-group\" *ngIf=\"isShowAddTabBtn()\">\n\t\t\t<div class=\"tab-add-button\" (click)=\"onNewTabClicked($event)\"></div>\n\t\t</div>\n\t</div>\n\t<div class=\"body\">\n\t\t<div class=\"body-wrapper\" [class.no-overflow]=\"getTabModels() === null || getTabModels().length <= 0\">\n\t\t\t<div *ngIf=\"getTabModels() === null || getTabModels().length <= 0\" class=\"no-tab-page\">\n\t\t\t\t<div>{{getCreateTitle()}}</div>\n\t\t\t\t<div><div class=\"phlox-button\" (click)=\"onNewTabClicked($event)\">{{getCreateBtn()}}</div></div>\n\t\t\t</div>\n\t\t\t<phx-component-wrapper *ngFor=\"let item of getTabModels(); let i = index\" [type]=\"item.bodyComponent\" [model]=\"item.bodyComponentModel\" [class.active]=\"isTabSelected(i)\" [handler]=\"getTabComponentHandler()\"\n\t\t\t[data]=\"item.data\" [options]=\"item.options\" [ignoreParentData]=\"isIgnoreParentData()\" [i18n]=\"item.i18n\"></phx-component-wrapper>\n\t\t</div>\n\t</div>\n</div>\n"
},] },
];
/** @nocollapse */
TabPane.ctorParameters = function () { return [
{ type: ElementRef, },
]; };
TabPane.propDecorators = {
"dataParent": [{ type: Input },],
"ignoreParentData": [{ type: Input },],
"data": [{ type: Input },],
"ignoreParentDisabled": [{ type: Input },],
"delegateHistory": [{ type: Input },],
"onDisabled": [{ type: Input },],
"onEnabled": [{ type: Input },],
"loadingEnabled": [{ type: Input },],
"i18nKey": [{ type: Input },],
"bypass": [{ type: Input, args: ['i18nBypass',] },],
"options": [{ type: Input },],
"disabled": [{ type: Input },],
"field": [{ type: Input },],
"help": [{ type: Input },],
"tabComponentType": [{ type: Input },],
"tabComponentModel": [{ type: Input },],
"menuFactory": [{ type: Input },],
"showMoreMenu": [{ type: Input },],
"showAddTabBtn": [{ type: Input },],
"labelField": [{ type: Input },],
"loadEvent": [{ type: Output, args: ['phxLoad',] },],
"newTabClickEvent": [{ type: Output, args: ['phxNewTabClick',] },],
"tabChangeEvent": [{ type: Output, args: ['phxTabChange',] },],
"tabAddEvent": [{ type: Output, args: ['phxTabAdd',] },],
"tabMoveEvent": [{ type: Output, args: ['phxTabMove',] },],
"beforeNewTabClickEvent": [{ type: Output, args: ['phxBeforeNewTabClick',] },],
"beforeTabChangeEvent": [{ type: Output, args: ['phxBeforeTabChange',] },],
"bef