primeng 18.0.0-beta.2 → 18.0.0-beta.3

package/fesm2022/primeng-tabs.mjs

@@ -1,18 +1,16 @@
 import * as i1 from '@angular/common';
 import { CommonModule, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, inject, forwardRef, booleanAttribute, Component, Input, ContentChildren, EventEmitter, numberAttribute, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, Output, ViewChild, NgModule } from '@angular/core';
-import { PrimeTemplate, SharedModule } from 'primeng/api';
+import { Injectable, Component, ChangeDetectionStrategy, ViewEncapsulation, inject, forwardRef, model, computed, signal, effect, ContentChild, ViewChild, ContentChildren, input, booleanAttribute, HostListener, numberAttribute, NgModule } from '@angular/core';
+import { BaseComponent } from 'primeng/basecomponent';
+import { BaseStyle } from 'primeng/base';
+import { ObjectUtils, UniqueComponentId } from 'primeng/utils';
+import * as i2 from 'primeng/ripple';
+import { RippleModule, Ripple } from 'primeng/ripple';
 import { DomHandler } from 'primeng/dom';
 import { ChevronLeftIcon } from 'primeng/icons/chevronleft';
 import { ChevronRightIcon } from 'primeng/icons/chevronright';
-import { TimesIcon } from 'primeng/icons/times';
-import { Ripple } from 'primeng/ripple';
-import * as i2 from 'primeng/tooltip';
-import { TooltipModule } from 'primeng/tooltip';
-import { UniqueComponentId } from 'primeng/utils';
-import { BaseStyle } from 'primeng/base';
-import { BaseComponent } from 'primeng/basecomponent';
+import { PrimeTemplate } from 'primeng/api';
 
 const theme = ({ dt }) => `
 .p-tabs {
@@ -222,987 +220,563 @@ var TabsClasses;
     TabsClasses["tabpanel"] = "p-tabs-panel";
 })(TabsClasses || (TabsClasses = {}));
 
+/**
+ * TabPanels is a helper component for Tabs component.
+ * @group Components
+ */
+class TabPanels extends BaseComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TabPanels, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: TabPanels, isStandalone: true, selector: "p-tabpanels", host: { properties: { "class.p-tabpanels": "true", "class.p-component": "true", "attr.data-pc-name": "\"tabpanels\"", "attr.role": "\"presentation\"" } }, usesInheritance: true, ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TabPanels, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-tabpanels',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: ` <ng-content></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class.p-tabpanels]': 'true',
+                        '[class.p-component]': 'true',
+                        '[attr.data-pc-name]': '"tabpanels"',
+                        '[attr.role]': '"presentation"',
+                    },
+                }]
+        }] });
+
 /**
  * TabPanel is a helper component for Tabs component.
  * @group Components
  */
 class TabPanel extends BaseComponent {
+    pcTabs = inject(forwardRef(() => Tabs));
     /**
-     * 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.tabs.cd.markForCheck();
-    }
-    /**
-     * Style class of the tab header.
-     * @group Props
-     */
-    get headerStyleClass() {
-        return this._headerStyleClass;
-    }
-    set headerStyleClass(headerStyleClass) {
-        this._headerStyleClass = headerStyleClass;
-        this.tabs.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.
+     * Value of the active tab.
+     * @defaultValue undefined
      * @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.tabs.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.tabs.updateInkBar();
-            this.tabs.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.tabs.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.tabs.cd.markForCheck();
-    }
-    templates;
-    closed = false;
-    _headerStyle;
-    _headerStyleClass;
-    _selected;
-    _disabled;
-    _header;
-    _leftIcon;
-    _rightIcon = undefined;
-    loaded = false;
-    id = UniqueComponentId();
-    contentTemplate;
-    headerTemplate;
-    leftIconTemplate;
-    rightIconTemplate;
-    closeIconTemplate;
-    tabs = inject(forwardRef(() => Tabs));
-    _componentStyle = inject(TabsStyle);
-    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;
-            }
-        });
-    }
+    value = model(undefined);
+    id = computed(() => `${this.pcTabs.id()}_tabpanel_${this.value()}`);
+    ariaLabelledby = computed(() => `${this.pcTabs.id()}_tab_${this.value()}`);
+    active = computed(() => ObjectUtils.equals(this.pcTabs.value(), this.value()));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TabPanel, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.2", type: TabPanel, isStandalone: true, 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" }, providers: [TabsStyle], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, ngImport: i0, template: `
-        <div
-            *ngIf="!closed"
-            class="p-tabs-panel"
-            role="tabpanel"
-            [hidden]="!selected"
-            [attr.id]="tabs.getTabContentId(id)"
-            [attr.aria-hidden]="!selected"
-            [attr.aria-labelledby]="tabs.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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SharedModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: TabPanel, isStandalone: true, selector: "p-tabpanel", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.p-tabpanel": "true", "class.p-component": "true", "attr.data-pc-name": "\"tabpanel\"", "attr.id": "id()", "attr.role": "\"tabpanel\"", "attr.aria-labelledby": "ariaLabelledby()", "attr.data-p-active": "active()" } }, usesInheritance: true, ngImport: i0, template: `@if (active()) {
+        <ng-content></ng-content>
+    }`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TabPanel, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-tabpanel',
                     standalone: true,
-                    imports: [CommonModule, SharedModule],
-                    template: `
-        <div
-            *ngIf="!closed"
-            class="p-tabs-panel"
-            role="tabpanel"
-            [hidden]="!selected"
-            [attr.id]="tabs.getTabContentId(id)"
-            [attr.aria-hidden]="!selected"
-            [attr.aria-labelledby]="tabs.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>
-    `,
-                    providers: [TabsStyle],
+                    imports: [CommonModule],
+                    template: `@if (active()) {
+        <ng-content></ng-content>
+    }`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class.p-tabpanel]': 'true',
+                        '[class.p-component]': 'true',
+                        '[attr.data-pc-name]': '"tabpanel"',
+                        '[attr.id]': 'id()',
+                        '[attr.role]': '"tabpanel"',
+                        '[attr.aria-labelledby]': 'ariaLabelledby()',
+                        '[attr.data-p-active]': 'active()',
+                    },
                 }]
-        }], 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]
-            }] } });
+        }] });
+
 /**
- * Tabs is a container component to group content with tabs.
+ * TabList is a helper component for Tabs component.
  * @group Components
  */
-class Tabs extends BaseComponent {
-    get hostClass() {
-        return this.styleClass;
-    }
-    get hostStyle() {
-        return this.style;
-    }
-    /**
-     * 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;
+class TabList extends BaseComponent {
     /**
-     * Index of the active tab to change selected tab programmatically.
-     * @group Props
+     * A template reference variable that represents the previous icon in a UI component.
+     * @type {TemplateRef<any> | undefined}
+     * @group Templates
      */
-    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);
-        }
-    }
+    prevIconTemplate;
     /**
-     * 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
+     * A template reference variable that represents the next icon in a UI component.
+     * @type {TemplateRef<any> | undefined}
+     * @group Templates
      */
-    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 {TabsChangeEvent} event - Custom tab change event
-     * @group Emits
-     */
-    onChange = new EventEmitter();
-    /**
-     * Callback to invoke on tab close.
-     * @param {TabsCloseEvent} 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();
+    nextIconTemplate;
     content;
-    navbar;
-    prevBtn;
-    nextBtn;
+    prevButton;
+    nextButton;
     inkbar;
-    tabPanels;
-    templates;
-    initialized;
     tabs;
-    _activeIndex;
-    preventActiveIndexPropagation;
-    tabChanged;
-    backwardIsDisabled = true;
-    forwardIsDisabled = false;
-    tabChangesSubscription;
-    nextIconTemplate;
-    previousIconTemplate;
+    templates;
+    pcTabs = inject(forwardRef(() => Tabs));
+    isPrevButtonEnabled = signal(false);
+    isNextButtonEnabled = signal(false);
     resizeObserver;
-    container;
-    list;
-    buttonVisible;
-    elementToObserve;
-    _componentStyle = inject(TabsStyle);
-    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;
+    showNavigators = computed(() => this.pcTabs.showNavigators());
+    tabindex = computed(() => this.pcTabs.tabindex());
+    scrollable = computed(() => this.pcTabs.scrollable());
+    get prevButtonAriaLabel() {
+        return this.config.translation.aria.previous;
+    }
+    get nextButtonAriaLabel() {
+        return this.config.translation.aria.next;
+    }
+    constructor() {
+        super();
+        effect(() => {
+            this.pcTabs.value();
+            if (isPlatformBrowser(this.platformId)) {
+                setTimeout(() => {
+                    this.updateInkBar();
+                });
             }
         });
     }
     ngAfterViewInit() {
         super.ngAfterViewInit();
-        if (isPlatformBrowser(this.platformId)) {
-            if (this.autoHideButtons) {
-                this.bindResizeObserver();
-            }
+        if (this.showNavigators() && isPlatformBrowser(this.platformId)) {
+            this.updateButtonState();
+            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;
+    ngAfterContentInit() {
+        this.templates.forEach((t) => {
+            switch (t.getType()) {
+                case 'previcon':
+                    this.prevIconTemplate = t.template;
+                    break;
+                case 'nexticon':
+                    this.nextIconTemplate = t.template;
+                    break;
             }
-            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();
-        }
+        this.unbindResizeObserver();
         super.ngOnDestroy();
     }
-    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.currentTarget);
-        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.currentTarget);
-        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);
+    onScroll(event) {
+        this.showNavigators() && this.updateButtonState();
         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)
-                : headerElement
-            : 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)
-                : headerElement
-            : 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),
-            });
-        }
-        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];
+    onPrevButtonClick() {
+        const _content = this.content.nativeElement;
+        const width = DomHandler.getWidth(_content);
+        const pos = _content.scrollLeft - width;
+        _content.scrollLeft = pos <= 0 ? 0 : pos;
     }
-    updateInkBar() {
-        if (isPlatformBrowser(this.platformId)) {
-            if (this.navbar) {
-                const tabHeader = DomHandler.findSingle(this.navbar.nativeElement, '[data-pc-section="headeraction"][data-p-active="true"]');
-                if (!tabHeader) {
-                    return;
-                }
-                this.inkbar.nativeElement.style.width = DomHandler.getOuterWidth(tabHeader) + 'px';
-                this.inkbar.nativeElement.style.left =
-                    DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(this.navbar.nativeElement).left + 'px';
-            }
-        }
-    }
-    updateScrollBar(index) {
-        let tabHeader = DomHandler.find(this.navbar.nativeElement, '[data-pc-section="headeraction"]')[index];
-        if (tabHeader) {
-            tabHeader.scrollIntoView({ block: 'nearest' });
-        }
+    onNextButtonClick() {
+        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;
     }
     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();
-        }
+        const _content = this.content?.nativeElement;
+        const _list = this.el?.nativeElement;
+        const { scrollLeft, scrollTop, scrollWidth, scrollHeight, offsetWidth, offsetHeight } = _content;
+        const [width, height] = [DomHandler.getWidth(_content), DomHandler.getHeight(_content)];
+        this.isPrevButtonEnabled.set(scrollLeft !== 0);
+        this.isNextButtonEnabled.set(_list.offsetWidth >= offsetWidth && scrollLeft !== scrollWidth - width);
     }
-    onScroll(event) {
-        this.scrollable && this.updateButtonState();
-        event.preventDefault();
+    updateInkBar() {
+        const _content = this.content.nativeElement;
+        const _inkbar = this.inkbar.nativeElement;
+        const _tabs = this.tabs.nativeElement;
+        const activeTab = DomHandler.findSingle(_content, '[data-pc-name="tab"][data-p-active="true"]');
+        _inkbar.style.width = DomHandler.getOuterWidth(activeTab) + 'px';
+        _inkbar.style.left = DomHandler.getOffset(activeTab).left - DomHandler.getOffset(_tabs).left + 'px';
     }
     getVisibleButtonWidths() {
-        return [this.prevBtn?.nativeElement, this.nextBtn?.nativeElement].reduce((acc, el) => (el ? acc + DomHandler.getWidth(el) : acc), 0);
+        const _prevBtn = this.prevButton?.nativeElement;
+        const _nextBtn = this.nextButton?.nativeElement;
+        return [_prevBtn, _nextBtn].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;
+    bindResizeObserver() {
+        this.resizeObserver = new ResizeObserver(() => this.updateButtonState());
+        this.resizeObserver.observe(this.el.nativeElement);
     }
-    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;
+    unbindResizeObserver() {
+        if (this.resizeObserver) {
+            this.resizeObserver.unobserve(this.el.nativeElement);
+            this.resizeObserver = null;
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: Tabs, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: Tabs, isStandalone: true, selector: "p-tabs", 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: { properties: { "class.p-tabs": "true", "class.p-tabs-scrollable": "scrollable", "class.p-component": "true", "attr.data-pc-name": "tabs", "class": "this.hostClass", "style": "this.hostStyle" } }, providers: [TabsStyle], 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 }], usesInheritance: true, ngImport: i0, template: `
-        <div #elementToObserve class="p-tablist">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TabList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: TabList, isStandalone: true, selector: "p-tablist", host: { properties: { "class.p-tablist": "true", "class.p-component": "true", "attr.data-pc-name": "\"tablist\"" } }, queries: [{ propertyName: "prevIconTemplate", first: true, predicate: ["previcon"], descendants: true }, { propertyName: "nextIconTemplate", first: true, predicate: ["nexticon"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "prevButton", first: true, predicate: ["prevButton"], descendants: true }, { propertyName: "nextButton", first: true, predicate: ["nextButton"], descendants: true }, { propertyName: "inkbar", first: true, predicate: ["inkbar"], descendants: true }, { propertyName: "tabs", first: true, predicate: ["tabs"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+        @if (showNavigators() && isPrevButtonEnabled()) {
             <button
