import * as i0 from '@angular/core'; import { forwardRef, Component, Inject, Input, ContentChildren, EventEmitter, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, Output, NgModule } from '@angular/core'; import * as i1 from '@angular/common'; import { CommonModule } from '@angular/common'; import * as i3 from 'primeng/tooltip'; import { TooltipModule } from 'primeng/tooltip'; import * as i2 from 'primeng/ripple'; 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TabPanel, deps: [{ token: forwardRef(() => TabView) }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); TabPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: TabPanel, selector: "p-tabPanel", inputs: { closable: "closable", headerStyle: "headerStyle", headerStyleClass: "headerStyleClass", cache: "cache", tooltip: "tooltip", tooltipPosition: "tooltipPosition", tooltipPositionStyle: "tooltipPositionStyle", tooltipStyleClass: "tooltipStyleClass", selected: "selected", disabled: "disabled", header: "header", leftIcon: "leftIcon", rightIcon: "rightIcon" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], ngImport: i0, template: `
`, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TabPanel, decorators: [{ type: Component, args: [{ selector: 'p-tabPanel', template: `
`, host: { 'class': 'p-element' } }] }], ctorParameters: function () { return [{ type: undefined, decorators: [{ type: Inject, args: [forwardRef(() => TabView)] }] }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; }, 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(); this.backwardIsDisabled = true; this.forwardIsDisabled = false; } 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 }); this.updateScrollBar(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; this.tabChanged = true; this.updateScrollBar(val); } } 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'; } updateScrollBar(index) { let tabHeader = this.navbar.nativeElement.children[index]; tabHeader.scrollIntoView({ block: 'nearest' }); } updateButtonState() { const content = this.content.nativeElement; const { scrollLeft, scrollWidth } = content; const width = DomHandler.getWidth(content); this.backwardIsDisabled = scrollLeft === 0; this.forwardIsDisabled = scrollLeft === scrollWidth - width; } onScroll(event) { this.scrollable && this.updateButtonState(); event.preventDefault(); } getVisibleButtonWidths() { return [this.prevBtn?.nativeElement, this.nextBtn?.nativeElement].reduce((acc, el) => el ? acc + DomHandler.getWidth(el) : acc, 0); } navBackward() { const content = this.content.nativeElement; const width = DomHandler.getWidth(content) - this.getVisibleButtonWidths(); const pos = content.scrollLeft - width; content.scrollLeft = pos <= 0 ? 0 : pos; } navForward() { const content = this.content.nativeElement; const width = DomHandler.getWidth(content) - this.getVisibleButtonWidths(); const pos = content.scrollLeft + width; const lastPos = content.scrollWidth - width; content.scrollLeft = pos >= lastPos ? lastPos : pos; } } TabView.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TabView, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); TabView.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: TabView, selector: "p-tabView", inputs: { orientation: "orientation", style: "style", styleClass: "styleClass", controlClose: "controlClose", scrollable: "scrollable", activeIndex: "activeIndex" }, outputs: { onChange: "onChange", onClose: "onClose", activeIndexChange: "activeIndexChange" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "tabPanels", predicate: TabPanel }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "navbar", first: true, predicate: ["navbar"], descendants: true }, { propertyName: "prevBtn", first: true, predicate: ["prevBtn"], descendants: true }, { propertyName: "nextBtn", first: true, predicate: ["nextBtn"], descendants: true }, { propertyName: "inkbar", first: true, predicate: ["inkbar"], descendants: true }], ngImport: i0, template: `
`, isInline: true, styles: [".p-tabview-nav-container{position:relative}.p-tabview-scrollable .p-tabview-nav-container{overflow:hidden}.p-tabview-nav-content{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;-ms-scroll-chaining:contain auto;overscroll-behavior:contain auto}.p-tabview-nav{display:flex;margin:0;padding:0;list-style-type:none;flex:1 1 auto}.p-tabview-nav-link{cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;position:relative;text-decoration:none;overflow:hidden}.p-tabview-ink-bar{display:none;z-index:1}.p-tabview-nav-link:focus{z-index:1}.p-tabview-title{line-height:1;white-space:nowrap}.p-tabview-nav-btn{position:absolute;top:0;z-index:2;height:100%;display:flex;align-items:center;justify-content:center}.p-tabview-nav-prev{left:0}.p-tabview-nav-next{right:0}.p-tabview-nav-content::-webkit-scrollbar{display:none}.p-tabview-close{z-index:1}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.Ripple, selector: "[pRipple]" }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TabView, decorators: [{ type: Component, args: [{ selector: 'p-tabView', template: `
`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'p-element' }, styles: [".p-tabview-nav-container{position:relative}.p-tabview-scrollable .p-tabview-nav-container{overflow:hidden}.p-tabview-nav-content{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;-ms-scroll-chaining:contain auto;overscroll-behavior:contain auto}.p-tabview-nav{display:flex;margin:0;padding:0;list-style-type:none;flex:1 1 auto}.p-tabview-nav-link{cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;position:relative;text-decoration:none;overflow:hidden}.p-tabview-ink-bar{display:none;z-index:1}.p-tabview-nav-link:focus{z-index:1}.p-tabview-title{line-height:1;white-space:nowrap}.p-tabview-nav-btn{position:absolute;top:0;z-index:2;height:100%;display:flex;align-items:center;justify-content:center}.p-tabview-nav-prev{left:0}.p-tabview-nav-next{right:0}.p-tabview-nav-content::-webkit-scrollbar{display:none}.p-tabview-close{z-index:1}\n"] }] }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { orientation: [{ type: Input }], style: [{ type: Input }], styleClass: [{ type: Input }], controlClose: [{ type: Input }], scrollable: [{ type: Input }], content: [{ type: ViewChild, args: ['content'] }], navbar: [{ type: ViewChild, args: ['navbar'] }], prevBtn: [{ type: ViewChild, args: ['prevBtn'] }], nextBtn: [{ type: ViewChild, args: ['nextBtn'] }], 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TabViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); TabViewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TabViewModule, declarations: [TabView, TabPanel], imports: [CommonModule, SharedModule, TooltipModule, RippleModule], exports: [TabView, TabPanel, SharedModule] }); TabViewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TabViewModule, imports: [[CommonModule, SharedModule, TooltipModule, RippleModule], SharedModule] }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: 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 };