937 lines
106 KiB
JavaScript
937 lines
106 KiB
JavaScript
|
import { CommonModule, isPlatformBrowser } from '@angular/common';
|
||
|
|
import { ChangeDetectionStrategy, Component, ContentChildren, EventEmitter, Inject, Input, NgModule, Output, PLATFORM_ID, ViewChild, ViewEncapsulation, booleanAttribute, forwardRef, numberAttribute } from '@angular/core';
|
||
|
|
import { PrimeTemplate, SharedModule } from 'primeng/api';
|
||
|
|
import { DomHandler } from 'primeng/dom';
|
||
|
|
import { ChevronLeftIcon } from 'primeng/icons/chevronleft';
|
||
|
|
import { ChevronRightIcon } from 'primeng/icons/chevronright';
|
||
|
|
import { TimesIcon } from 'primeng/icons/times';
|
||
|
|
import { RippleModule } from 'primeng/ripple';
|
||
|
|
import { TooltipModule } from 'primeng/tooltip';
|
||
|
|
import { UniqueComponentId } from 'primeng/utils';
|
||
|
|
import * as i0 from "@angular/core";
|
||
|
|
import * as i1 from "@angular/common";
|
||
|
|
import * as i2 from "primeng/tooltip";
|
||
|
|
import * as i3 from "primeng/ripple";
|
||
|
|
/**
|
||
|
|
* TabPanel is a helper component for TabView component.
|
||
|
|
* @group Components
|
||
|
|
*/
|
||
|
|
export class TabPanel {
|
||
|
|
el;
|
||
|
|
viewContainer;
|
||
|
|
cd;
|
||
|
|
/**
|
||
|
|
* Defines if tab can be removed.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
closable = false;
|
||
|
|
/**
|
||
|
|
* Inline style of the tab header.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
get headerStyle() {
|
||
|
|
return this._headerStyle;
|
||
|
|
}
|
||
|
|
set headerStyle(headerStyle) {
|
||
|
|
this._headerStyle = headerStyle;
|
||
|
|
this.tabView.cd.markForCheck();
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Style class of the tab header.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
get headerStyleClass() {
|
||
|
|
return this._headerStyleClass;
|
||
|
|
}
|
||
|
|
set headerStyleClass(headerStyleClass) {
|
||
|
|
this._headerStyleClass = headerStyleClass;
|
||
|
|
this.tabView.cd.markForCheck();
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Whether a lazy loaded panel should avoid getting loaded again on reselection.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
cache = true;
|
||
|
|
/**
|
||
|
|
* Advisory information to display in a tooltip on hover.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
tooltip;
|
||
|
|
/**
|
||
|
|
* Position of the tooltip.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
tooltipPosition = 'top';
|
||
|
|
/**
|
||
|
|
* Type of CSS position.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
tooltipPositionStyle = 'absolute';
|
||
|
|
/**
|
||
|
|
* Style class of the tooltip.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
tooltipStyleClass;
|
||
|
|
/**
|
||
|
|
* Defines if tab is active.
|
||
|
|
* @defaultValue false
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
get selected() {
|
||
|
|
return !!this._selected;
|
||
|
|
}
|
||
|
|
set selected(val) {
|
||
|
|
this._selected = val;
|
||
|
|
if (!this.loaded) {
|
||
|
|
this.cd.detectChanges();
|
||
|
|
}
|
||
|
|
if (val)
|
||
|
|
this.loaded = true;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* When true, tab cannot be activated.
|
||
|
|
* @defaultValue false
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
get disabled() {
|
||
|
|
return !!this._disabled;
|
||
|
|
}
|
||
|
|
set disabled(disabled) {
|
||
|
|
this._disabled = disabled;
|
||
|
|
this.tabView.cd.markForCheck();
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Title of the tabPanel.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
get header() {
|
||
|
|
return this._header;
|
||
|
|
}
|
||
|
|
set header(header) {
|
||
|
|
this._header = header;
|
||
|
|
// We have to wait for the rendering and then retrieve the actual size element from the DOM.
|
||
|
|
// in future `Promise.resolve` can be changed to `queueMicrotask` (if ie11 support will be dropped)
|
||
|
|
Promise.resolve().then(() => {
|
||
|
|
this.tabView.updateInkBar();
|
||
|
|
this.tabView.cd.markForCheck();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Left icon of the tabPanel.
|
||
|
|
* @group Props
|
||
|
|
* @deprecated since v15.4.2, use `lefticon` template instead.
|
||
|
|
*/
|
||
|
|
get leftIcon() {
|
||
|
|
return this._leftIcon;
|
||
|
|
}
|
||
|
|
set leftIcon(leftIcon) {
|
||
|
|
this._leftIcon = leftIcon;
|
||
|
|
this.tabView.cd.markForCheck();
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Left icon of the tabPanel.
|
||
|
|
* @group Props
|
||
|
|
* @deprecated since v15.4.2, use `righticon` template instead.
|
||
|
|
*/
|
||
|
|
get rightIcon() {
|
||
|
|
return this._rightIcon;
|
||
|
|
}
|
||
|
|
set rightIcon(rightIcon) {
|
||
|
|
this._rightIcon = rightIcon;
|
||
|
|
this.tabView.cd.markForCheck();
|
||
|
|
}
|
||
|
|
templates;
|
||
|
|
closed = false;
|
||
|
|
view = null;
|
||
|
|
_headerStyle;
|
||
|
|
_headerStyleClass;
|
||
|
|
_selected;
|
||
|
|
_disabled;
|
||
|
|
_header;
|
||
|
|
_leftIcon;
|
||
|
|
_rightIcon = undefined;
|
||
|
|
loaded = false;
|
||
|
|
id;
|
||
|
|
contentTemplate;
|
||
|
|
headerTemplate;
|
||
|
|
leftIconTemplate;
|
||
|
|
rightIconTemplate;
|
||
|
|
closeIconTemplate;
|
||
|
|
tabView;
|
||
|
|
constructor(tabView, el, viewContainer, cd) {
|
||
|
|
this.el = el;
|
||
|
|
this.viewContainer = viewContainer;
|
||
|
|
this.cd = cd;
|
||
|
|
this.tabView = tabView;
|
||
|
|
this.id = UniqueComponentId();
|
||
|
|
}
|
||
|
|
ngAfterContentInit() {
|
||
|
|
this.templates.forEach((item) => {
|
||
|
|
switch (item.getType()) {
|
||
|
|
case 'header':
|
||
|
|
this.headerTemplate = item.template;
|
||
|
|
break;
|
||
|
|
case 'content':
|
||
|
|
this.contentTemplate = item.template;
|
||
|
|
break;
|
||
|
|
case 'righticon':
|
||
|
|
this.rightIconTemplate = item.template;
|
||
|
|
break;
|
||
|
|
case 'lefticon':
|
||
|
|
this.leftIconTemplate = item.template;
|
||
|
|
break;
|
||
|
|
case 'closeicon':
|
||
|
|
this.closeIconTemplate = item.template;
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
this.contentTemplate = item.template;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
ngOnDestroy() {
|
||
|
|
this.view = null;
|
||
|
|
}
|
||
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TabPanel, deps: [{ token: forwardRef(() => TabView) }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
||
|
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.7", type: TabPanel, selector: "p-tabPanel", inputs: { closable: ["closable", "closable", booleanAttribute], headerStyle: "headerStyle", headerStyleClass: "headerStyleClass", cache: ["cache", "cache", booleanAttribute], 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: `
|
||
|
|
<div
|
||
|
|
*ngIf="!closed"
|
||
|
|
class="p-tabview-panel"
|
||
|
|
role="tabpanel"
|
||
|
|
[hidden]="!selected"
|
||
|
|
[attr.id]="tabView.getTabContentId(id)"
|
||
|
|
[attr.aria-hidden]="!selected"
|
||
|
|
[attr.aria-labelledby]="tabView.getTabHeaderActionId(id)"
|
||
|
|
[attr.data-pc-name]="'tabpanel'"
|
||
|
|
>
|
||
|
|
<ng-content></ng-content>
|
||
|
|
<ng-container *ngIf="contentTemplate && (cache ? loaded : selected)">
|
||
|
|
<ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
|
||
|
|
</ng-container>
|
||
|
|
</div>
|
||
|
|
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
||
|
|
}
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TabPanel, decorators: [{
|
||
|
|
type: Component,
|
||
|
|
args: [{
|
||
|
|
selector: 'p-tabPanel',
|
||
|
|
template: `
|
||
|
|
<div
|
||
|
|
*ngIf="!closed"
|
||
|
|
class="p-tabview-panel"
|
||
|
|
role="tabpanel"
|
||
|
|
[hidden]="!selected"
|
||
|
|
[attr.id]="tabView.getTabContentId(id)"
|
||
|
|
[attr.aria-hidden]="!selected"
|
||
|
|
[attr.aria-labelledby]="tabView.getTabHeaderActionId(id)"
|
||
|
|
[attr.data-pc-name]="'tabpanel'"
|
||
|
|
>
|
||
|
|
<ng-content></ng-content>
|
||
|
|
<ng-container *ngIf="contentTemplate && (cache ? loaded : selected)">
|
||
|
|
<ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
|
||
|
|
</ng-container>
|
||
|
|
</div>
|
||
|
|
`,
|
||
|
|
host: {
|
||
|
|
class: 'p-element'
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
}], ctorParameters: () => [{ type: TabView, decorators: [{
|
||
|
|
type: Inject,
|
||
|
|
args: [forwardRef(() => TabView)]
|
||
|
|
}] }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }], propDecorators: { closable: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: booleanAttribute }]
|
||
|
|
}], headerStyle: [{
|
||
|
|
type: Input
|
||
|
|
}], headerStyleClass: [{
|
||
|
|
type: Input
|
||
|
|
}], cache: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: booleanAttribute }]
|
||
|
|
}], tooltip: [{
|
||
|
|
type: Input
|
||
|
|
}], tooltipPosition: [{
|
||
|
|
type: Input
|
||
|
|
}], tooltipPositionStyle: [{
|
||
|
|
type: Input
|
||
|
|
}], tooltipStyleClass: [{
|
||
|
|
type: Input
|
||
|
|
}], selected: [{
|
||
|
|
type: Input
|
||
|
|
}], disabled: [{
|
||
|
|
type: Input
|
||
|
|
}], header: [{
|
||
|
|
type: Input
|
||
|
|
}], leftIcon: [{
|
||
|
|
type: Input
|
||
|
|
}], rightIcon: [{
|
||
|
|
type: Input
|
||
|
|
}], templates: [{
|
||
|
|
type: ContentChildren,
|
||
|
|
args: [PrimeTemplate]
|
||
|
|
}] } });
|
||
|
|
/**
|
||
|
|
* TabView is a container component to group content with tabs.
|
||
|
|
* @group Components
|
||
|
|
*/
|
||
|
|
export class TabView {
|
||
|
|
platformId;
|
||
|
|
el;
|
||
|
|
cd;
|
||
|
|
renderer;
|
||
|
|
/**
|
||
|
|
* Inline style of the component.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
style;
|
||
|
|
/**
|
||
|
|
* Style class of the component.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
styleClass;
|
||
|
|
/**
|
||
|
|
* Whether tab close is controlled at onClose event or not.
|
||
|
|
* @defaultValue false
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
controlClose;
|
||
|
|
/**
|
||
|
|
* When enabled displays buttons at each side of the tab headers to scroll the tab list.
|
||
|
|
* @defaultValue false
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
scrollable;
|
||
|
|
/**
|
||
|
|
* Index of the active tab to change selected tab programmatically.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* When enabled, the focused tab is activated.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
selectOnFocus = false;
|
||
|
|
/**
|
||
|
|
* Used to define a string aria label attribute the forward navigation button.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
nextButtonAriaLabel;
|
||
|
|
/**
|
||
|
|
* Used to define a string aria label attribute the backward navigation button.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
prevButtonAriaLabel;
|
||
|
|
/**
|
||
|
|
* When activated, navigation buttons will automatically hide or show based on the available space within the container.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
autoHideButtons = true;
|
||
|
|
/**
|
||
|
|
* Index of the element in tabbing order.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
tabindex = 0;
|
||
|
|
/**
|
||
|
|
* Callback to invoke on tab change.
|
||
|
|
* @param {TabViewChangeEvent} event - Custom tab change event
|
||
|
|
* @group Emits
|
||
|
|
*/
|
||
|
|
onChange = new EventEmitter();
|
||
|
|
/**
|
||
|
|
* Callback to invoke on tab close.
|
||
|
|
* @param {TabViewCloseEvent} event - Custom tab close event
|
||
|
|
* @group Emits
|
||
|
|
*/
|
||
|
|
onClose = new EventEmitter();
|
||
|
|
/**
|
||
|
|
* Callback to invoke on the active tab change.
|
||
|
|
* @param {number} index - New active index
|
||
|
|
* @group Emits
|
||
|
|
*/
|
||
|
|
activeIndexChange = new EventEmitter();
|
||
|
|
content;
|
||
|
|
navbar;
|
||
|
|
prevBtn;
|
||
|
|
nextBtn;
|
||
|
|
inkbar;
|
||
|
|
tabPanels;
|
||
|
|
templates;
|
||
|
|
initialized;
|
||
|
|
tabs;
|
||
|
|
_activeIndex;
|
||
|
|
preventActiveIndexPropagation;
|
||
|
|
tabChanged;
|
||
|
|
backwardIsDisabled = true;
|
||
|
|
forwardIsDisabled = false;
|
||
|
|
tabChangesSubscription;
|
||
|
|
nextIconTemplate;
|
||
|
|
previousIconTemplate;
|
||
|
|
resizeObserver;
|
||
|
|
container;
|
||
|
|
list;
|
||
|
|
buttonVisible;
|
||
|
|
elementToObserve;
|
||
|
|
constructor(platformId, el, cd, renderer) {
|
||
|
|
this.platformId = platformId;
|
||
|
|
this.el = el;
|
||
|
|
this.cd = cd;
|
||
|
|
this.renderer = renderer;
|
||
|
|
}
|
||
|
|
ngAfterContentInit() {
|
||
|
|
this.initTabs();
|
||
|
|
this.tabChangesSubscription = this.tabPanels.changes.subscribe((_) => {
|
||
|
|
this.initTabs();
|
||
|
|
this.refreshButtonState();
|
||
|
|
});
|
||
|
|
this.templates.forEach((item) => {
|
||
|
|
switch (item.getType()) {
|
||
|
|
case 'previousicon':
|
||
|
|
this.previousIconTemplate = item.template;
|
||
|
|
break;
|
||
|
|
case 'nexticon':
|
||
|
|
this.nextIconTemplate = item.template;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
ngAfterViewInit() {
|
||
|
|
if (isPlatformBrowser(this.platformId)) {
|
||
|
|
if (this.autoHideButtons) {
|
||
|
|
this.bindResizeObserver();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
bindResizeObserver() {
|
||
|
|
this.container = DomHandler.findSingle(this.el.nativeElement, '[data-pc-section="navcontent"]');
|
||
|
|
this.list = DomHandler.findSingle(this.el.nativeElement, '[data-pc-section="nav"]');
|
||
|
|
this.resizeObserver = new ResizeObserver(() => {
|
||
|
|
if (this.list.offsetWidth >= this.container.offsetWidth) {
|
||
|
|
this.buttonVisible = true;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.buttonVisible = false;
|
||
|
|
}
|
||
|
|
this.updateButtonState();
|
||
|
|
this.cd.detectChanges();
|
||
|
|
});
|
||
|
|
this.resizeObserver.observe(this.container);
|
||
|
|
}
|
||
|
|
unbindResizeObserver() {
|
||
|
|
this.resizeObserver.unobserve(this.elementToObserve.nativeElement);
|
||
|
|
this.resizeObserver = null;
|
||
|
|
}
|
||
|
|
ngAfterViewChecked() {
|
||
|
|
if (isPlatformBrowser(this.platformId)) {
|
||
|
|
if (this.tabChanged) {
|
||
|
|
this.updateInkBar();
|
||
|
|
this.tabChanged = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
ngOnDestroy() {
|
||
|
|
if (this.tabChangesSubscription) {
|
||
|
|
this.tabChangesSubscription.unsubscribe();
|
||
|
|
}
|
||
|
|
if (this.resizeObserver) {
|
||
|
|
this.unbindResizeObserver();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
getTabHeaderActionId(tabId) {
|
||
|
|
return `${tabId}_header_action`;
|
||
|
|
}
|
||
|
|
getTabContentId(tabId) {
|
||
|
|
return `${tabId}_content`;
|
||
|
|
}
|
||
|
|
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();
|
||
|
|
}
|
||
|
|
onTabKeyDown(event, tab) {
|
||
|
|
switch (event.code) {
|
||
|
|
case 'ArrowLeft':
|
||
|
|
this.onTabArrowLeftKey(event);
|
||
|
|
break;
|
||
|
|
case 'ArrowRight':
|
||
|
|
this.onTabArrowRightKey(event);
|
||
|
|
break;
|
||
|
|
case 'Home':
|
||
|
|
this.onTabHomeKey(event);
|
||
|
|
break;
|
||
|
|
case 'End':
|
||
|
|
this.onTabEndKey(event);
|
||
|
|
break;
|
||
|
|
case 'PageDown':
|
||
|
|
this.onTabEndKey(event);
|
||
|
|
break;
|
||
|
|
case 'PageUp':
|
||
|
|
this.onTabHomeKey(event);
|
||
|
|
break;
|
||
|
|
case 'Enter':
|
||
|
|
case 'Space':
|
||
|
|
this.open(event, tab);
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
onTabArrowLeftKey(event) {
|
||
|
|
const prevHeaderAction = this.findPrevHeaderAction(event.target.parentElement);
|
||
|
|
const index = DomHandler.getAttribute(prevHeaderAction, 'data-pc-index');
|
||
|
|
prevHeaderAction ? this.changeFocusedTab(event, prevHeaderAction, index) : this.onTabEndKey(event);
|
||
|
|
event.preventDefault();
|
||
|
|
}
|
||
|
|
onTabArrowRightKey(event) {
|
||
|
|
const nextHeaderAction = this.findNextHeaderAction(event.target.parentElement);
|
||
|
|
const index = DomHandler.getAttribute(nextHeaderAction, 'data-pc-index');
|
||
|
|
nextHeaderAction ? this.changeFocusedTab(event, nextHeaderAction, index) : this.onTabHomeKey(event);
|
||
|
|
event.preventDefault();
|
||
|
|
}
|
||
|
|
onTabHomeKey(event) {
|
||
|
|
const firstHeaderAction = this.findFirstHeaderAction();
|
||
|
|
const index = DomHandler.getAttribute(firstHeaderAction, 'data-pc-index');
|
||
|
|
this.changeFocusedTab(event, firstHeaderAction, index);
|
||
|
|
event.preventDefault();
|
||
|
|
}
|
||
|
|
onTabEndKey(event) {
|
||
|
|
const lastHeaderAction = this.findLastHeaderAction();
|
||
|
|
const index = DomHandler.getAttribute(lastHeaderAction, 'data-pc-index');
|
||
|
|
this.changeFocusedTab(event, lastHeaderAction, index);
|
||
|
|
event.preventDefault();
|
||
|
|
}
|
||
|
|
changeFocusedTab(event, element, index) {
|
||
|
|
if (element) {
|
||
|
|
DomHandler.focus(element);
|
||
|
|
element.scrollIntoView({ block: 'nearest' });
|
||
|
|
if (this.selectOnFocus) {
|
||
|
|
const tab = this.tabs[index];
|
||
|
|
this.open(event, tab);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
findNextHeaderAction(tabElement, selfCheck = false) {
|
||
|
|
const headerElement = selfCheck ? tabElement : tabElement.nextElementSibling;
|
||
|
|
return headerElement
|
||
|
|
? DomHandler.getAttribute(headerElement, 'data-p-disabled') || DomHandler.getAttribute(headerElement, 'data-pc-section') === 'inkbar'
|
||
|
|
? this.findNextHeaderAction(headerElement)
|
||
|
|
: DomHandler.findSingle(headerElement, '[data-pc-section="headeraction"]')
|
||
|
|
: null;
|
||
|
|
}
|
||
|
|
findPrevHeaderAction(tabElement, selfCheck = false) {
|
||
|
|
const headerElement = selfCheck ? tabElement : tabElement.previousElementSibling;
|
||
|
|
return headerElement
|
||
|
|
? DomHandler.getAttribute(headerElement, 'data-p-disabled') || DomHandler.getAttribute(headerElement, 'data-pc-section') === 'inkbar'
|
||
|
|
? this.findPrevHeaderAction(headerElement)
|
||
|
|
: DomHandler.findSingle(headerElement, '[data-pc-section="headeraction"]')
|
||
|
|
: null;
|
||
|
|
}
|
||
|
|
findFirstHeaderAction() {
|
||
|
|
const firstEl = this.navbar.nativeElement.firstElementChild;
|
||
|
|
return this.findNextHeaderAction(firstEl, true);
|
||
|
|
}
|
||
|
|
findLastHeaderAction() {
|
||
|
|
const lastEl = this.navbar.nativeElement.lastElementChild;
|
||
|
|
const lastHeaderAction = DomHandler.getAttribute(lastEl, 'data-pc-section') === 'inkbar' ? lastEl.previousElementSibling : lastEl;
|
||
|
|
return this.findPrevHeaderAction(lastHeaderAction, true);
|
||
|
|
}
|
||
|
|
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)
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
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];
|
||
|
|
}
|
||
|
|
updateInkBar() {
|
||
|
|
if (isPlatformBrowser(this.platformId)) {
|
||
|
|
if (this.navbar) {
|
||
|
|
const tabHeader = DomHandler.findSingle(this.navbar.nativeElement, 'li.p-highlight');
|
||
|
|
if (!tabHeader) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
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];
|
||
|
|
if (tabHeader) {
|
||
|
|
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 = Math.round(scrollLeft) === scrollWidth - width;
|
||
|
|
}
|
||
|
|
refreshButtonState() {
|
||
|
|
this.container = DomHandler.findSingle(this.el.nativeElement, '[data-pc-section="navcontent"]');
|
||
|
|
this.list = DomHandler.findSingle(this.el.nativeElement, '[data-pc-section="nav"]');
|
||
|
|
if (this.list.offsetWidth >= this.container.offsetWidth) {
|
||
|
|
if (this.list.offsetWidth >= this.container.offsetWidth) {
|
||
|
|
this.buttonVisible = true;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.buttonVisible = false;
|
||
|
|
}
|
||
|
|
this.updateButtonState();
|
||
|
|
this.cd.markForCheck();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TabView, deps: [{ token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
||
|
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.7", type: TabView, selector: "p-tabView", inputs: { style: "style", styleClass: "styleClass", controlClose: ["controlClose", "controlClose", booleanAttribute], scrollable: ["scrollable", "scrollable", booleanAttribute], activeIndex: "activeIndex", selectOnFocus: ["selectOnFocus", "selectOnFocus", booleanAttribute], nextButtonAriaLabel: "nextButtonAriaLabel", prevButtonAriaLabel: "prevButtonAriaLabel", autoHideButtons: ["autoHideButtons", "autoHideButtons", booleanAttribute], tabindex: ["tabindex", "tabindex", numberAttribute] }, outputs: { onChange: "onChange", onClose: "onClose", activeIndexChange: "activeIndexChange" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "tabPanels", predicate: TabPanel }, { propertyName: "templates", predicate: PrimeTemplate }], 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 }, { propertyName: "elementToObserve", first: true, predicate: ["elementToObserve"], descendants: true }], ngImport: i0, template: `
|
||
|
|
<div [ngClass]="{ 'p-tabview p-component': true, 'p-tabview-scrollable': scrollable }" [ngStyle]="style" [class]="styleClass" [attr.data-pc-name]="'tabview'">
|
||
|
|
<div #elementToObserve class="p-tabview-nav-container">
|
||
|
|
<button
|
||
|
|
*ngIf="scrollable && !backwardIsDisabled && autoHideButtons"
|
||
|
|
#prevBtn
|
||
|
|
class="p-tabview-nav-prev p-tabview-nav-btn p-link"
|
||
|
|
(click)="navBackward()"
|
||
|
|
[attr.tabindex]="tabindex"
|
||
|
|
[attr.aria-label]="prevButtonAriaLabel"
|
||
|
|
type="button"
|
||
|
|
pRipple
|
||
|
|
>
|
||
|
|
<ChevronLeftIcon *ngIf="!previousIconTemplate" [attr.aria-hidden]="true" />
|
||
|
|
<ng-template *ngTemplateOutlet="previousIconTemplate"></ng-template>
|
||
|
|
</button>
|
||
|
|
<div #content class="p-tabview-nav-content" (scroll)="onScroll($event)" [attr.data-pc-section]="'navcontent'">
|
||
|
|
<ul #navbar class="p-tabview-nav" role="tablist" [attr.data-pc-section]="'nav'">
|
||
|
|
<ng-template ngFor let-tab [ngForOf]="tabs" let-i="index">
|
||
|
|
<li role="presentation" [ngClass]="{ 'p-highlight': tab.selected, 'p-disabled': tab.disabled }" [attr.data-p-disabled]="tab.disabled" [ngStyle]="tab.headerStyle" [class]="tab.headerStyleClass" *ngIf="!tab.closed">
|
||
|
|
<a
|
||
|
|
role="tab"
|
||
|
|
class="p-tabview-nav-link"
|
||
|
|
[pTooltip]="tab.tooltip"
|
||
|
|
[tooltipPosition]="tab.tooltipPosition"
|
||
|
|
[positionStyle]="tab.tooltipPositionStyle"
|
||
|
|
[tooltipStyleClass]="tab.tooltipStyleClass"
|
||
|
|
[attr.id]="getTabHeaderActionId(tab.id)"
|
||
|
|
[attr.aria-controls]="getTabContentId(tab.id)"
|
||
|
|
[attr.aria-selected]="tab.selected"
|
||
|
|
[attr.tabindex]="tab.disabled || !tab.selected ? '-1' : tabindex"
|
||
|
|
[attr.aria-disabled]="tab.disabled"
|
||
|
|
[attr.data-pc-index]="i"
|
||
|
|
[attr.data-pc-section]="'headeraction'"
|
||
|
|
(click)="open($event, tab)"
|
||
|
|
(keydown)="onTabKeyDown($event, tab)"
|
||
|
|
pRipple
|
||
|
|
>
|
||
|
|
<ng-container *ngIf="!tab.headerTemplate">
|
||
|
|
<span class="p-tabview-left-icon" [ngClass]="tab.leftIcon" *ngIf="tab.leftIcon && !tab.leftIconTemplate"></span>
|
||
|
|
<span *ngIf="tab.leftIconTemplate" class="p-tabview-left-icon">
|
||
|
|
<ng-template *ngTemplateOutlet="tab.leftIconTemplate"></ng-template>
|
||
|
|
</span>
|
||
|
|
<span class="p-tabview-title">{{ tab.header }}</span>
|
||
|
|
<span class="p-tabview-right-icon" [ngClass]="tab.rightIcon" *ngIf="tab.rightIcon && !tab.rightIconTemplate"></span>
|
||
|
|
<span *ngIf="tab.rightIconTemplate" class="p-tabview-right-icon">
|
||
|
|
<ng-template *ngTemplateOutlet="tab.rightIconTemplate"></ng-template>
|
||
|
|
</span>
|
||
|
|
</ng-container>
|
||
|
|
<ng-container *ngTemplateOutlet="tab.headerTemplate"></ng-container>
|
||
|
|
<ng-container *ngIf="tab.closable">
|
||
|
|
<TimesIcon *ngIf="!tab.closeIconTemplate" [styleClass]="'p-tabview-close'" (click)="close($event, tab)" />
|
||
|
|
<span class="tab.closeIconTemplate" *ngIf="tab.closeIconTemplate"></span>
|
||
|
|
<ng-template *ngTemplateOutlet="tab.closeIconTemplate"></ng-template>
|
||
|
|
</ng-container>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ng-template>
|
||
|
|
<li #inkbar class="p-tabview-ink-bar" role="presentation" aria-hidden="true" [attr.data-pc-section]="'inkbar'"></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
*ngIf="scrollable && !forwardIsDisabled && buttonVisible"
|
||
|
|
#nextBtn
|
||
|
|
[attr.tabindex]="tabindex"
|
||
|
|
[attr.aria-label]="nextButtonAriaLabel"
|
||
|
|
class="p-tabview-nav-next p-tabview-nav-btn p-link"
|
||
|
|
(click)="navForward()"
|
||
|
|
type="button"
|
||
|
|
pRipple
|
||
|
|
>
|
||
|
|
<ChevronRightIcon *ngIf="!nextIconTemplate" [attr.aria-hidden]="true" />
|
||
|
|
<ng-template *ngTemplateOutlet="nextIconTemplate"></ng-template>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="p-tabview-panels">
|
||
|
|
<ng-content></ng-content>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`, isInline: true, styles: ["@layer primeng{.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;overscroll-behavior:contain auto}.p-tabview-nav{display:inline-flex;min-width:100%;margin:0;padding:0;list-style-type:none;flex:1 1 auto}.p-tabview-nav-link{cursor:pointer;-webkit-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"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => i2.Tooltip), selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i0.forwardRef(() => i3.Ripple), selector: "[pRipple]" }, { kind: "component", type: i0.forwardRef(() => TimesIcon), selector: "TimesIcon" }, { kind: "component", type: i0.forwardRef(() => ChevronLeftIcon), selector: "ChevronLeftIcon" }, { kind: "component", type: i0.forwardRef(() => ChevronRightIcon), selector: "ChevronRightIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
||
|
|
}
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TabView, decorators: [{
|
||
|
|
type: Component,
|
||
|
|
args: [{ selector: 'p-tabView', template: `
|
||
|
|
<div [ngClass]="{ 'p-tabview p-component': true, 'p-tabview-scrollable': scrollable }" [ngStyle]="style" [class]="styleClass" [attr.data-pc-name]="'tabview'">
|
||
|
|
<div #elementToObserve class="p-tabview-nav-container">
|
||
|
|
<button
|
||
|
|
*ngIf="scrollable && !backwardIsDisabled && autoHideButtons"
|
||
|
|
#prevBtn
|
||
|
|
class="p-tabview-nav-prev p-tabview-nav-btn p-link"
|
||
|
|
(click)="navBackward()"
|
||
|
|
[attr.tabindex]="tabindex"
|
||
|
|
[attr.aria-label]="prevButtonAriaLabel"
|
||
|
|
type="button"
|
||
|
|
pRipple
|
||
|
|
>
|
||
|
|
<ChevronLeftIcon *ngIf="!previousIconTemplate" [attr.aria-hidden]="true" />
|
||
|
|
<ng-template *ngTemplateOutlet="previousIconTemplate"></ng-template>
|
||
|
|
</button>
|
||
|
|
<div #content class="p-tabview-nav-content" (scroll)="onScroll($event)" [attr.data-pc-section]="'navcontent'">
|
||
|
|
<ul #navbar class="p-tabview-nav" role="tablist" [attr.data-pc-section]="'nav'">
|
||
|
|
<ng-template ngFor let-tab [ngForOf]="tabs" let-i="index">
|
||
|
|
<li role="presentation" [ngClass]="{ 'p-highlight': tab.selected, 'p-disabled': tab.disabled }" [attr.data-p-disabled]="tab.disabled" [ngStyle]="tab.headerStyle" [class]="tab.headerStyleClass" *ngIf="!tab.closed">
|
||
|
|
<a
|
||
|
|
role="tab"
|
||
|
|
class="p-tabview-nav-link"
|
||
|
|
[pTooltip]="tab.tooltip"
|
||
|
|
[tooltipPosition]="tab.tooltipPosition"
|
||
|
|
[positionStyle]="tab.tooltipPositionStyle"
|
||
|
|
[tooltipStyleClass]="tab.tooltipStyleClass"
|
||
|
|
[attr.id]="getTabHeaderActionId(tab.id)"
|
||
|
|
[attr.aria-controls]="getTabContentId(tab.id)"
|
||
|
|
[attr.aria-selected]="tab.selected"
|
||
|
|
[attr.tabindex]="tab.disabled || !tab.selected ? '-1' : tabindex"
|
||
|
|
[attr.aria-disabled]="tab.disabled"
|
||
|
|
[attr.data-pc-index]="i"
|
||
|
|
[attr.data-pc-section]="'headeraction'"
|
||
|
|
(click)="open($event, tab)"
|
||
|
|
(keydown)="onTabKeyDown($event, tab)"
|
||
|
|
pRipple
|
||
|
|
>
|
||
|
|
<ng-container *ngIf="!tab.headerTemplate">
|
||
|
|
<span class="p-tabview-left-icon" [ngClass]="tab.leftIcon" *ngIf="tab.leftIcon && !tab.leftIconTemplate"></span>
|
||
|
|
<span *ngIf="tab.leftIconTemplate" class="p-tabview-left-icon">
|
||
|
|
<ng-template *ngTemplateOutlet="tab.leftIconTemplate"></ng-template>
|
||
|
|
</span>
|
||
|
|
<span class="p-tabview-title">{{ tab.header }}</span>
|
||
|
|
<span class="p-tabview-right-icon" [ngClass]="tab.rightIcon" *ngIf="tab.rightIcon && !tab.rightIconTemplate"></span>
|
||
|
|
<span *ngIf="tab.rightIconTemplate" class="p-tabview-right-icon">
|
||
|
|
<ng-template *ngTemplateOutlet="tab.rightIconTemplate"></ng-template>
|
||
|
|
</span>
|
||
|
|
</ng-container>
|
||
|
|
<ng-container *ngTemplateOutlet="tab.headerTemplate"></ng-container>
|
||
|
|
<ng-container *ngIf="tab.closable">
|
||
|
|
<TimesIcon *ngIf="!tab.closeIconTemplate" [styleClass]="'p-tabview-close'" (click)="close($event, tab)" />
|
||
|
|
<span class="tab.closeIconTemplate" *ngIf="tab.closeIconTemplate"></span>
|
||
|
|
<ng-template *ngTemplateOutlet="tab.closeIconTemplate"></ng-template>
|
||
|
|
</ng-container>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ng-template>
|
||
|
|
<li #inkbar class="p-tabview-ink-bar" role="presentation" aria-hidden="true" [attr.data-pc-section]="'inkbar'"></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
*ngIf="scrollable && !forwardIsDisabled && buttonVisible"
|
||
|
|
#nextBtn
|
||
|
|
[attr.tabindex]="tabindex"
|
||
|
|
[attr.aria-label]="nextButtonAriaLabel"
|
||
|
|
class="p-tabview-nav-next p-tabview-nav-btn p-link"
|
||
|
|
(click)="navForward()"
|
||
|
|
type="button"
|
||
|
|
pRipple
|
||
|
|
>
|
||
|
|
<ChevronRightIcon *ngIf="!nextIconTemplate" [attr.aria-hidden]="true" />
|
||
|
|
<ng-template *ngTemplateOutlet="nextIconTemplate"></ng-template>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="p-tabview-panels">
|
||
|
|
<ng-content></ng-content>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
||
|
|
class: 'p-element'
|
||
|
|
}, styles: ["@layer primeng{.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;overscroll-behavior:contain auto}.p-tabview-nav{display:inline-flex;min-width:100%;margin:0;padding:0;list-style-type:none;flex:1 1 auto}.p-tabview-nav-link{cursor:pointer;-webkit-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: () => [{ type: undefined, decorators: [{
|
||
|
|
type: Inject,
|
||
|
|
args: [PLATFORM_ID]
|
||
|
|
}] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }], propDecorators: { style: [{
|
||
|
|
type: Input
|
||
|
|
}], styleClass: [{
|
||
|
|
type: Input
|
||
|
|
}], controlClose: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: booleanAttribute }]
|
||
|
|
}], scrollable: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: booleanAttribute }]
|
||
|
|
}], activeIndex: [{
|
||
|
|
type: Input
|
||
|
|
}], selectOnFocus: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: booleanAttribute }]
|
||
|
|
}], nextButtonAriaLabel: [{
|
||
|
|
type: Input
|
||
|
|
}], prevButtonAriaLabel: [{
|
||
|
|
type: Input
|
||
|
|
}], autoHideButtons: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: booleanAttribute }]
|
||
|
|
}], tabindex: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: numberAttribute }]
|
||
|
|
}], onChange: [{
|
||
|
|
type: Output
|
||
|
|
}], onClose: [{
|
||
|
|
type: Output
|
||
|
|
}], activeIndexChange: [{
|
||
|
|
type: Output
|
||
|
|
}], 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]
|
||
|
|
}], templates: [{
|
||
|
|
type: ContentChildren,
|
||
|
|
args: [PrimeTemplate]
|
||
|
|
}], elementToObserve: [{
|
||
|
|
type: ViewChild,
|
||
|
|
args: ['elementToObserve']
|
||
|
|
}] } });
|
||
|
|
export class TabViewModule {
|
||
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TabViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
||
|
|
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.7", ngImport: i0, type: TabViewModule, declarations: [TabView, TabPanel], imports: [CommonModule, SharedModule, TooltipModule, RippleModule, TimesIcon, ChevronLeftIcon, ChevronRightIcon], exports: [TabView, TabPanel, SharedModule] });
|
||
|
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TabViewModule, imports: [CommonModule, SharedModule, TooltipModule, RippleModule, TimesIcon, ChevronLeftIcon, ChevronRightIcon, SharedModule] });
|
||
|
|
}
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TabViewModule, decorators: [{
|
||
|
|
type: NgModule,
|
||
|
|
args: [{
|
||
|
|
imports: [CommonModule, SharedModule, TooltipModule, RippleModule, TimesIcon, ChevronLeftIcon, ChevronRightIcon],
|
||
|
|
exports: [TabView, TabPanel, SharedModule],
|
||
|
|
declarations: [TabView, TabPanel]
|
||
|
|
}]
|
||
|
|
}] });
|
||
|
|
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFidmlldy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9hcHAvY29tcG9uZW50cy90YWJ2aWV3L3RhYnZpZXcudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQ2xFLE9BQU8sRUFHSCx1QkFBdUIsRUFFdkIsU0FBUyxFQUNULGVBQWUsRUFHZixZQUFZLEVBQ1osTUFBTSxFQUNOLEtBQUssRUFDTCxRQUFRLEVBRVIsTUFBTSxFQUNOLFdBQVcsRUFJWCxTQUFTLEVBRVQsaUJBQWlCLEVBQ2pCLGdCQUFnQixFQUNoQixVQUFVLEVBQ1YsZUFBZSxFQUVsQixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQWUsYUFBYSxFQUFFLFlBQVksRUFBRSxNQUFNLGFBQWEsQ0FBQztBQUN2RSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sYUFBYSxDQUFDO0FBQ3pDLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUM1RCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUM5RCxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDaEQsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzlDLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUdoRCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7O0FBR2xEOzs7R0FHRztBQXdCSCxNQUFNLE9BQU8sUUFBUTtJQWdLdUQ7SUFBdUI7SUFBd0M7SUEvSnZJOzs7T0FHRztJQUNxQyxRQUFRLEdBQXdCLEtBQUssQ0FBQztJQUM5RTs7O09BR0c7SUFDSCxJQUFhLFdBQVc7UUFDcEIsT0FBTyxJQUFJLENBQUMsWUFBWSxDQUFDO0lBQzdCLENBQUM7SUFDRCxJQUFJLFdB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
|