@wawjs/ngx-prime 22.0.4 → 22.0.6

package/fesm2022/wawjs-ngx-prime-tabs.mjs

@@ -1,15 +1,17 @@
 import * as i0 from '@angular/core';
 import { Injectable, InjectionToken, inject, model, input, booleanAttribute, numberAttribute, signal, ViewEncapsulation, ChangeDetectionStrategy, Component, contentChildren, viewChild, forwardRef, computed, effect, ContentChild, ElementRef, contentChild, NgModule } from '@angular/core';
-import { uuid, getWidth, isRTL, findSingle, getOuterWidth, getOffset, equals, getAttribute, focus } from '@wawjs/css-prime-utils';
+import * as i2 from '@angular/aria/tabs';
+import { Tabs as Tabs$1, TabList as TabList$1, Tab as Tab$1, TabPanel as TabPanel$1 } from '@angular/aria/tabs';
+import { uuid, getWidth, isRTL, findSingle, getOuterWidth, getOffset } from '@wawjs/css-prime-utils';
 import { BaseComponent, PARENT_INSTANCE } from '@wawjs/ngx-prime/basecomponent';
 import * as i1 from '@wawjs/ngx-prime/bind';
 import { Bind, BindModule } from '@wawjs/ngx-prime/bind';
 import { style } from '@wawjs/css-prime-styles/tabs';
 import { BaseStyle } from '@wawjs/ngx-prime/base';
-import * as i2 from '@angular/common';
+import * as i3 from '@angular/common';
 import { isPlatformBrowser, CommonModule, NgTemplateOutlet } from '@angular/common';
 import { PrimeTemplate, SharedModule } from '@wawjs/ngx-prime/api';
-import * as i3 from '@wawjs/ngx-prime/ripple';
+import * as i4 from '@wawjs/ngx-prime/ripple';
 import { RippleModule, Ripple } from '@wawjs/ngx-prime/ripple';
 import { ChevronLeftIcon, ChevronRightIcon } from '@wawjs/ngx-prime/icons';
 
@@ -25,10 +27,10 @@ class TabsStyle extends BaseStyle {
     name = 'tabs';
     style = style;
     classes = classes$4;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabsStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabsStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TabsStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TabsStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabsStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TabsStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -140,10 +142,10 @@ class Tabs extends BaseComponent {
     updateValue(newValue) {
         this.value.update(() => newValue);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Tabs, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.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": "cx(\"root\")", "attr.id": "id()" } }, providers: [TabsStyle, { provide: TABS_INSTANCE, useExisting: Tabs }, { provide: PARENT_INSTANCE, useExisting: Tabs }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Tabs, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", 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": "cx(\"root\")", "attr.id": "id()" } }, providers: [TabsStyle, { provide: TABS_INSTANCE, useExisting: Tabs }, { provide: PARENT_INSTANCE, useExisting: Tabs }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }, { directive: i2.Tabs }], ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Tabs, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Tabs, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-tabs',
@@ -157,7 +159,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                         '[class]': 'cx("root")',
                         '[attr.id]': 'id()'
                     },
-                    hostDirectives: [Bind]
+                    hostDirectives: [Bind, Tabs$1]
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], scrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollable", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], selectOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectOnFocus", required: false }] }], showNavigators: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNavigators", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }] } });
 
