gnezim
290 lines
11 KiB
JavaScript
290 lines
11 KiB
JavaScript
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();
|
|
}
|
|
this.loaded = true;
|
|
}
|
|
get disabled() {
|
|
return this._disabled;
|
|
}
|
|
;
|
|
set disabled(disabled) {
|
|
this._disabled = disabled;
|
|
this.tabView.cd.markForCheck();
|
|
}
|
|
ngOnDestroy() {
|
|
this.view = null;
|
|
}
|
|
}
|
|
TabPanel.decorators = [
|
|
{ type: Component, args: [{
|
|
selector: 'p-tabPanel',
|
|
template: `
|
|
<div [attr.id]="id" class="p-tabview-panel" [hidden]="!selected"
|
|
role="tabpanel" [attr.aria-hidden]="!selected" [attr.aria-labelledby]="id + '-label'" *ngIf="!closed">
|
|
<ng-content></ng-content>
|
|
<ng-container *ngIf="contentTemplate && (cache ? loaded : selected)">
|
|
<ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
|
|
</ng-container>
|
|
</div>
|
|
`
|
|
},] }
|
|
];
|
|
TabPanel.ctorParameters = () => [
|
|
{ type: undefined, decorators: [{ type: Inject, args: [forwardRef(() => TabView),] }] },
|
|
{ type: ViewContainerRef },
|
|
{ type: ChangeDetectorRef }
|
|
];
|
|
TabPanel.propDecorators = {
|
|
header: [{ type: Input }],
|
|
closable: [{ type: Input }],
|
|
headerStyle: [{ type: Input }],
|
|
headerStyleClass: [{ type: Input }],
|
|
leftIcon: [{ type: Input }],
|
|
rightIcon: [{ 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 }]
|
|
};
|
|
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: `
|
|
<div [ngClass]="'p-tabview p-component'" [ngStyle]="style" [class]="styleClass">
|
|
<ul #navbar class="p-tabview-nav" role="tablist">
|
|
<ng-template ngFor let-tab [ngForOf]="tabs">
|
|
<li role="presentation" [ngClass]="{'p-highlight': tab.selected, 'p-disabled': tab.disabled}" [ngStyle]="tab.headerStyle" [class]="tab.headerStyleClass" *ngIf="!tab.closed">
|
|
<a role="tab" class="p-tabview-nav-link" [attr.id]="tab.id + '-label'" [attr.aria-selected]="tab.selected" [attr.aria-controls]="tab.id" [pTooltip]="tab.tooltip" [tooltipPosition]="tab.tooltipPosition"
|
|
[attr.aria-selected]="tab.selected" [positionStyle]="tab.tooltipPositionStyle" [tooltipStyleClass]="tab.tooltipStyleClass"
|
|
(click)="open($event,tab)" (keydown.enter)="open($event,tab)" pRipple [attr.tabindex]="tab.disabled ? null : '0'">
|
|
<ng-container *ngIf="!tab.headerTemplate">
|
|
<span class="p-tabview-left-icon" [ngClass]="tab.leftIcon" *ngIf="tab.leftIcon"></span>
|
|
<span class="p-tabview-title">{{tab.header}}</span>
|
|
<span class="p-tabview-right-icon" [ngClass]="tab.rightIcon" *ngIf="tab.rightIcon"></span>
|
|
</ng-container>
|
|
<ng-container *ngTemplateOutlet="tab.headerTemplate"></ng-container>
|
|
<span *ngIf="tab.closable" class="p-tabview-close pi pi-times" (click)="close($event,tab)"></span>
|
|
</a>
|
|
</li>
|
|
</ng-template>
|
|
<li #inkbar class="p-tabview-ink-bar"></li>
|
|
</ul>
|
|
<div class="p-tabview-panels">
|
|
<ng-content></ng-content>
|
|
</div>
|
|
</div>
|
|
`,
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
encapsulation: ViewEncapsulation.None,
|
|
styles: [".p-tabview-nav{-ms-flex-wrap:wrap;display:-ms-flexbox;display:flex;flex-wrap:wrap;list-style-type:none;margin:0;padding:0}.p-tabview-nav-link{-moz-user-select:none;-ms-flex-align:center;-ms-user-select:none;-webkit-user-select:none;align-items:center;cursor:pointer;display:-ms-flexbox;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
|