UNPKG

com.phloxui

Version:

PhloxUI Ng2+ Framework

1,518 lines (1,517 loc) 134 kB
/** * @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'; const /** @type {?} */ TYPE_NAME = "phx-tab-pane"; export class TabPane extends AbstractDataView { /** * @param {?} elementRef */ constructor(elementRef) { super(elementRef); 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 = (data) => { if (this != null && typeof this !== 'undefined') { this.addTabBody(data.instance); // emit event let /** @type {?} */ lastIndex = this.tabModels.length - 1; this.emitTabAddEvent(this.tabModels[lastIndex], this.tabHeaders[lastIndex], this.tabBodies[lastIndex]); } }; } /** * @return {?} */ ngOnInit() { this.currentIndex = -1; // mousemoving on body $("body").mousemove((event) => { if (event === null || typeof event === 'undefined') { return; } let /** @type {?} */ clientX = event.pageX; if (this.draggingTab === null || typeof this.draggingTab === 'undefined') { return; } this.tabDragging = true; let /** @type {?} */ adding = false; let /** @type {?} */ tabSelector = this.TAB_GROUP_SELECTOR + " > .tab-label"; $(this.elementRef.nativeElement).find(tabSelector).each((index, value) => { let /** @type {?} */ width = $(value).width(); let /** @type {?} */ offset = $(value).offset(); let /** @type {?} */ left = 0; if (typeof offset !== 'undefined') { left = offset.left; } let /** @type {?} */ end = left + width; let /** @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((mouseMoveEV) => { if (!this.tabDragging) { this.draggingTab = null; return; } this.onTabMove(mouseMoveEV); }); } /** * @param {?} tab * @param {?} type * @return {?} */ applyI18NToTab(tab, type) { if (type === "tabHeaders") { // add tabHeaders add i18N if (typeof this.i18nValue !== 'undefined') { let /** @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') { let /** @type {?} */ tabI18NMap = this.i18nValue['defaultTabInstance']; // reserved keyword if (typeof tab.applyI18N === 'function' && tabI18NMap !== undefined) { tab.applyI18N(tabI18NMap); } } } } /** * @param {?} event * @return {?} */ _onMouseMove(event) { // reset style & get final Index let /** @type {?} */ fromIndex = -1; if (this.draggingTab !== null && typeof this.draggingTab !== 'undefined') { fromIndex = this.tabModels.indexOf(this.draggingTab); } let /** @type {?} */ toIndex = -1; let /** @type {?} */ tabSelector = this.TAB_GROUP_SELECTOR + " > .tab-label"; $(this.elementRef.nativeElement).find(tabSelector).each((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 {?} */ onTabMove($event, fireEvent) { if (fireEvent === null || fireEvent === undefined) { fireEvent = true; } let /** @type {?} */ fromIndex = -1; if (this.draggingTab !== null && typeof this.draggingTab !== 'undefined') { fromIndex = this.tabModels.indexOf(this.draggingTab); } let /** @type {?} */ toIndex = -1; let /** @type {?} */ tabSelector = this.TAB_GROUP_SELECTOR + " > .tab-label"; $(this.elementRef.nativeElement).find(tabSelector).each((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, ($event) => { // doEvent this._onMouseMove($event); }, ($event) => { // emitBeforeEvent this.emitBeforeTabMoveEvent(fromIndex, toIndex, $event); }, ($event, result) => { // emitAfterEvent // emit after in move end }, ($event) => { // doPrevented // remove class because prevent default $(this.elementRef.nativeElement).find(tabSelector).each((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 {?} */ getTabBodyIndex(body) { if (body !== null && typeof body !== 'undefined') { let /** @type {?} */ index = 0; for (let /** @type {?} */ item of this.tabBodies) { if (item === body) { return index; } index += 1; } } return -1; } /** * @param {?} body * @return {?} */ addTabBody(body) { if (body === null) { return; } this.tabBodies.push(body); this.applyI18NToTab(body, "tabBodies"); let /** @type {?} */ lastIndex = this.tabBodies.length - 1; if (lastIndex > -1 && lastIndex < this.tabHeaders.length) { let /** @type {?} */ header = this.tabHeaders[lastIndex]; header.addDataChild(body); } if (typeof body.getChange === 'function') { body.getChangedEvent().subscribe((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 {?} */ removeTabBody(body) { if (body === null) { return; } let /** @type {?} */ toRemoveIdx = this.tabBodies.indexOf(body); if (toRemoveIdx > -1 && toRemoveIdx < this.tabHeaders.length) { let /** @type {?} */ header = this.tabHeaders[toRemoveIdx]; header.removeDataChild(body); } if (toRemoveIdx > -1) { this.tabBodies.splice(toRemoveIdx, 1); } } /** * @param {?} index * @return {?} */ _setTabSelected(index) { this.currentIndex = index; this.tabHeaders.forEach((item, idx) => { if (idx === index) { item.setSelected(true); } else { item.setSelected(false); } }); } /** * @param {?} index * @param {?=} $event * @param {?=} fireEvent * @return {?} */ setTabSelected(index, $event, fireEvent) { if (index === null || index <= -1 || typeof index === 'undefined') { return; } if (this.currentIndex === index) { return; } if (fireEvent === null || fireEvent === undefined) { fireEvent = true; } let /** @type {?} */ oldIndex = this.currentIndex; EventUtils.handleBrowserEvent(this, 'beforeTabChangeEvent', $event, fireEvent, ($event) => { // doEvent this._setTabSelected(index); }, ($event) => { // emitBeforeEvent this.emitBeforeTabChangeEvent(oldIndex, index, $event); }, ($event, result) => { // emitAfterEvent this.emitTabChangeEvent(oldIndex, index, $event); }, ($event) => { // doPrevented }); } /** * @param {?} fromIndex * @param {?} toIndex * @return {?} */ moveTabModel(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 {?} */ addDefaultTabWithSelected() { if (this.tabComponentType !== null && (typeof this.tabComponentType !== 'undefined')) { this.addDefaultTab(); } else { throw "Tab component type was not found."; } let /** @type {?} */ lastIndex = this.tabModels.length - 1; if (lastIndex <= -1) { lastIndex = 0; } this.setTabSelected(lastIndex); } /** * @param {?=} $event * @return {?} */ emitBeforeNewTabClickEvent($event) { let /** @type {?} */ eventData = null; // emit event // no model added let /** @type {?} */ bfData = { model: undefined, tabHeader: undefined, tabBody: undefined }; let /** @type {?} */ bfEV = EventUtils.newCustomEvent(BEFORE_NEW_TAB_BTN_CLICK, this, bfData, $event); this.beforeNewTabClickEvent.emit(bfEV); } /** * @param {?=} $event * @return {?} */ emitNewTabClickEvent($event) { let /** @type {?} */ eventData = null; // emit event let /** @type {?} */ data = { model: this.tabModels[this.currentIndex], tabHeader: this.tabHeaders[this.currentIndex], tabBody: this.tabBodies[this.currentIndex] }; let /** @type {?} */ ev = EventUtils.newCustomEvent(NEW_TAB_BTN_CLICK, this, data, $event); this.newTabClickEvent.emit(ev); } /** * @param {?} tabModel * @param {?} header * @param {?} body * @param {?=} $event * @return {?} */ emitBeforeTabAddEvent(tabModel, header, body, $event) { // emit event let /** @type {?} */ bfd = { model: tabModel, tabHeader: undefined, tabBody: undefined }; let /** @type {?} */ bfev = EventUtils.newCustomEvent(BEFORE_TAB_ADD_EVENT, this, bfd, $event); this.beforeTabAddEvent.emit(bfev); } /** * @param {?} tabModel * @param {?} header * @param {?} body * @param {?=} $event * @return {?} */ emitTabAddEvent(tabModel, header, body, $event) { // emit event let /** @type {?} */ d = { model: tabModel, tabHeader: header, tabBody: body }; let /** @type {?} */ ev = EventUtils.newCustomEvent(TAB_ADD_EVENT, this, d, $event); this.tabAddEvent.emit(ev); } /** * @param {?} oldIndex * @param {?} newIndex * @param {?=} $event * @return {?} */ emitBeforeTabChangeEvent(oldIndex, newIndex, $event) { // emit event let /** @type {?} */ bfData = { oldIndex: oldIndex, newIndex: newIndex }; let /** @type {?} */ bfEV = EventUtils.newCustomEvent(BEFORE_TAB_CHANGE_EVENT, this, bfData, $event); this.beforeTabChangeEvent.emit(bfEV); } /** * @param {?} oldIndex * @param {?} newIndex * @param {?=} $event * @return {?} */ emitTabChangeEvent(oldIndex, newIndex, $event) { // emit event let /** @type {?} */ data = { oldIndex: oldIndex, newIndex: newIndex }; let /** @type {?} */ ev = EventUtils.newCustomEvent(TAB_CHANGE_EVENT, this, data, $event); this.tabChangeEvent.emit(ev); } /** * @param {?} fromIndex * @param {?} toIndex * @param {?=} $event * @return {?} */ emitBeforeTabMoveEvent(fromIndex, toIndex, $event) { // emit event let /** @type {?} */ bfdata = { fromIndex: fromIndex, toIndex: toIndex }; let /** @type {?} */ bfev = EventUtils.newCustomEvent(BEFORE_TAB_MOVE_EVENT, this, bfdata, $event); this.beforeTabMoveEvent.emit(bfev); } /** * @param {?} fromIndex * @param {?} toIndex * @param {?=} $event * @return {?} */ emitTabMoveEvent(fromIndex, toIndex, $event) { // emit event let /** @type {?} */ data = { fromIndex: fromIndex, toIndex: toIndex }; let /** @type {?} */ ev = EventUtils.newCustomEvent(TAB_MOVE_EVENT, this, data, $event); this.tabMoveEvent.emit(ev); } /** * mouse dragging * * @param {?} $event * @param {?} tab * @return {?} */ onMouseDownTab($event, tab) { if (this.draggingTab !== null && typeof this.draggingTab !== 'undefined') { this.draggingTab = null; this.tabMouseDifPositionY = null; } else { this.draggingTab = tab; } } /** * @param {?} model * @return {?} */ getTabModelIndex(model) { if (this.tabModels !== null && typeof this.tabModels !== 'undefined') { let /** @type {?} */ index = 0; for (let /** @type {?} */ innerModel of this.tabModels) { if (innerModel === model) { return index; } index += 1; } } return -1; } /** * @param {?} data * @return {?} */ applyI18N(data) { super.applyI18N(data); if (data["defaultTab"]) { if (this.tabHeaders !== null && this.tabHeaders !== undefined) { for (let /** @type {?} */ h of this.tabHeaders) { this.applyI18NToTab(h, "tabHeaders"); } } } if (data["defaultTabInstance"]) { if (this.tabBodies !== null && this.tabBodies !== undefined) { for (let /** @type {?} */ b of this.tabBodies) { this.applyI18NToTab(b, "tabBodies"); } } } } /** * @return {?} */ getTabsCount() { return this.tabModels.length; } /** * @return {?} */ addDefaultTab() { 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 {?} */ addTab(tabModel, $event, fireEvent) { 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, ($event) => { // doEvent this.tabModels.push(tabModel); }, ($event) => { // emitBeforeEvent this.emitBeforeTabAddEvent(tabModel, undefined, undefined, $event); }, ($event, result) => { // emitAfterEvent // emit addEvent is in handler }, ($event) => { // doPrevented }); } /** * @param {?} $event * @param {?=} fireEvent * @return {?} */ onNewTabClicked($event, fireEvent) { if (fireEvent === null || fireEvent === undefined) { fireEvent = true; } EventUtils.handleBrowserEvent(this, 'beforeNewTabClickEvent', $event, fireEvent, ($event) => { // doEvent this.addDefaultTabWithSelected(); }, ($event) => { // emitBeforeEvent this.emitBeforeNewTabClickEvent($event); }, ($event, result) => { // emitAfterEvent this.emitNewTabClickEvent($event); }, ($event) => { // doPrevented }); } /** * @param {?} index * @param {?=} $event * @param {?=} fireEvent * @return {?} */ showTabAtIndex(index, $event, fireEvent) { if (index === null || typeof index === 'undefined') { return; } this.setTabSelected(index, $event, fireEvent); } /** * @param {?} index * @return {?} */ isTabSelected(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 {?} */ addTabHeader(tab) { if (tab === null) { return; } this.tabHeaders.push(tab); } /** * @param {?} tab * @return {?} */ removeTabHeader(tab) { if (tab === null) { return; } let /** @type {?} */ toRemoveIdx = -1; this.tabHeaders.forEach((item, index) => { if (item === tab) { toRemoveIdx = index; } }); if (toRemoveIdx >= 0) { this.tabHeaders.splice(toRemoveIdx, 1); } } /** * @param {?} index * @return {?} */ closeTabAtIndex(index) { if (index === null || index <= -1) { return; } let /** @type {?} */ currentTabSize = this.tabModels.length; if (index < currentTabSize) { let /** @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 {?} */ closeTabOther(index) { if (index === null || index <= -1) { return; } let /** @type {?} */ currentTabSize = this.tabModels.length; if (index < currentTabSize) { let /** @type {?} */ leftCloseTab = index; let /** @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 {?} */ closeTabToTheLeft(index) { if (index === null || index <= -1) { return; } let /** @type {?} */ currentTabSize = this.tabModels.length; if (index < currentTabSize) { let /** @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 {?} */ closeTabToTheRight(index) { if (index === null || index <= -1) { return; } let /** @type {?} */ currentTabSize = this.tabModels.length; if (index < currentTabSize) { let /** @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 {?} */ closeTabSaved(indexDirty) { let /** @type {?} */ currentTabSize = this.tabModels.length; if (currentTabSize > 0) { // close tab saved let /** @type {?} */ indexDirtyClone = JSON.parse(JSON.stringify(indexDirty)); let /** @type {?} */ countDirty = indexDirtyClone.length; for (let /** @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 (let /** @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 {?} */ closeTabAll() { let /** @type {?} */ currentTabSize = this.tabModels.length; if (currentTabSize > 0) { // close tab all this.tabModels = []; this.tabHeaders = []; this.tabBodies = []; } } /** * @param {?} index * @param {?} data * @return {?} */ setTabData(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 {?} */ saveTabData(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 {?} */ setShowHelp(show) { super.setShowHelp(show); // chain from header to body if (this.tabHeaders !== null && this.tabHeaders !== undefined) { for (let /** @type {?} */ tab of this.tabHeaders) { tab.setShowHelp(show); } } } /** * @return {?} */ getCurrentTabIndex() { return this.currentIndex; } /** * @return {?} */ getTabModels() { return this.tabModels; } /** * @return {?} */ getTabBodies() { return this.tabBodies; } /** * @return {?} */ getCreateTitle() { return (this.createTitle === undefined || this.createTitle === null) ? "There is no document." : this.createTitle; } /** * @return {?} */ getCreateBtn() { return (this.createBtn === undefined || this.createBtn === null) ? "Create Tab" : this.createBtn; } /** * @param {?} index * @return {?} */ getTabBody(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 {?} */ getTabHeaders() { return this.tabHeaders; } /** * @param {?} index * @return {?} */ getTabHeader(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 {?} */ getTabHeaderIndex(tab) { if (tab !== null && typeof tab !== 'undefined') { if (this.tabHeaders !== null && typeof this.tabHeaders !== 'undefined') { return this.tabHeaders.indexOf(tab); } } return -1; } /** * @return {?} */ getMenuModelFactory() { return this.menuFactory; } /** * @param {?} menuFactory * @return {?} */ setMenuModelFactory(menuFactory) { this.menuFactory = menuFactory; } /** * @return {?} */ getChangeEvent() { return this.changeEvent; } /** * @param {?} index * @return {?} */ isTabDirty(index) { if (index === null || typeof index === 'undefined') { return false; } if (index < 0) { return false; } if (index < this.tabHeaders.length) { let /** @type {?} */ tabHeader = this.tabHeaders[index]; if (typeof tabHeader.isDataDirty === 'function') { return tabHeader.isDataDirty(); } } return false; } /** * @return {?} */ getMenuFactory() { return this.menuFactory; } /** * @return {?} */ isShowMoreMenu() { return this.showMoreMenu; } /** * @return {?} */ getTabComponentHandler() { return this.tabComponentHandler; } /** * @return {?} */ getTabGroupPaddingLeft() { if (!this.showAddTabBtn) { return "0"; } let /** @type {?} */ btnGroupWidth = $(this.elementRef.nativeElement).find(".adding-group").css("width"); return btnGroupWidth; } /** * @return {?} */ isShowAddTabBtn() { return this.showAddTabBtn; } /** * @return {?} */ isSelfDataDirty() { return false; } /** * @param {?} data * @return {?} */ selfSaveData(data) { } /** * @return {?} */ selfResetData() { } /** * @return {?} */ getNewTabClickEvent() { return this.newTabClickEvent; } /** * @param {?} event * @return {?} */ setNewTabClickEvent(event) { this.newTabClickEvent = event; } /** * @return {?} */ getBeforeNewTabClickEvent() { return this.beforeNewTabClickEvent; } /** * @param {?} event * @return {?} */ setBeforeNewTabClickEvent(event) { this.beforeNewTabClickEvent = event; } /** * @return {?} */ getTabChangeEvent() { return this.tabChangeEvent; } /** * @param {?} event * @return {?} */ setTabChangeEvent(event) { this.tabChangeEvent = event; } /** * @return {?} */ getBeforeTabChangeEvent() { return this.beforeTabChangeEvent; } /** * @param {?} event * @return {?} */ setBeforeTabChangeEvent(event) { this.beforeTabChangeEvent = event; } /** * @return {?} */ getTabAddEvent() { return this.tabAddEvent; } /** * @param {?} event * @return {?} */ setTabAddEvent(event) { this.tabAddEvent = event; } /** * @return {?} */ getBeforeTabAddEvent() { return this.beforeTabAddEvent; } /** * @param {?} event * @return {?} */ setBeforeTabAddEvent(event) { this.beforeTabAddEvent = event; } /** * @return {?} */ getTabMoveEvent() { return this.tabMoveEvent; } /** * @param {?} event * @return {?} */ setTabMoveEvent(event) { this.tabMoveEvent = event; } /** * @return {?} */ getBeforeTabMoveEvent() { return this.beforeTabMoveEvent; } /** * @param {?} event * @return {?} */ setBeforeTabMoveEvent(event) { this.beforeTabMoveEvent = event; } /** * @return {?} */ getTabComponentType() { return this.tabComponentType; } /** * @param {?} type * @return {?} */ setTabComponentType(type) { this.tabComponentType = type; } /** * @return {?} */ getTabComponentModel() { return this.tabComponentModel; } /** * @param {?} model * @return {?} */ setTabComponentModel(model) { this.tabComponentModel = model; } /** * @param {?} factory * @return {?} */ setMenuFactory(factory) { this.menuFactory = factory; } /** * @param {?} value * @return {?} */ setShowAddTabBtn(value) { this.showAddTabBtn = value; } /** * @param {?} value * @return {?} */ setShowMoreMenu(value) { this.showMoreMenu = value; } /** * @return {?} */ getLabelField() { return this.labelField; } /** * @param {?} labelField * @return {?} */ setLabelField(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"> <div class="header"> <div class="tab-group-wrapper" [style.padding-left]="getTabGroupPaddingLeft()"> <div class="tab-group"> <div *ngFor="let item of getTabModels(); let j = index" class="tab-label no-select" [class.active]="isTabSelected(j)" (click)="showTabAtIndex(j)" (mousedown)="onMouseDownTab($event, item)"> <phx-tab [model]="item" [tabPane]="this" [menuFactory]="getMenuFactory()" [showMoreMenu]="isShowMoreMenu()" [ignoreParentData]="isIgnoreParentData()"></phx-tab> </div> </div> </div> <div class="adding-group" *ngIf="isShowAddTabBtn()"> <div class="tab-add-button" (click)="onNewTabClicked($event)"></div> </div> </div> <div class="body"> <div class="body-wrapper" [class.no-overflow]="getTabModels() === null || getTabModels().length <= 0"> <div *ngIf="getTabModels() === null || getTabModels().length <= 0" class="no-tab-page"> <div>{{getCreateTitle()}}</div> <div><div class="phlox-button" (click)="onNewTabClicked($event)">{{getCreateBtn()}}</div></div> </div> <phx-component-wrapper *ngFor="let item of getTabModels(); let i = index" [type]="item.bodyComponent" [model]="item.bodyComponentModel" [class.active]="isTabSelected(i)" [handler]="getTabComponentHandler()" [data]="item.data" [options]="item.options" [ignoreParentData]="isIgnoreParentData()" [i18n]="item.i18n"></phx-component-wrapper> </div> </div> </div> ` },] }, ]; /** @nocollapse */ TabPane.ctorParameters = () => [ { 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',] },], "beforeTabAddEvent": [{ type: Output, args: ['phxBeforeTabAdd',] },], "beforeTabMoveEvent": [{ type: Output, args: ['phxBeforeTabMove',] },], }; tslib_1.__decorate([ Option(), tslib_1.__metadata("design:type", Object) ], TabPane.prototype, "dataParent", void 0); tslib_1.__decorate([ Option(), tslib_1.__metadata("design:type", Boolean) ], TabPane.prototype, "ignoreParentData", void 0); tslib_1.__decorate([ Option(), tslib_1.__metadata("design:type", Object) ], TabPane.prototype, "data", void 0); tslib_1.__decorate([ Option(), tslib_1.__metadata("design:type", Boolean) ], TabPane.prototype, "ignoreParentDisabled", void 0); tslib_1.__decorate([ Option(), tslib_1.__metadata("design:type", Boolean) ], TabPane.prototype, "delegateHistory", void 0); tslib_1.__decorate([ Option(), tslib_1.__metadata("design:type", Function) ], TabPane.prototype, "onDisabled", void 0); tslib_1.__decorate([ Option(), tslib_1.__metadata("design:type", Function) ], TabPane.prototype, "onEnabled", void 0); tslib_1.__decorate([ Option(), tslib_1.__metadata("design:type", Boolean) ], TabPane.prototype, "loadingEnabled", void 0); tslib_1.__decorate([ Option(), tslib_1.__metadata("design:type", String) ], TabPane.prototype, "i18nKey", void 0); tslib_1.__decorate([ Option('i18nBypass'), tslib_1.__metadata("design:type", Boolean) ], TabPane.prototype, "bypass", void 0); tslib_1.__decorate([ Option(), tslib_1.__metadata("design:type", Boolean) ], TabPane.prototype, "disabled", void 0); tslib_1.__decorate([ Option(), tslib_1.__metadata("design:type", String) ], TabPane.prototype, "field", void 0); tslib_1.__decorate([ I18N(), Option(), tslib_1.__metadata("design:type", Object) ], TabPane.prototype, "help", void 0); tslib_1.__decorate([ Option(), tslib_1.__metadata("design:type", Type) ], TabPane.prototype, "tabComponentType", void 0); tslib_1.__decorate([ Option(), tslib_1.__metadata("design:type", Object) ], TabPane.prototype, "tabComponentModel", void 0); tslib_1.__decorate([ Option(), tslib_1.__metadata("design:type", Object) ], TabPane.prototype, "menuFactory", void 0); tslib_1.__decorate([ Option(), tslib_1.__metadata("design:type", Boolean) ], TabPane.prototype, "showMoreMenu", void 0); tslib_1.__decorate([ Option(), tslib_1.__metadata("design:type", Boolean) ], TabPane.prototype, "showAddTabBtn", void 0); tslib_1.__decorate([ Option(), tslib_1.__metadata("design:type", String) ], TabPane.prototype, "labelField", void 0); tslib_1.__decorate([ Option('load'), tslib_1.__metadata("design:type", EventEmitter) ], TabPane.prototype, "loadEvent", void 0); tslib_1.__decorate([ Option('newTabClick'), tslib_1.__metadata("design:type", EventEmitter) ], TabPane.prototype, "newTabClickEvent", void 0); tslib_1.__decorate([ Option('tabChange'), tslib_1.__metadata("design:type", EventEmitter) ], TabPane.prototype, "tabChangeEvent", void 0); tslib_1.__decorate([ Option('tabAdd'), tslib_1.__metadata("design:type", EventEmitter) ], TabPane.prototype, "tabAddEvent", void 0); tslib_1.__decorate([ Option('tabMove'), tslib_1.__metadata("design:type", EventEmitter) ], TabPane.prototype, "tabMoveEvent", void 0); tslib_1.__decorate([ Option('beforeNewTabClick'), tslib_1.__metadata("design:type", EventEmitter) ], TabPane.prototype, "beforeNewTabClickEvent", void 0); tslib_1.__decorate([ Option('beforeTabChange'), tslib_1.__metadata("design:type", EventEmitter) ], TabPane.prototype, "beforeTabChangeEvent", void 0); tslib_1.__decorate([ Option('beforeTabAdd'), tslib_1.__metadata("design:type", EventEmitter) ], TabPane.prototype, "beforeTabAddEvent", void 0); tslib_1.__decorate([ Option('beforeTabMove'), tslib_1.__metadata("design:type", EventEmitter) ], TabPane.prototype, "beforeTabMoveEvent", void 0); tslib_1.__decorate([ Option('models'), I18N('models'), tslib_1.__metadata("design:type", Array) ], TabPane.prototype, "tabModels", void 0); tslib_1.__decorate([ Option('tabs'), I18N('tabs'), tslib_1.__metadata("design:type", Array) ], TabPane.prototype, "tabHeaders", void 0); tslib_1.__decorate([ Option('tabLabel'), I18N('tabLabel'), tslib_1.__metadata("design:type", String) ], TabPane.prototype, "tabLabel", void 0); tslib_1.__decorate([ Option('tabInstances'), I18N('tabInstances'), tslib_1.__metadata("design:type", Array) ], TabPane.prototype, "tabBodies", void 0); tslib_1.__decorate([ Option('createTitle'), I18N('createTitle'), tslib_1.__metadata("design:type", String) ], TabPane.prototype, "createTitle", void 0); tslib_1.__decorate([ Option('createBtn'), I18N('createBtn'), tslib_1.__metadata("design:type", String) ], TabPane.prototype, "createBtn", void 0); function TabPane_tsickle_Closure_declarations() { /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */ TabPane.decorators; /** * @nocollapse * @type {function(): !Array<(null|{type: ?, decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>)})>} */ TabPane.ctorParameters; /** @type {!Object<string,!Array<{type: !Function, args: (undefined|!Array<?>)}>>} */ TabPane.propDecorators; /** @type {?} */ TabPane.TYPE_NAME; /** @type {?} */ TabPane.TAB_CHANGE_EVENT; /** @type {?} */ TabPane.TAB_ADDED_EVENT; /** @type {?} */ TabPane.prototype.TAB_GROUP_SELECTOR; /** @type {?} */ TabPane.prototype.TAB_LEFT_MOVING_CLASS; /** @type {?} */ TabPane.prototype.TAB_RIGHT_MOVING_CLASS; /** @type {?} */ TabPane.prototype.dataParent; /** @type {?} */ TabPane.prototype.ignoreParentData; /** @type {?} */ TabPane.prototype.data; /** @type {?} */ TabPane.prototype.ignoreParentDisabled; /** @type {?} */ TabPane.prototype.delegateHistory; /** @type {?} */ TabPane.prototype.onDisabled; /** @type {?} */ TabPane.prototype.onEnabled; /** @type {?} */ TabPane.prototype.loadingEnabled; /** @type {?} */ TabPane.prototype.i18nKey; /** @type {?} */ TabPane.prototype.bypass; /** @type {?} */ TabPane.prototype.options; /** @type {?} */ TabPane.prototype.disabled; /** @type {?} */ TabPane.prototype.field; /** @type {?} */ TabPane.prototype.help; /** @type {?} */ TabPane.prototype.tabComponentType; /** @type {?} */ TabPane.prototype.tabComponentModel; /** @type {?} */ TabPane.prototype.menuFactory; /** @type {?} */ TabPane.prototype.showMoreMenu; /** @type {?} */ TabPane.prototype.showAddTabBtn; /** @type {?} */ TabPane.prototype.labelField; /** @type {?} */ TabPane.prototype.loadEvent; /** @type {?} */ TabPane.prototype.newTabClickEvent; /** @type {?} */ TabPane.prototype.tabChangeEvent; /** @type {?} */ TabPane.prototype.tabAddEvent; /** @type {?} */ TabPane.prototype.tabMoveEvent; /** @type {?} */ TabPane.prototype.beforeNewTabClickEvent; /** @type {?} */ TabPane.prototype.beforeTabChangeEvent; /** @type {?} */ TabPane.prototype.beforeTabAddEvent; /** @type {?} */ TabPane.prototype.beforeTabMoveEvent; /** @type {?} */ TabPane.prototype.tabModels; /** @type {?} */ TabPane.prototype.tabHeaders; /** @type {?} */ TabPane.prototype.tabLabel; /** @type {?} */ TabPane.prototype.tabBodies; /** @type {?} */ TabPane.prototype.createTitle; /** @type {?} */ TabPane.prototype.createBtn; /** @type {?} */ TabPane.prototype.currentIndex; /** @type {?} */ TabPane.prototype.tabComponentHandler; /** @type {?} */ TabPane.prototype.changeEvent; /** @type {?} */ TabPane.prototype.tabDragging; /** @type {?} */ TabPane.prototype.draggingTab; /** @type {?} */ TabPane.prototype.tabMouseDifPositionY; } export { Tab } from './tab.internal/Tab.component'; //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFiUGFuZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9jb20ucGhsb3h1aS8iLCJzb3VyY2VzIjpbImxpYi9jb21wb25lbnQvZGF0YXZpZXcvVGFiUGFuZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFVLFVBQVUsRUFBRSxLQUFLLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDakcsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBUzdDLE9BQU8sRUFDTCxnQkFBZ0IsRUFBRSxhQUFhLEVBQUUsY0FBYyxFQUFFLGlCQUFpQixFQUNsRSx3QkFBd0IsRUFBRSx1QkFBdUIsRUFBRSxvQkFBb0IsRUFBRSxxQkFBcUIsRUFDL0YsTUFBTSw2QkFBNkIsQ0FBQztBQUNyQyxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDMUQsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLGtDQUFrQyxDQUFDO0FBQzFELE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUN0RCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUN0RCxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFPMUQsdUJBQU0sU0FBUyxHQUFXLGNBQWMsQ0FBQztBQWdDekMsTUFBTSxjQUFlLFNBQVEsZ0JBQWdCOzs7O0lBdUkzQyxZQUFZLFVBQXNCO1FBQ2hDLEtBQUssQ0FBQyxVQUFVLENBQUMsQ0FBQztrQ0FqSWlCLFlBQVk7cUNBQ1QsYUFBYTtzQ0FDWixjQUFjO1FBZ0lyRCxJQUFJLENBQUMsU0FBUyxHQUFHLEVBQUUsQ0FBQztRQUNwQixJQUFJLENBQUMsVUFBVSxHQUFHLEVBQUUsQ0FBQztRQUNyQixJQUFJLENBQUMsU0FBUyxHQUFHLEVBQUUsQ0FBQztRQUNwQixJQUFJLENBQUMsZ0JBQWdCLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUMzQyxJQUFJLENBQUMsY0FBYyxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFDekMsSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBQ3RDLElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUN2QyxJQUFJLENBQUMsc0JBQXNCLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUNqRCxJQUFJLENBQUMsb0JBQW9CLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUMvQyxJQUFJLENBQUMsaUJBQWlCLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUM1QyxJQUFJLENBQUMsa0JBQWtCLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUM3QyxJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFDdEMsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUM7UUFDMUIsSUFBSSxDQUFDLFdBQVcsR0FBRyxLQUFLLENBQUM7UUFFekIsSUFBSSxDQUFDLG1CQUFtQixHQUFHLENBQUMsSUFBUyxFQUFFLEVBQUU7WUFDdkMsRUFBRSxDQUFDLENBQUMsSUFBSSxJQUFJLElBQUksSUFBSSxPQUFPLElBQUksS0FBSyxXQUFXLENBQUMsQ0FBQyxDQUFDO2dCQUVoRCxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQzs7Z0JBRy9CLHFCQUFJLFNBQVMsR0FBVyxJQUFJLENBQUMsU0FBUyxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUM7Z0JBQ2xELElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxTQUFTLENBQUMsRUFBRSxJQUFJLENBQUMsVUFBVSxDQUFDLFNBQVMsQ0FBQyxFQUFFLElBQUksQ0FBQyxTQUFTLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQzthQUN4RztTQUNGLENBQUE7S0FDRjs7OztJQUVNLFFBQVE7UUFDYixJQUFJLENBQUMsWUFBWSxHQUFHLENBQUMsQ0FBQyxDQUFDOztRQUd2QixDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsU0FBUyxDQUFDLENBQUMsS0FBVSxFQUFFLEVBQUU7WUFDakMsRUFBRSxDQUFDLENBQUMsS0FBSyxLQUFLLElBQUksSUFBSSxPQUFPLEtBQUssS0FBSyxXQUFXLENBQUMsQ0FBQyxDQUFDO2dCQUNuRCxNQUFNLENBQUM7YUFDUjtZQUVELHFCQUFJLE9BQU8sR0FBRyxLQUFLLENBQUMsS0FBSyxDQUFDO1lBRTFCLEVBQUUsQ0FBQy