primeng 16.0.2 → 16.2.0

package/fesm2022/primeng-tabview.mjs

@@ -11,13 +11,14 @@ import * as i3 from 'primeng/ripple';
 import { RippleModule } from 'primeng/ripple';
 import * as i2 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
+import { UniqueComponentId } from 'primeng/utils';
 
-let idx = 0;
 /**
  * TabPanel is a helper component for TabView component.
  * @group Components
  */
 class TabPanel {
+    el;
     viewContainer;
     cd;
     /**
@@ -137,17 +138,19 @@ class TabPanel {
     _leftIcon;
     _rightIcon = undefined;
     loaded = false;
-    id = `p-tabpanel-${idx++}`;
+    id;
     contentTemplate;
     headerTemplate;
     leftIconTemplate;
     rightIconTemplate;
     closeIconTemplate;
     tabView;
-    constructor(tabView, viewContainer, cd) {
+    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) => {
@@ -176,9 +179,18 @@ class TabPanel {
     ngOnDestroy() {
         this.view = null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TabPanel, deps: [{ token: forwardRef(() => TabView) }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", 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: `
-        <div [attr.id]="id" class="p-tabview-panel" [hidden]="!selected" role="tabpanel" [attr.aria-hidden]="!selected" [attr.aria-labelledby]="id + '-label'" *ngIf="!closed">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", 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: "14.0.0", version: "16.2.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: `
+        <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>
@@ -186,12 +198,21 @@ class TabPanel {
         </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: "16.0.2", ngImport: i0, type: TabPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: 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">
+        <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>
@@ -205,7 +226,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
         }], ctorParameters: function () { return [{ type: TabView, decorators: [{
                     type: Inject,
                     args: [forwardRef(() => TabView)]
-                }] }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { closable: [{
+                }] }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { closable: [{
                 type: Input
             }], headerStyle: [{
                 type: Input
@@ -243,6 +264,7 @@ class TabView {
     platformId;
     el;
     cd;
+    renderer;
     /**
      * Inline style of the component.
      * @group Props
@@ -285,6 +307,16 @@ class TabView {
             this.updateScrollBar(val);
         }
     }
+    /**
+     * When enabled, the focused tab is activated.
+     * @group Props
+     */
+    selectOnFocus = false;
+    /**
+     * Index of the element in tabbing order.
+     * @group Props
+     */
+    tabindex = 0;
     /**
      * Callback to invoke on tab change.
      * @param {TabViewChangeEvent} event - Custom tab change event
@@ -320,10 +352,14 @@ class TabView {
     tabChangesSubscription;
     nextIconTemplate;
     previousIconTemplate;
-    constructor(platformId, el, cd) {
+    resizeObserver;
+    shouldVisible;
+    elementToObserve;
+    constructor(platformId, el, cd, renderer) {
         this.platformId = platformId;
         this.el = el;
         this.cd = cd;
+        this.renderer = renderer;
     }
     ngAfterContentInit() {
         this.initTabs();
@@ -341,6 +377,28 @@ class TabView {
             }
         });
     }
+    ngAfterViewInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.bindResizeObserver();
+        }
+    }
+    bindResizeObserver() {
+        if (!this.resizeObserver) {
+            this.resizeObserver = new ResizeObserver((entries) => {
+                for (let entry of entries) {
+                    const navbarWidth = parseFloat(getComputedStyle(this.navbar.nativeElement).width);
+                    const rect = entry.contentRect;
+                    this.shouldVisible = rect.width < navbarWidth;
+                    this.cd.detectChanges();
+                }
+            });
+            this.resizeObserver.observe(this.elementToObserve.nativeElement);
+        }
+    }
+    unbindResizeObserver() {
+        this.resizeObserver.unobserve(this.elementToObserve.nativeElement);
+        this.resizeObserver = null;
+    }
     ngAfterViewChecked() {
         if (isPlatformBrowser(this.platformId)) {
             if (this.tabChanged) {
@@ -353,6 +411,15 @@ class TabView {
         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();
@@ -366,6 +433,93 @@ class TabView {
         }
         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) {
@@ -487,33 +641,35 @@ class TabView {
         const lastPos = content.scrollWidth - width;
         content.scrollLeft = pos >= lastPos ? lastPos : pos;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TabView, deps: [{ token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: TabView, selector: "p-tabView", inputs: { 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 }, { 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 }], ngImport: i0, template: `
-        <div [ngClass]="{ 'p-tabview p-component': true, 'p-tabview-scrollable': scrollable }" [ngStyle]="style" [class]="styleClass">
-            <div class="p-tabview-nav-container">
-                <button *ngIf="scrollable && !backwardIsDisabled" #prevBtn class="p-tabview-nav-prev p-tabview-nav-btn p-link" (click)="navBackward()" type="button" pRipple>
-                    <ChevronLeftIcon *ngIf="!previousIconTemplate" />
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", 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: "14.0.0", version: "16.2.0", type: TabView, selector: "p-tabView", inputs: { style: "style", styleClass: "styleClass", controlClose: "controlClose", scrollable: "scrollable", activeIndex: "activeIndex", selectOnFocus: "selectOnFocus", tabindex: "tabindex" }, 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" #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)">
                     <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">
+                        <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"
-                                    [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"
+                                    [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.enter)="open($event, tab)"
+                                    (keydown)="onTabKeyDown($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 && !tab.leftIconTemplate"></span>
@@ -529,17 +685,26 @@ class TabView {
                                     <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="p - tabview - close"></span>
+                                        <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"></li>
+                        <li #inkbar class="p-tabview-ink-bar" [attr.data-pc-section]="'inkbar'"></li>
                     </ul>
                 </div>
-                <button *ngIf="scrollable && !forwardIsDisabled" #nextBtn class="p-tabview-nav-next p-tabview-nav-btn p-link" (click)="navForward()" type="button" pRipple>
-                    <ChevronRightIcon *ngIf="!nextIconTemplate" />
+                <button
+                    *ngIf="scrollable && !forwardIsDisabled && shouldVisible"
+                    #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>
@@ -547,36 +712,38 @@ class TabView {
                 <ng-content></ng-content>
             </div>
         </div>
-    `, 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;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;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(function () { return i1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(function () { return 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(function () { return i3.Ripple; }), selector: "[pRipple]" }, { kind: "component", type: i0.forwardRef(function () { return TimesIcon; }), selector: "TimesIcon" }, { kind: "component", type: i0.forwardRef(function () { return ChevronLeftIcon; }), selector: "ChevronLeftIcon" }, { kind: "component", type: i0.forwardRef(function () { return ChevronRightIcon; }), selector: "ChevronRightIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, 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;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(function () { return i1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(function () { return 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(function () { return i3.Ripple; }), selector: "[pRipple]" }, { kind: "component", type: i0.forwardRef(function () { return TimesIcon; }), selector: "TimesIcon" }, { kind: "component", type: i0.forwardRef(function () { return ChevronLeftIcon; }), selector: "ChevronLeftIcon" }, { kind: "component", type: i0.forwardRef(function () { return ChevronRightIcon; }), selector: "ChevronRightIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TabView, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", 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">
-            <div class="p-tabview-nav-container">
-                <button *ngIf="scrollable && !backwardIsDisabled" #prevBtn class="p-tabview-nav-prev p-tabview-nav-btn p-link" (click)="navBackward()" type="button" pRipple>
-                    <ChevronLeftIcon *ngIf="!previousIconTemplate" />
+        <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" #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)">
                     <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">
+                        <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"
-                                    [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"
+                                    [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.enter)="open($event, tab)"
+                                    (keydown)="onTabKeyDown($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 && !tab.leftIconTemplate"></span>
@@ -592,17 +759,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                                     <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="p - tabview - close"></span>
+                                        <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"></li>
+                        <li #inkbar class="p-tabview-ink-bar" [attr.data-pc-section]="'inkbar'"></li>
                     </ul>
                 </div>
-                <button *ngIf="scrollable && !forwardIsDisabled" #nextBtn class="p-tabview-nav-next p-tabview-nav-btn p-link" (click)="navForward()" type="button" pRipple>
-                    <ChevronRightIcon *ngIf="!nextIconTemplate" />
+                <button
+                    *ngIf="scrollable && !forwardIsDisabled && shouldVisible"
+                    #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>
@@ -612,11 +788,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
         </div>
     `, 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;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;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"] }]
+                    }, 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;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: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
-                }] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { style: [{
+                }] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { style: [{
                 type: Input
             }], styleClass: [{
                 type: Input
@@ -626,6 +802,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                 type: Input
             }], activeIndex: [{
                 type: Input
+            }], selectOnFocus: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
             }], onChange: [{
                 type: Output
             }], onClose: [{
@@ -653,13 +833,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
             }], templates: [{
                 type: ContentChildren,
                 args: [PrimeTemplate]
+            }], elementToObserve: [{
+                type: ViewChild,
+                args: ['elementToObserve']
             }] } });
 class TabViewModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TabViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.2", 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: "16.0.2", ngImport: i0, type: TabViewModule, imports: [CommonModule, SharedModule, TooltipModule, RippleModule, TimesIcon, ChevronLeftIcon, ChevronRightIcon, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TabViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.0", 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: "16.2.0", ngImport: i0, type: TabViewModule, imports: [CommonModule, SharedModule, TooltipModule, RippleModule, TimesIcon, ChevronLeftIcon, ChevronRightIcon, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TabViewModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TabViewModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, SharedModule, TooltipModule, RippleModule, TimesIcon, ChevronLeftIcon, ChevronRightIcon],