@@ -173,10 +175,10 @@ const classes$3 = {
 class TabStyle extends BaseStyle {
     name = 'tab';
     classes = classes$3;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TabStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TabStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TabStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -207,10 +209,10 @@ const classes$2 = {
 class TabListStyle extends BaseStyle {
     name = 'tablist';
     classes = classes$2;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabListStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabListStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TabListStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TabListStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabListStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TabListStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -262,6 +264,8 @@ class TabList extends BaseComponent {
     onAfterViewChecked() {
         this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
     }
+    /** The `ngTabList` instance applied to this component's host. */
+    ariaTabList = inject(TabList$1, { self: true });
     /**
      * A template reference variable that represents the previous icon in a UI component.
      * @type {TemplateRef<any> | undefined}
@@ -309,6 +313,18 @@ class TabList extends BaseComponent {
                 });
             }
         });
+        // Reflect Tabs' `value` model onto the aria tab list's `selectedTab` (string-keyed).
+        effect(() => {
+            const value = this.pcTabs.value();
+            this.ariaTabList.selectedTab.set(value === undefined ? undefined : String(value));
+        });
+        // Keep Tabs' `value` model in sync when the tab list selects a tab via click/keyboard.
+        effect(() => {
+            const selected = this.ariaTabList.selectedTab();
+            if (selected !== undefined && selected !== String(this.pcTabs.value() ?? '')) {
+                this.pcTabs.updateValue(selected);
+            }
+        });
     }
     get prevButtonAriaLabel() {
         return this.config?.translation?.aria?.previous;
@@ -392,8 +408,8 @@ class TabList extends BaseComponent {
             this.resizeObserver = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: TabList, isStandalone: true, selector: "p-tablist", host: { properties: { "class": "cx(\"root\")" } }, providers: [TabListStyle, { provide: TABLIST_INSTANCE, useExisting: TabList }, { provide: PARENT_INSTANCE, useExisting: TabList }], queries: [{ propertyName: "templates", predicate: PrimeTemplate, isSignal: true }, { propertyName: "prevIconTemplate", first: true, predicate: ["previcon"] }, { propertyName: "nextIconTemplate", first: true, predicate: ["nexticon"] }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "prevButton", first: true, predicate: ["prevButton"], descendants: true, isSignal: true }, { propertyName: "nextButton", first: true, predicate: ["nextButton"], descendants: true, isSignal: true }, { propertyName: "inkbar", first: true, predicate: ["inkbar"], descendants: true, isSignal: true }, { propertyName: "tabs", first: true, predicate: ["tabs"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TabList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: TabList, isStandalone: true, selector: "p-tablist", host: { properties: { "class": "cx(\"root\")" } }, providers: [TabListStyle, { provide: TABLIST_INSTANCE, useExisting: TabList }, { provide: PARENT_INSTANCE, useExisting: TabList }], queries: [{ propertyName: "templates", predicate: PrimeTemplate, isSignal: true }, { propertyName: "prevIconTemplate", first: true, predicate: ["previcon"] }, { propertyName: "nextIconTemplate", first: true, predicate: ["nexticon"] }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "prevButton", first: true, predicate: ["prevButton"], descendants: true, isSignal: true }, { propertyName: "nextButton", first: true, predicate: ["nextButton"], descendants: true, isSignal: true }, { propertyName: "inkbar", first: true, predicate: ["inkbar"], descendants: true, isSignal: true }, { propertyName: "tabs", first: true, predicate: ["tabs"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }, { directive: i2.TabList }], ngImport: i0, template: `
         @if (showNavigators() && isPrevButtonEnabled()) {
             <button
                 type="button"
@@ -438,9 +454,9 @@ class TabList extends BaseComponent {
                 }
             </button>
         }
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChevronLeftIcon, selector: "[data-p-icon=\"chevron-left\"]" }, { kind: "component", type: ChevronRightIcon, selector: "[data-p-icon=\"chevron-right\"]" }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i3.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i1.Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChevronLeftIcon, selector: "[data-p-icon=\"chevron-left\"]" }, { kind: "component", type: ChevronRightIcon, selector: "[data-p-icon=\"chevron-right\"]" }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i4.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i1.Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TabList, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-tablist',
@@ -498,7 +514,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                         '[class]': 'cx("root")'
                     },
                     providers: [TabListStyle, { provide: TABLIST_INSTANCE, useExisting: TabList }, { provide: PARENT_INSTANCE, useExisting: TabList }],
-                    hostDirectives: [Bind]
+                    hostDirectives: [Bind, TabList$1]
                 }]
         }], ctorParameters: () => [], propDecorators: { prevIconTemplate: [{
                 type: ContentChild,
@@ -521,134 +537,26 @@ class Tab extends BaseComponent {
         this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
     }
     /**
-     * Value of tab.
-     * @defaultValue undefined
-     * @group Props
+     * The `ngTab` instance applied to this component's host, forwarding `value`/`disabled`
+     * via `hostDirectives`.
      */
-    value = model(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
-    /**
-     * Whether the tab is disabled.
-     * @defaultValue false
-     * @group Props
-     */
-    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    ariaTab = inject(Tab$1, { self: true });
     pcTabs = inject(forwardRef(() => Tabs));
     pcTabList = inject(forwardRef(() => TabList));
     el = inject(ElementRef);
     _componentStyle = inject(TabStyle);
     ripple = computed(() => this.config.ripple(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ripple" }] : /* istanbul ignore next */ []));
-    id = computed(() => `${this.pcTabs.id()}_tab_${this.value()}`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
-    ariaControls = computed(() => `${this.pcTabs.id()}_tabpanel_${this.value()}`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaControls" }] : /* istanbul ignore next */ []));
-    active = computed(() => equals(this.pcTabs.value(), this.value()), /* @ts-ignore */
+    value = computed(() => this.ariaTab.value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = computed(() => this.ariaTab.disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    active = computed(() => this.ariaTab.selected(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
-    tabindex = computed(() => (this.disabled() ? -1 : this.active() ? this.pcTabs.tabindex() : -1), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "tabindex" }] : /* istanbul ignore next */ []));
     mutationObserver;
-    onFocus() {
-        if (!this.disabled()) {
-            this.pcTabs.selectOnFocus() && this.changeActiveValue();
-        }
-    }
-    onClick() {
-        if (!this.disabled()) {
-            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();
-    }
     onAfterViewInit() {
         this.bindMutationObserver();
     }
-    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) {
-        if (!this.disabled()) {
-            this.changeActiveValue();
-        }
-        event.preventDefault();
-    }
-    findNextTab(tabElement, selfCheck = false) {
-        const element = selfCheck ? tabElement : tabElement.nextElementSibling;
-        return element ? (getAttribute(element, 'data-p-disabled') || getAttribute(element, 'data-pc-section') === 'activebar' ? this.findNextTab(element) : element) : null;
-    }
-    findPrevTab(tabElement, selfCheck = false) {
-        const element = selfCheck ? tabElement : tabElement.previousElementSibling;
-        return element ? (getAttribute(element, 'data-p-disabled') || getAttribute(element, 'data-pc-section') === 'activebar' ? 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) {
-        focus(element);
-        this.scrollInView(element);
-    }
-    scrollInView(element) {
-        element?.scrollIntoView?.({ block: 'nearest' });
-    }
     bindMutationObserver() {
         if (isPlatformBrowser(this.platformId)) {
             this.mutationObserver = new MutationObserver((mutations) => {
@@ -669,10 +577,10 @@ class Tab extends BaseComponent {
             this.unbindMutationObserver();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Tab, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.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()", "click": "onClick()", "keydown": "onKeyDown($event)" }, properties: { "class": "cx(\"root\")", "attr.id": "id()", "attr.aria-controls": "ariaControls()", "attr.role": "\"tab\"", "attr.aria-selected": "active()", "attr.aria-disabled": "disabled()", "attr.data-p-disabled": "disabled()", "attr.data-p-active": "active()", "attr.tabindex": "tabindex()" } }, providers: [TabStyle, { provide: TAB_INSTANCE, useExisting: Tab }, { provide: PARENT_INSTANCE, useExisting: Tab }], usesInheritance: true, hostDirectives: [{ directive: i3.Ripple }, { directive: i1.Bind }], ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Tab, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", type: Tab, isStandalone: true, selector: "p-tab", host: { properties: { "class": "cx(\"root\")", "attr.data-p-disabled": "disabled()", "attr.data-p-active": "active()" } }, providers: [TabStyle, { provide: TAB_INSTANCE, useExisting: Tab }, { provide: PARENT_INSTANCE, useExisting: Tab }], usesInheritance: true, hostDirectives: [{ directive: i4.Ripple }, { directive: i1.Bind }, { directive: i2.Tab, inputs: ["value", "value", "disabled", "disabled"] }], ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Tab, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Tab, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-tab',
@@ -683,22 +591,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     host: {
                         '[class]': 'cx("root")',
-                        '[attr.id]': 'id()',
-                        '[attr.aria-controls]': 'ariaControls()',
-                        '[attr.role]': '"tab"',
-                        '[attr.aria-selected]': 'active()',
-                        '[attr.aria-disabled]': 'disabled()',
                         '[attr.data-p-disabled]': 'disabled()',
-                        '[attr.data-p-active]': 'active()',
-                        '[attr.tabindex]': 'tabindex()',
-                        '(focus)': 'onFocus()',
-                        '(click)': 'onClick()',
-                        '(keydown)': 'onKeyDown($event)'
+                        '[attr.data-p-active]': 'active()'
                     },
-                    hostDirectives: [Ripple, Bind],
+                    hostDirectives: [Ripple, Bind, { directive: Tab$1, inputs: ['value', 'disabled'] }],
                     providers: [TabStyle, { provide: TAB_INSTANCE, useExisting: Tab }, { provide: PARENT_INSTANCE, useExisting: Tab }]
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+        }] });
 
 const classes$1 = {
     root: ({ instance }) => [
@@ -711,10 +610,10 @@ const classes$1 = {
 class TabPanelStyle extends BaseStyle {
     name = 'tabpanel';
     classes = classes$1;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabPanelStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabPanelStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TabPanelStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TabPanelStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabPanelStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TabPanelStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -744,6 +643,8 @@ class TabPanel extends BaseComponent {
     $pcTabPanel = inject(TABPANEL_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
     bindDirectiveInstance = inject(Bind, { self: true });
     pcTabs = inject(forwardRef(() => Tabs));
+    /** The `ngTabPanel` instance applied to this component's host, forwarding `value`. */
+    ariaTabPanel = inject(TabPanel$1, { self: true });
     onAfterViewChecked() {
         this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
     }
@@ -754,23 +655,14 @@ class TabPanel extends BaseComponent {
      * @group Props
      */
     lazy = input(false, { ...(ngDevMode ? { debugName: "lazy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Value of the active tab.
-     * @defaultValue undefined
-     * @group Props
-     */
-    value = model(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     /**
      * Template for initializing complex content when lazy is enabled.
      * @group Templates
      */
     content = contentChild('content', { ...(ngDevMode ? { debugName: "content" } : /* istanbul ignore next */ {}), descendants: false });
-    id = computed(() => `${this.pcTabs.id()}_tabpanel_${this.value()}`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
-    ariaLabelledby = computed(() => `${this.pcTabs.id()}_tab_${this.value()}`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []));
-    active = computed(() => equals(this.pcTabs.value(), this.value()), /* @ts-ignore */
+    value = computed(() => this.ariaTabPanel.value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    active = computed(() => this.ariaTabPanel.visible(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
     isLazyEnabled = computed(() => this.pcTabs.lazy() || this.lazy(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isLazyEnabled" }] : /* istanbul ignore next */ []));
@@ -787,8 +679,8 @@ class TabPanel extends BaseComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "shouldRender" }] : /* istanbul ignore next */ []));
     _componentStyle = inject(TabPanelStyle);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabPanel, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: TabPanel, isStandalone: true, selector: "p-tabpanel", inputs: { lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "cx(\"root\")", "attr.id": "id()", "attr.role": "\"tabpanel\"", "attr.aria-labelledby": "ariaLabelledby()", "attr.data-p-active": "active()", "hidden": "!active()" } }, providers: [TabPanelStyle, { provide: TABPANEL_INSTANCE, useExisting: TabPanel }, { provide: PARENT_INSTANCE, useExisting: TabPanel }], queries: [{ propertyName: "content", first: true, predicate: ["content"], isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TabPanel, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: TabPanel, isStandalone: true, selector: "p-tabpanel", inputs: { lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "cx(\"root\")", "attr.data-p-active": "active()", "hidden": "!active()" } }, providers: [TabPanelStyle, { provide: TABPANEL_INSTANCE, useExisting: TabPanel }, { provide: PARENT_INSTANCE, useExisting: TabPanel }], queries: [{ propertyName: "content", first: true, predicate: ["content"], isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }, { directive: i2.TabPanel, inputs: ["value", "value"] }], ngImport: i0, template: `
         <ng-template #defaultContent>
             <ng-content />
         </ng-template>
@@ -798,7 +690,7 @@ class TabPanel extends BaseComponent {
         }
     `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TabPanel, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-tabpanel',
@@ -818,15 +710,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                     providers: [TabPanelStyle, { provide: TABPANEL_INSTANCE, useExisting: TabPanel }, { provide: PARENT_INSTANCE, useExisting: TabPanel }],
                     host: {
                         '[class]': 'cx("root")',
-                        '[attr.id]': 'id()',
-                        '[attr.role]': '"tabpanel"',
-                        '[attr.aria-labelledby]': 'ariaLabelledby()',
                         '[attr.data-p-active]': 'active()',
                         '[hidden]': '!active()'
                     },
-                    hostDirectives: [Bind]
+                    hostDirectives: [Bind, { directive: TabPanel$1, inputs: ['value'] }]
                 }]
-        }], propDecorators: { lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], content: [{ type: i0.ContentChild, args: ['content', { ...{ descendants: false }, isSignal: true }] }] } });
+        }], propDecorators: { lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], content: [{ type: i0.ContentChild, args: ['content', { ...{ descendants: false }, isSignal: true }] }] } });
 
 const classes = {
     root: 'p-tabpanels'
@@ -834,10 +723,10 @@ const classes = {
 class TabPanelsStyle extends BaseStyle {
     name = 'tabpanels';
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabPanelsStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabPanelsStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TabPanelsStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TabPanelsStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabPanelsStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TabPanelsStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -870,10 +759,10 @@ class TabPanels extends BaseComponent {
     onAfterViewChecked() {
         this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabPanels, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: TabPanels, isStandalone: true, selector: "p-tabpanels", host: { properties: { "class": "cx(\"root\")", "attr.role": "\"presentation\"" } }, providers: [TabPanelsStyle, { provide: TABPANELS_INSTANCE, useExisting: TabPanels }, { provide: PARENT_INSTANCE, useExisting: TabPanels }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TabPanels, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", type: TabPanels, isStandalone: true, selector: "p-tabpanels", host: { properties: { "class": "cx(\"root\")", "attr.role": "\"presentation\"" } }, providers: [TabPanelsStyle, { provide: TABPANELS_INSTANCE, useExisting: TabPanels }, { provide: PARENT_INSTANCE, useExisting: TabPanels }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabPanels, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TabPanels, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-tabpanels',
@@ -892,11 +781,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
         }] });
 
 class TabsModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: TabsModule, imports: [Tabs, TabPanels, TabPanel, TabList, Tab, BindModule], exports: [Tabs, TabPanels, TabPanel, TabList, Tab, BindModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabsModule, imports: [Tabs, TabPanels, TabPanel, TabList, Tab, BindModule, BindModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.5", ngImport: i0, type: TabsModule, imports: [Tabs, TabPanels, TabPanel, TabList, Tab, BindModule], exports: [Tabs, TabPanels, TabPanel, TabList, Tab, BindModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TabsModule, imports: [Tabs, TabPanels, TabPanel, TabList, Tab, BindModule, BindModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TabsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Tabs, TabPanels, TabPanel, TabList, Tab, BindModule],