import { Component, Inject, forwardRef, ViewContainerRef, ChangeDetectorRef, Input, ContentChildren, EventEmitter, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, ViewChild, Output, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TooltipModule } from 'primeng/tooltip';
import { RippleModule } from 'primeng/ripple';
import { PrimeTemplate, SharedModule } from 'primeng/api';
import { DomHandler } from 'primeng/dom';
let idx = 0;
class TabPanel {
constructor(tabView, viewContainer, cd) {
this.viewContainer = viewContainer;
this.cd = cd;
this.cache = true;
this.tooltipPosition = 'top';
this.tooltipPositionStyle = 'absolute';
this.id = `p-tabpanel-${idx++}`;
this.tabView = tabView;
}
ngAfterContentInit() {
this.templates.forEach((item) => {
switch (item.getType()) {
case 'header':
this.headerTemplate = item.template;
break;
case 'content':
this.contentTemplate = item.template;
break;
default:
this.contentTemplate = item.template;
break;
}
});
}
get selected() {
return this._selected;
}
set selected(val) {
this._selected = val;
if (!this.loaded) {
this.cd.detectChanges();
}
if (val)
this.loaded = true;
}
get disabled() {
return this._disabled;
}
;
set disabled(disabled) {
this._disabled = disabled;
this.tabView.cd.markForCheck();
}
get header() {
return this._header;
}
set header(header) {
this._header = header;
this.tabView.cd.markForCheck();
}
get leftIcon() {
return this._leftIcon;
}
set leftIcon(leftIcon) {
this._leftIcon = leftIcon;
this.tabView.cd.markForCheck();
}
get rightIcon() {
return this._rightIcon;
}
set rightIcon(rightIcon) {
this._rightIcon = rightIcon;
this.tabView.cd.markForCheck();
}
ngOnDestroy() {
this.view = null;
}
}
TabPanel.decorators = [
{ type: Component, args: [{
selector: 'p-tabPanel',
template: `
`
},] }
];
TabPanel.ctorParameters = () => [
{ type: undefined, decorators: [{ type: Inject, args: [forwardRef(() => TabView),] }] },
{ type: ViewContainerRef },
{ type: ChangeDetectorRef }
];
TabPanel.propDecorators = {
closable: [{ type: Input }],
headerStyle: [{ type: Input }],
headerStyleClass: [{ type: Input }],
cache: [{ type: Input }],
tooltip: [{ type: Input }],
tooltipPosition: [{ type: Input }],
tooltipPositionStyle: [{ type: Input }],
tooltipStyleClass: [{ type: Input }],
templates: [{ type: ContentChildren, args: [PrimeTemplate,] }],
selected: [{ type: Input }],
disabled: [{ type: Input }],
header: [{ type: Input }],
leftIcon: [{ type: Input }],
rightIcon: [{ type: Input }]
};
class TabView {
constructor(el, cd) {
this.el = el;
this.cd = cd;
this.orientation = 'top';
this.onChange = new EventEmitter();
this.onClose = new EventEmitter();
this.activeIndexChange = new EventEmitter();
}
ngAfterContentInit() {
this.initTabs();
this.tabPanels.changes.subscribe(_ => {
this.initTabs();
});
}
ngAfterViewChecked() {
if (this.tabChanged) {
this.updateInkBar();
this.tabChanged = false;
}
}
initTabs() {
this.tabs = this.tabPanels.toArray();
let selectedTab = this.findSelectedTab();
if (!selectedTab && this.tabs.length) {
if (this.activeIndex != null && this.tabs.length > this.activeIndex)
this.tabs[this.activeIndex].selected = true;
else
this.tabs[0].selected = true;
this.tabChanged = true;
}
this.cd.markForCheck();
}
open(event, tab) {
if (tab.disabled) {
if (event) {
event.preventDefault();
}
return;
}
if (!tab.selected) {
let selectedTab = this.findSelectedTab();
if (selectedTab) {
selectedTab.selected = false;
}
this.tabChanged = true;
tab.selected = true;
let selectedTabIndex = this.findTabIndex(tab);
this.preventActiveIndexPropagation = true;
this.activeIndexChange.emit(selectedTabIndex);
this.onChange.emit({ originalEvent: event, index: selectedTabIndex });
}
if (event) {
event.preventDefault();
}
}
close(event, tab) {
if (this.controlClose) {
this.onClose.emit({
originalEvent: event,
index: this.findTabIndex(tab),
close: () => {
this.closeTab(tab);
}
});
}
else {
this.closeTab(tab);
this.onClose.emit({
originalEvent: event,
index: this.findTabIndex(tab)
});
}
event.stopPropagation();
}
closeTab(tab) {
if (tab.disabled) {
return;
}
if (tab.selected) {
this.tabChanged = true;
tab.selected = false;
for (let i = 0; i < this.tabs.length; i++) {
let tabPanel = this.tabs[i];
if (!tabPanel.closed && !tab.disabled) {
tabPanel.selected = true;
break;
}
}
}
tab.closed = true;
}
findSelectedTab() {
for (let i = 0; i < this.tabs.length; i++) {
if (this.tabs[i].selected) {
return this.tabs[i];
}
}
return null;
}
findTabIndex(tab) {
let index = -1;
for (let i = 0; i < this.tabs.length; i++) {
if (this.tabs[i] == tab) {
index = i;
break;
}
}
return index;
}
getBlockableElement() {
return this.el.nativeElement.children[0];
}
get activeIndex() {
return this._activeIndex;
}
set activeIndex(val) {
this._activeIndex = val;
if (this.preventActiveIndexPropagation) {
this.preventActiveIndexPropagation = false;
return;
}
if (this.tabs && this.tabs.length && this._activeIndex != null && this.tabs.length > this._activeIndex) {
this.findSelectedTab().selected = false;
this.tabs[this._activeIndex].selected = true;
}
}
updateInkBar() {
let tabHeader = DomHandler.findSingle(this.navbar.nativeElement, 'li.p-highlight');
this.inkbar.nativeElement.style.width = DomHandler.getWidth(tabHeader) + 'px';
this.inkbar.nativeElement.style.left = DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(this.navbar.nativeElement).left + 'px';
}
}
TabView.decorators = [
{ type: Component, args: [{
selector: 'p-tabView',
template: `
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
styles: [".p-tabview-nav{display:flex;flex-wrap:wrap;list-style-type:none;margin:0;padding:0}.p-tabview-nav-link{-ms-user-select:none;-webkit-user-select:none;align-items:center;cursor:pointer;display:flex;overflow:hidden;position:relative;text-decoration:none;user-select:none}.p-tabview-ink-bar{display:none;z-index:1}.p-tabview-nav-link:focus{z-index:1}.p-tabview-title{line-height:1}.p-tabview-close{z-index:1}"]
},] }
];
TabView.ctorParameters = () => [
{ type: ElementRef },
{ type: ChangeDetectorRef }
];
TabView.propDecorators = {
orientation: [{ type: Input }],
style: [{ type: Input }],
styleClass: [{ type: Input }],
controlClose: [{ type: Input }],
navbar: [{ type: ViewChild, args: ['navbar',] }],
inkbar: [{ type: ViewChild, args: ['inkbar',] }],
tabPanels: [{ type: ContentChildren, args: [TabPanel,] }],
onChange: [{ type: Output }],
onClose: [{ type: Output }],
activeIndexChange: [{ type: Output }],
activeIndex: [{ type: Input }]
};
class TabViewModule {
}
TabViewModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, SharedModule, TooltipModule, RippleModule],
exports: [TabView, TabPanel, SharedModule],
declarations: [TabView, TabPanel]
},] }
];
/**
* Generated bundle index. Do not edit.
*/
export { TabPanel, TabView, TabViewModule };
//# sourceMappingURL=primeng-tabview.js.map