-                *ngIf="scrollable && !backwardIsDisabled && autoHideButtons"
-                #prevBtn
-                class="p-tablist-prev-button p-tablist-nav-button"
-                (click)="navBackward()"
-                [attr.tabindex]="tabindex"
-                [attr.aria-label]="prevButtonAriaLabel"
-                type="button"
+                #prevButton
                 pRipple
+                class="p-tablist-nav-button p-tablist-prev-button"
+                [attr.aria-label]="prevButtonAriaLabel"
+                [attr.tabindex]="tabindex"
+                [attr.data-pc-group-section]="'navigator'"
+                (click)="onPrevButtonClick()"
             >
-                <ChevronLeftIcon *ngIf="!previousIconTemplate" [attr.aria-hidden]="true" />
-                <ng-template *ngTemplateOutlet="previousIconTemplate"></ng-template>
+                @if (prevIconTemplate) {
+                    <ng-container *ngTemplateOutlet="prevIconTemplate"></ng-container>
+                } @else {
+                    <ChevronLeftIcon />
+                }
             </button>
-            <div
-                #content
-                class="p-tablist-content"
-                [ngClass]="{ 'p-tablist-viewport': scrollable }"
-                (scroll)="onScroll($event)"
-                [attr.data-pc-section]="'navcontent'"
-            >
-                <div #navbar class="p-tablist-tab-list" role="tablist" [attr.data-pc-section]="'nav'">
-                    @for (tab of tabs; track tab; let i = $index) {
-                        @if (!tab.closed) {
-                            <button
-                                [ngClass]="{
-                                    'p-tab': true,
-                                    'p-tab-active': tab.selected,
-                                    'p-disabled': tab.disabled,
-                                }"
-                                [attr.role]="'tab'"
-                                [class]="tab.headerStyleClass"
-                                [ngStyle]="tab.headerStyle"
-                                [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"
-                                [disabled]="tab.disabled"
-                                [attr.data-pc-index]="i"
-                                [attr.data-p-disabled]="tab.disabled"
-                                [attr.data-pc-section]="'headeraction'"
-                                [attr.data-p-active]="tab.selected"
-                                (click)="open($event, tab)"
-                                (keydown)="onTabKeyDown($event, tab)"
-                                pRipple
-                            >
-                                @if (tab.headerTemplate) {
-                                    <ng-container *ngTemplateOutlet="tab.headerTemplate"></ng-container>
-                                } @else {
-                                    @if (tab.leftIconTemplate) {
-                                        <ng-template *ngTemplateOutlet="tab.leftIconTemplate"></ng-template>
-                                    } @else if (tab.leftIcon && !tab.leftIconTemplate) {
-                                        <span class="p-tabs-left-icon" [ngClass]="tab.leftIcon"></span>
-                                    }
-
-                                    {{ tab.header }}
-
-                                    @if (tab.rightIconTemplate) {
-                                        <ng-template *ngTemplateOutlet="tab.rightIconTemplate"></ng-template>
-                                    } @else if (tab.rightIcon && !tab.rightIconTemplate) {
-                                        <span class="p-tabs-right-icon" [ngClass]="tab.rightIcon"></span>
-                                    }
-
-                                    @if (tab.closable) {
-                                        @if (tab.closeIconTemplate) {
-                                            <ng-template *ngTemplateOutlet="tab.closeIconTemplate"></ng-template>
-                                        } @else {
-                                            <TimesIcon (click)="close($event, tab)" />
-                                        }
-                                    }
-                                }
-                            </button>
-                            <span
-                                #inkbar
-                                class="p-tablist-active-bar"
-                                role="presentation"
-                                [attr.aria-hidden]="true"
-                                [attr.data-pc-section]="'inkbar'"
-                            ></span>
-                        }
-                    }
-                </div>
+        }
+        <div #content class="p-tablist-content" [ngClass]="{ 'p-tablist-viewport': scrollable() }" (scroll)="onScroll($event)">
+            <div #tabs class="p-tablist-tab-list" role="tablist">
+                <ng-content></ng-content>
+                <span #inkbar role="presentation" class="p-tablist-active-bar" [attr.data-pc-section]="'inkbar'"></span>
             </div>
+        </div>
+        @if (showNavigators() && isNextButtonEnabled()) {
             <button
-                *ngIf="scrollable && !forwardIsDisabled && buttonVisible"
-                #nextBtn
-                [attr.tabindex]="tabindex"
-                [attr.aria-label]="nextButtonAriaLabel"
-                class="p-tablist-next-button p-tablist-nav-button"
-                (click)="navForward()"
-                type="button"
+                #nextButton
                 pRipple
+                class="p-tablist-nav-button p-tablist-next-button"
+                [attr.aria-label]="nextButtonAriaLabel"
+                [attr.tabindex]="tabindex"
+                [attr.data-pc-group-section]="'navigator'"
+                (click)="onNextButtonClick()"
             >
                 @if (nextIconTemplate) {
-                    <ng-template *ngTemplateOutlet="nextIconTemplate"></ng-template>
+                    <ng-container *ngTemplateOutlet="nextIconTemplate"></ng-container>
                 } @else {
-                    <ChevronRightIcon [attr.aria-hidden]="true" />
+                    <ChevronRightIcon />
                 }
             </button>
-        </div>
-        <div class="p-tabpanels">
-            <ng-content></ng-content>
-        </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: 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: Ripple, selector: "[pRipple]" }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "component", type: ChevronLeftIcon, selector: "ChevronLeftIcon" }, { kind: "component", type: ChevronRightIcon, selector: "ChevronRightIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChevronLeftIcon, selector: "ChevronLeftIcon" }, { kind: "component", type: ChevronRightIcon, selector: "ChevronRightIcon" }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i2.Ripple, selector: "[pRipple]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: Tabs, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TabList, decorators: [{
             type: Component,
             args: [{
-                    selector: 'p-tabs',
+                    selector: 'p-tablist',
                     standalone: true,
-                    imports: [CommonModule, TabPanel, SharedModule, TooltipModule, Ripple, TimesIcon, ChevronLeftIcon, ChevronRightIcon],
+                    imports: [CommonModule, ChevronLeftIcon, ChevronRightIcon, RippleModule],
                     template: `
-        <div #elementToObserve class="p-tablist">
+        @if (showNavigators() && isPrevButtonEnabled()) {
             <button
-                *ngIf="scrollable && !backwardIsDisabled && autoHideButtons"
-                #prevBtn
-                class="p-tablist-prev-button p-tablist-nav-button"
-                (click)="navBackward()"
-                [attr.tabindex]="tabindex"
-                [attr.aria-label]="prevButtonAriaLabel"
-                type="button"
+                #prevButton
                 pRipple
+                class="p-tablist-nav-button p-tablist-prev-button"
+                [attr.aria-label]="prevButtonAriaLabel"
+                [attr.tabindex]="tabindex"
+                [attr.data-pc-group-section]="'navigator'"
+                (click)="onPrevButtonClick()"
             >
-                <ChevronLeftIcon *ngIf="!previousIconTemplate" [attr.aria-hidden]="true" />
-                <ng-template *ngTemplateOutlet="previousIconTemplate"></ng-template>
+                @if (prevIconTemplate) {
+                    <ng-container *ngTemplateOutlet="prevIconTemplate"></ng-container>
+                } @else {
+                    <ChevronLeftIcon />
+                }
             </button>
-            <div
-                #content
-                class="p-tablist-content"
-                [ngClass]="{ 'p-tablist-viewport': scrollable }"
-                (scroll)="onScroll($event)"
-                [attr.data-pc-section]="'navcontent'"
-            >
-                <div #navbar class="p-tablist-tab-list" role="tablist" [attr.data-pc-section]="'nav'">
-                    @for (tab of tabs; track tab; let i = $index) {
-                        @if (!tab.closed) {
-                            <button
-                                [ngClass]="{
-                                    'p-tab': true,
-                                    'p-tab-active': tab.selected,
-                                    'p-disabled': tab.disabled,
-                                }"
-                                [attr.role]="'tab'"
-                                [class]="tab.headerStyleClass"
-                                [ngStyle]="tab.headerStyle"
-                                [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"
-                                [disabled]="tab.disabled"
-                                [attr.data-pc-index]="i"
-                                [attr.data-p-disabled]="tab.disabled"
-                                [attr.data-pc-section]="'headeraction'"
-                                [attr.data-p-active]="tab.selected"
-                                (click)="open($event, tab)"
-                                (keydown)="onTabKeyDown($event, tab)"
-                                pRipple
-                            >
-                                @if (tab.headerTemplate) {
-                                    <ng-container *ngTemplateOutlet="tab.headerTemplate"></ng-container>
-                                } @else {
-                                    @if (tab.leftIconTemplate) {
-                                        <ng-template *ngTemplateOutlet="tab.leftIconTemplate"></ng-template>
-                                    } @else if (tab.leftIcon && !tab.leftIconTemplate) {
-                                        <span class="p-tabs-left-icon" [ngClass]="tab.leftIcon"></span>
-                                    }
-
-                                    {{ tab.header }}
-
-                                    @if (tab.rightIconTemplate) {
-                                        <ng-template *ngTemplateOutlet="tab.rightIconTemplate"></ng-template>
-                                    } @else if (tab.rightIcon && !tab.rightIconTemplate) {
-                                        <span class="p-tabs-right-icon" [ngClass]="tab.rightIcon"></span>
-                                    }
-
-                                    @if (tab.closable) {
-                                        @if (tab.closeIconTemplate) {
-                                            <ng-template *ngTemplateOutlet="tab.closeIconTemplate"></ng-template>
-                                        } @else {
-                                            <TimesIcon (click)="close($event, tab)" />
-                                        }
-                                    }
-                                }
-                            </button>
-                            <span
-                                #inkbar
-                                class="p-tablist-active-bar"
-                                role="presentation"
-                                [attr.aria-hidden]="true"
-                                [attr.data-pc-section]="'inkbar'"
-                            ></span>
-                        }
-                    }
-                </div>
+        }
+        <div #content class="p-tablist-content" [ngClass]="{ 'p-tablist-viewport': scrollable() }" (scroll)="onScroll($event)">
+            <div #tabs class="p-tablist-tab-list" role="tablist">
+                <ng-content></ng-content>
+                <span #inkbar role="presentation" class="p-tablist-active-bar" [attr.data-pc-section]="'inkbar'"></span>
             </div>
+        </div>
+        @if (showNavigators() && isNextButtonEnabled()) {
             <button
-                *ngIf="scrollable && !forwardIsDisabled && buttonVisible"
-                #nextBtn
-                [attr.tabindex]="tabindex"
-                [attr.aria-label]="nextButtonAriaLabel"
-                class="p-tablist-next-button p-tablist-nav-button"
-                (click)="navForward()"
-                type="button"
+                #nextButton
                 pRipple
+                class="p-tablist-nav-button p-tablist-next-button"
+                [attr.aria-label]="nextButtonAriaLabel"
+                [attr.tabindex]="tabindex"
+                [attr.data-pc-group-section]="'navigator'"
+                (click)="onNextButtonClick()"
             >
                 @if (nextIconTemplate) {
-                    <ng-template *ngTemplateOutlet="nextIconTemplate"></ng-template>
+                    <ng-container *ngTemplateOutlet="nextIconTemplate"></ng-container>
                 } @else {
-                    <ChevronRightIcon [attr.aria-hidden]="true" />
+                    <ChevronRightIcon />
                 }
             </button>
-        </div>
-        <div class="p-tabpanels">
-            <ng-content></ng-content>
-        </div>
+        }
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     host: {
-                        '[class.p-tabs]': 'true',
-                        '[class.p-tabs-scrollable]': 'scrollable',
+                        '[class.p-tablist]': 'true',
                         '[class.p-component]': 'true',
-                        '[attr.data-pc-name]': 'tabs',
+                        '[attr.data-pc-name]': '"tablist"',
                     },
-                    providers: [TabsStyle],
                 }]
-        }], propDecorators: { hostClass: [{
-                type: HostBinding,
-                args: ['class']
-            }], hostStyle: [{
-                type: HostBinding,
-                args: ['style']
-            }], 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
+        }], ctorParameters: () => [], propDecorators: { prevIconTemplate: [{
+                type: ContentChild,
+                args: ['previcon']
+            }], nextIconTemplate: [{
+                type: ContentChild,
+                args: ['nexticon']
             }], content: [{
                 type: ViewChild,
                 args: ['content']
-            }], navbar: [{
-                type: ViewChild,
-                args: ['navbar']
-            }], prevBtn: [{
+            }], prevButton: [{
                 type: ViewChild,
-                args: ['prevBtn']
-            }], nextBtn: [{
+                args: ['prevButton']
+            }], nextButton: [{
                 type: ViewChild,
-                args: ['nextBtn']
+                args: ['nextButton']
             }], inkbar: [{
                 type: ViewChild,
                 args: ['inkbar']
-            }], tabPanels: [{
-                type: ContentChildren,
-                args: [TabPanel]
+            }], tabs: [{
+                type: ViewChild,
+                args: ['tabs']
             }], templates: [{
                 type: ContentChildren,
                 args: [PrimeTemplate]
-            }], elementToObserve: [{
-                type: ViewChild,
-                args: ['elementToObserve']
             }] } });
+
+/**
+ * Defines valid properties in Tab component.
+ * @group Components
+ */
+class Tab extends BaseComponent {
+    /**
+     * Value of tab.
+     * @defaultValue undefined
+     * @group Props
+     */
+    value = model();
+    /**
+     * Whether the tab is disabled.
+     * @defaultValue false
+     * @group Props
+     */
+    disabled = input(false, { transform: booleanAttribute });
+    pcTabs = inject(forwardRef(() => Tabs));
+    pcTabList = inject(forwardRef(() => TabList));
+    ripple = computed(() => this.config.ripple());
+    id = computed(() => `${this.pcTabs.id()}_tab_${this.value()}`);
+    ariaControls = computed(() => `${this.pcTabs.id()}_tabpanel_${this.value()}`);
+    active = computed(() => ObjectUtils.equals(this.pcTabs.value(), this.value()));
+    tabindex = computed(() => (this.active() ? this.pcTabs.tabindex() : -1));
+    onFocus(event) {
+        this.pcTabs.selectOnFocus() && this.changeActiveValue();
+    }
+    onClick(event) {
+        this.changeActiveValue();
+    }
+    onKeyDown(event) {
+        switch (event.code) {
+            case 'ArrowRight':
+                this.onArrowRightKey(event);
+                break;
+            case 'ArrowLeft':
+                this.onArrowLeftKey(event);
+                break;
+            case 'Home':
+                this.onHomeKey(event);
+                break;
+            case 'End':
+                this.onEndKey(event);
+                break;
+            case 'PageDown':
+                this.onPageDownKey(event);
+                break;
+            case 'PageUp':
+                this.onPageUpKey(event);
+                break;
+            case 'Enter':
+            case 'NumpadEnter':
+            case 'Space':
+                this.onEnterKey(event);
+                break;
+            default:
+                break;
+        }
+        event.stopPropagation();
+    }
+    onArrowRightKey(event) {
+        const nextTab = this.findNextTab(event.currentTarget);
+        nextTab ? this.changeFocusedTab(event, nextTab) : this.onHomeKey(event);
+        event.preventDefault();
+    }
+    onArrowLeftKey(event) {
+        const prevTab = this.findPrevTab(event.currentTarget);
+        prevTab ? this.changeFocusedTab(event, prevTab) : this.onEndKey(event);
+        event.preventDefault();
+    }
+    onHomeKey(event) {
+        const firstTab = this.findFirstTab();
+        this.changeFocusedTab(event, firstTab);
+        event.preventDefault();
+    }
+    onEndKey(event) {
+        const lastTab = this.findLastTab();
+        this.changeFocusedTab(event, lastTab);
+        event.preventDefault();
+    }
+    onPageDownKey(event) {
+        this.scrollInView(this.findLastTab());
+        event.preventDefault();
+    }
+    onPageUpKey(event) {
+        this.scrollInView(this.findFirstTab());
+        event.preventDefault();
+    }
+    onEnterKey(event) {
+        this.changeActiveValue();
+        event.preventDefault();
+    }
+    findNextTab(tabElement, selfCheck = false) {
+        const element = selfCheck ? tabElement : tabElement.nextElementSibling;
+        return element
+            ? DomHandler.getAttribute(element, 'data-p-disabled') || DomHandler.getAttribute(element, 'data-pc-section') === 'inkbar'
+                ? this.findNextTab(element)
+                : element
+            : null;
+    }
+    findPrevTab(tabElement, selfCheck = false) {
+        const element = selfCheck ? tabElement : tabElement.previousElementSibling;
+        return element
+            ? DomHandler.getAttribute(element, 'data-p-disabled') || DomHandler.getAttribute(element, 'data-pc-section') === 'inkbar'
+                ? this.findPrevTab(element)
+                : element
+            : null;
+    }
+    findFirstTab() {
+        return this.findNextTab(this.pcTabList?.tabs?.nativeElement?.firstElementChild, true);
+    }
+    findLastTab() {
+        return this.findPrevTab(this.pcTabList?.tabs?.nativeElement?.lastElementChild, true);
+    }
+    changeActiveValue() {
+        this.pcTabs.updateValue(this.value());
+    }
+    changeFocusedTab(event, element) {
+        DomHandler.focus(element);
+        this.scrollInView(element);
+    }
+    scrollInView(element) {
+        element?.scrollIntoView?.({ block: 'nearest' });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: Tab, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.2", type: Tab, isStandalone: true, selector: "p-tab", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "focus": "onFocus($event)", "click": "onClick($event)", "keydown": "onKeyDown($event)" }, properties: { "class.p-tab": "true", "class.p-component": "true", "attr.data-pc-name": "\"tab\"", "attr.id": "id()", "attr.aria-controls": "ariaControls()", "attr.role": "\"tab\"", "attr.aria-selected": "active()", "attr.data-p-disabled": "disabled()", "attr.data-p-active": "active()", "attr.tabindex": "tabindex()" } }, usesInheritance: true, hostDirectives: [{ directive: i2.Ripple }], ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: Tab, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-tab',
+                    standalone: true,
+                    imports: [CommonModule, Ripple],
+                    template: ` <ng-content></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class.p-tab]': 'true',
+                        '[class.p-component]': 'true',
+                        '[attr.data-pc-name]': '"tab"',
+                        '[attr.id]': 'id()',
+                        '[attr.aria-controls]': 'ariaControls()',
+                        '[attr.role]': '"tab"',
+                        '[attr.aria-selected]': 'active()',
+                        '[attr.data-p-disabled]': 'disabled()',
+                        '[attr.data-p-active]': 'active()',
+                        '[attr.tabindex]': 'tabindex()',
+                    },
+                    hostDirectives: [Ripple],
+                }]
+        }], propDecorators: { onFocus: [{
+                type: HostListener,
+                args: ['focus', ['$event']]
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+/**
+ * Tabs facilitates seamless switching between different views.
+ * @group Components
+ */
+class Tabs extends BaseComponent {
+    /**
+     * Value of the active tab.
+     * @defaultValue undefined
+     * @group Props
+     */
+    value = model(undefined);
+    /**
+     * When specified, enables horizontal and/or vertical scrolling.
+     * @type boolean
+     * @defaultValue false
+     * @group Props
+     */
+    scrollable = input(false, { transform: booleanAttribute });
+    /**
+     * When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css.
+     * @type boolean
+     * @defaultValue false
+     * @group Props
+     */
+    lazy = input(false, { transform: booleanAttribute });
+    /**
+     * When enabled, the focused tab is activated.
+     * @type boolean
+     * @defaultValue false
+     * @group Props
+     */
+    selectOnFocus = input(false, { transform: booleanAttribute });
+    /**
+     * Whether to display navigation buttons in container when scrollable is enabled.
+     * @type boolean
+     * @defaultValue true
+     * @group Props
+     */
+    showNavigators = input(true, { transform: booleanAttribute });
+    /**
+     * Tabindex of the tab buttons.
+     * @type number
+     * @defaultValue 0
+     * @group Props
+     */
+    tabindex = input(0, { transform: numberAttribute });
+    id = signal(UniqueComponentId());
+    _componentStyle = inject(TabsStyle);
+    updateValue(newValue) {
+        this.value.update(() => newValue);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: Tabs, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.2", type: Tabs, isStandalone: true, selector: "p-tabs", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, showNavigators: { classPropertyName: "showNavigators", publicName: "showNavigators", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.p-tabs": "true", "class.p-tabs-scrollable": "scrollable()", "class.p-component": "true", "attr.data-pc-name": "\"tabs\"", "attr.id": "id" } }, providers: [TabsStyle], usesInheritance: true, ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: Tabs, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-tabs',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: ` <ng-content></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    providers: [TabsStyle],
+                    host: {
+                        '[class.p-tabs]': 'true',
+                        '[class.p-tabs-scrollable]': 'scrollable()',
+                        '[class.p-component]': 'true',
+                        '[attr.data-pc-name]': '"tabs"',
+                        '[attr.id]': 'id',
+                    },
+                }]
+        }] });
 class TabsModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.2", ngImport: i0, type: TabsModule, imports: [Tabs, TabPanel], exports: [Tabs, TabPanel, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TabsModule, imports: [Tabs, TabPanel, SharedModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.2", ngImport: i0, type: TabsModule, imports: [Tabs, TabPanels, TabPanel, TabList, Tab], exports: [Tabs, TabPanels, TabPanel, TabList, Tab] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TabsModule, imports: [Tabs, TabPanels, TabPanel, TabList, Tab] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TabsModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [Tabs, TabPanel],
-                    exports: [Tabs, TabPanel, SharedModule],
+                    imports: [Tabs, TabPanels, TabPanel, TabList, Tab],
+                    exports: [Tabs, TabPanels, TabPanel, TabList, Tab],
                 }]
         }] });
 
@@ -1210,5 +784,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { TabPanel, Tabs, TabsModule };
+export { Tab, TabList, TabPanel, TabPanels, Tabs, TabsClasses, TabsModule, TabsStyle };
 //# sourceMappingURL=primeng-tabs.mjs.map