primeng 20.3.0 → 21.0.0-rc.1

package/fesm2022/primeng-tabs.mjs

@@ -1,8 +1,8 @@
 import * as i2 from '@angular/common';
-import { isPlatformBrowser, CommonModule, NgTemplateOutlet } from '@angular/common';
+import { CommonModule, isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, inject, forwardRef, signal, computed, effect, ViewChild, ContentChildren, ContentChild, ViewEncapsulation, ChangeDetectionStrategy, Component, model, input, booleanAttribute, ElementRef, HostListener, contentChild, numberAttribute, NgModule } from '@angular/core';
-import { getWidth, isRTL, findSingle, getOuterWidth, getOffset, equals, getAttribute, focus, uuid } from '@primeuix/utils';
+import { Injectable, InjectionToken, inject, model, input, booleanAttribute, numberAttribute, signal, ViewEncapsulation, ChangeDetectionStrategy, Component, forwardRef, computed, effect, ViewChild, ContentChildren, ContentChild, ElementRef, HostListener, contentChild, NgModule } from '@angular/core';
+import { uuid, getWidth, isRTL, findSingle, getOuterWidth, getOffset, equals, getAttribute, focus } from '@primeuix/utils';
 import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
 import * as i1 from 'primeng/bind';
 import { Bind, BindModule } from 'primeng/bind';
@@ -25,10 +25,10 @@ class TabsStyle extends BaseStyle {
     name = 'tabs';
     style = style;
     classes = classes$4;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TabsStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TabsStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabsStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabsStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TabsStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabsStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -80,6 +80,84 @@ var TabsClasses;
     TabsClasses["tabpanel"] = "p-tabs-panel";
 })(TabsClasses || (TabsClasses = {}));
 
+const TABS_INSTANCE = new InjectionToken('TABS_INSTANCE');
+/**
+ * Tabs facilitates seamless switching between different views.
+ * @group Components
+ */
+class Tabs extends BaseComponent {
+    $pcTabs = inject(TABS_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    bindDirectiveInstance = inject(Bind, { self: true });
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    /**
+     * Value of the active tab.
+     * @defaultValue undefined
+     * @group Props
+     */
+    value = model(undefined, { ...(ngDevMode ? { debugName: "value" } : {}) });
+    /**
+     * When specified, enables horizontal and/or vertical scrolling.
+     * @type boolean
+     * @defaultValue false
+     * @group Props
+     */
+    scrollable = input(false, { ...(ngDevMode ? { debugName: "scrollable" } : {}), transform: booleanAttribute });
+    /**
+     * When enabled, tabs are not rendered until activation.
+     * @type boolean
+     * @defaultValue false
+     * @group Props
+     */
+    lazy = input(false, { ...(ngDevMode ? { debugName: "lazy" } : {}), transform: booleanAttribute });
+    /**
+     * When enabled, the focused tab is activated.
+     * @type boolean
+     * @defaultValue false
+     * @group Props
+     */
+    selectOnFocus = input(false, { ...(ngDevMode ? { debugName: "selectOnFocus" } : {}), transform: booleanAttribute });
+    /**
+     * Whether to display navigation buttons in container when scrollable is enabled.
+     * @type boolean
+     * @defaultValue true
+     * @group Props
+     */
+    showNavigators = input(true, { ...(ngDevMode ? { debugName: "showNavigators" } : {}), transform: booleanAttribute });
+    /**
+     * Tabindex of the tab buttons.
+     * @type number
+     * @defaultValue 0
+     * @group Props
+     */
+    tabindex = input(0, { ...(ngDevMode ? { debugName: "tabindex" } : {}), transform: numberAttribute });
+    id = signal(uuid('pn_id_'), { ...(ngDevMode ? { debugName: "id" } : {}) });
+    _componentStyle = inject(TabsStyle);
+    updateValue(newValue) {
+        this.value.update(() => newValue);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: Tabs, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", 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: CommonModule }, { kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: Tabs, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-tabs',
+                    standalone: true,
+                    imports: [CommonModule, BindModule],
+                    template: ` <ng-content></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    providers: [TabsStyle, { provide: TABS_INSTANCE, useExisting: Tabs }, { provide: PARENT_INSTANCE, useExisting: Tabs }],
+                    host: {
+                        '[class]': 'cx("root")',
+                        '[attr.id]': 'id()'
+                    },
+                    hostDirectives: [Bind]
+                }]
+        }], 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 }] }] } });
+
 const classes$3 = {
     root: ({ instance }) => [
         'p-tab',
@@ -92,10 +170,10 @@ const classes$3 = {
 class TabStyle extends BaseStyle {
     name = 'tab';
     classes = classes$3;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TabStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TabStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TabStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -126,10 +204,10 @@ const classes$2 = {
 class TabListStyle extends BaseStyle {
     name = 'tablist';
     classes = classes$2;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TabListStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TabListStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabListStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabListStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TabListStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabListStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -199,12 +277,12 @@ class TabList extends BaseComponent {
     inkbar;
     tabs;
     pcTabs = inject(forwardRef(() => Tabs));
-    isPrevButtonEnabled = signal(false, ...(ngDevMode ? [{ debugName: "isPrevButtonEnabled" }] : []));
-    isNextButtonEnabled = signal(false, ...(ngDevMode ? [{ debugName: "isNextButtonEnabled" }] : []));
+    isPrevButtonEnabled = signal(false, { ...(ngDevMode ? { debugName: "isPrevButtonEnabled" } : {}) });
+    isNextButtonEnabled = signal(false, { ...(ngDevMode ? { debugName: "isNextButtonEnabled" } : {}) });
     resizeObserver;
-    showNavigators = computed(() => this.pcTabs.showNavigators(), ...(ngDevMode ? [{ debugName: "showNavigators" }] : []));
-    tabindex = computed(() => this.pcTabs.tabindex(), ...(ngDevMode ? [{ debugName: "tabindex" }] : []));
-    scrollable = computed(() => this.pcTabs.scrollable(), ...(ngDevMode ? [{ debugName: "scrollable" }] : []));
+    showNavigators = computed(() => this.pcTabs.showNavigators(), { ...(ngDevMode ? { debugName: "showNavigators" } : {}) });
+    tabindex = computed(() => this.pcTabs.tabindex(), { ...(ngDevMode ? { debugName: "tabindex" } : {}) });
+    scrollable = computed(() => this.pcTabs.scrollable(), { ...(ngDevMode ? { debugName: "scrollable" } : {}) });
     _componentStyle = inject(TabListStyle);
     constructor() {
         super();
@@ -299,8 +377,8 @@ class TabList extends BaseComponent {
             this.resizeObserver = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TabList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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: "prevIconTemplate", first: true, predicate: ["previcon"] }, { propertyName: "nextIconTemplate", first: true, predicate: ["nexticon"] }, { 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, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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: "prevIconTemplate", first: true, predicate: ["previcon"] }, { propertyName: "nextIconTemplate", first: true, predicate: ["nexticon"] }, { 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, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
         @if (showNavigators() && isPrevButtonEnabled()) {
             <button
                 type="button"
@@ -347,7 +425,7 @@ class TabList extends BaseComponent {
         }
     `, 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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TabList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabList, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-tablist',
@@ -449,22 +527,22 @@ class Tab extends BaseComponent {
      * @defaultValue undefined
      * @group Props
      */
-    value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+    value = model(undefined, { ...(ngDevMode ? { debugName: "value" } : {}) });
     /**
      * Whether the tab is disabled.
      * @defaultValue false
      * @group Props
      */
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
     pcTabs = inject(forwardRef(() => Tabs));
     pcTabList = inject(forwardRef(() => TabList));
     el = inject(ElementRef);
     _componentStyle = inject(TabStyle);
-    ripple = computed(() => this.config.ripple(), ...(ngDevMode ? [{ debugName: "ripple" }] : []));
-    id = computed(() => `${this.pcTabs.id()}_tab_${this.value()}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
-    ariaControls = computed(() => `${this.pcTabs.id()}_tabpanel_${this.value()}`, ...(ngDevMode ? [{ debugName: "ariaControls" }] : []));
-    active = computed(() => equals(this.pcTabs.value(), this.value()), ...(ngDevMode ? [{ debugName: "active" }] : []));
-    tabindex = computed(() => (this.disabled() ? -1 : this.active() ? this.pcTabs.tabindex() : -1), ...(ngDevMode ? [{ debugName: "tabindex" }] : []));
+    ripple = computed(() => this.config.ripple(), { ...(ngDevMode ? { debugName: "ripple" } : {}) });
+    id = computed(() => `${this.pcTabs.id()}_tab_${this.value()}`, { ...(ngDevMode ? { debugName: "id" } : {}) });
+    ariaControls = computed(() => `${this.pcTabs.id()}_tabpanel_${this.value()}`, { ...(ngDevMode ? { debugName: "ariaControls" } : {}) });
+    active = computed(() => equals(this.pcTabs.value(), this.value()), { ...(ngDevMode ? { debugName: "active" } : {}) });
+    tabindex = computed(() => (this.disabled() ? -1 : this.active() ? this.pcTabs.tabindex() : -1), { ...(ngDevMode ? { debugName: "tabindex" } : {}) });
     mutationObserver;
     onFocus(event) {
         if (!this.disabled()) {
@@ -587,10 +665,10 @@ class Tab extends BaseComponent {
             this.unbindMutationObserver();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Tab, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", 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": "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: CommonModule }, { 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: "21.0.1", ngImport: i0, type: Tab, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", 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": "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: CommonModule }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Tab, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: Tab, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-tab',
@@ -613,7 +691,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                     hostDirectives: [Ripple, Bind],
                     providers: [TabStyle, { provide: TAB_INSTANCE, useExisting: Tab }, { provide: PARENT_INSTANCE, useExisting: Tab }]
                 }]
-        }], propDecorators: { onFocus: [{
+        }], 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 }] }], onFocus: [{
                 type: HostListener,
                 args: ['focus', ['$event']]
             }], onClick: [{
@@ -635,10 +713,10 @@ const classes$1 = {
 class TabPanelStyle extends BaseStyle {
     name = 'tabpanel';
     classes = classes$1;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TabPanelStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TabPanelStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabPanelStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabPanelStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TabPanelStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabPanelStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -676,22 +754,22 @@ class TabPanel extends BaseComponent {
      * @defaultValue false
      * @group Props
      */
-    lazy = input(false, ...(ngDevMode ? [{ debugName: "lazy", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    lazy = input(false, { ...(ngDevMode ? { debugName: "lazy" } : {}), transform: booleanAttribute });
     /**
      * Value of the active tab.
      * @defaultValue undefined
      * @group Props
      */
-    value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    value = model(undefined, { ...(ngDevMode ? { debugName: "value" } : {}) });
     /**
      * Template for initializing complex content when lazy is enabled.
      * @group Templates
      */
-    content = contentChild('content', ...(ngDevMode ? [{ debugName: "content" }] : []));
-    id = computed(() => `${this.pcTabs.id()}_tabpanel_${this.value()}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
-    ariaLabelledby = computed(() => `${this.pcTabs.id()}_tab_${this.value()}`, ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : []));
-    active = computed(() => equals(this.pcTabs.value(), this.value()), ...(ngDevMode ? [{ debugName: "active" }] : []));
-    isLazyEnabled = computed(() => this.pcTabs.lazy() || this.lazy(), ...(ngDevMode ? [{ debugName: "isLazyEnabled" }] : []));
+    content = contentChild('content', { ...(ngDevMode ? { debugName: "content" } : {}) });
+    id = computed(() => `${this.pcTabs.id()}_tabpanel_${this.value()}`, { ...(ngDevMode ? { debugName: "id" } : {}) });
+    ariaLabelledby = computed(() => `${this.pcTabs.id()}_tab_${this.value()}`, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : {}) });
+    active = computed(() => equals(this.pcTabs.value(), this.value()), { ...(ngDevMode ? { debugName: "active" } : {}) });
+    isLazyEnabled = computed(() => this.pcTabs.lazy() || this.lazy(), { ...(ngDevMode ? { debugName: "isLazyEnabled" } : {}) });
     hasBeenRendered = false;
     shouldRender = computed(() => {
         if (!this.isLazyEnabled() || this.hasBeenRendered) {
@@ -702,10 +780,10 @@ class TabPanel extends BaseComponent {
             return true;
         }
         return false;
-    }, ...(ngDevMode ? [{ debugName: "shouldRender" }] : []));
+    }, { ...(ngDevMode ? { debugName: "shouldRender" } : {}) });
     _componentStyle = inject(TabPanelStyle);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TabPanel, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabPanel, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
         <ng-template #defaultContent>
             <ng-content />
         </ng-template>
@@ -715,7 +793,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: "20.3.4", ngImport: i0, type: TabPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabPanel, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-tabpanel',
@@ -743,7 +821,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                     },
                     hostDirectives: [Bind]
                 }]
-        }] });
+        }], 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', { isSignal: true }] }] } });
 
 const classes = {
     root: 'p-tabpanels'
@@ -751,10 +829,10 @@ const classes = {
 class TabPanelsStyle extends BaseStyle {
     name = 'tabpanels';
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TabPanelsStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TabPanelsStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabPanelsStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabPanelsStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TabPanelsStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabPanelsStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -786,10 +864,10 @@ class TabPanels extends BaseComponent {
     onAfterViewChecked() {
         this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TabPanels, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", 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: CommonModule }, { kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabPanels, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", 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: CommonModule }, { kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TabPanels, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabPanels, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-tabpanels',
@@ -807,89 +885,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 }]
         }] });
 
-const TABS_INSTANCE = new InjectionToken('TABS_INSTANCE');
-/**
- * Tabs facilitates seamless switching between different views.
- * @group Components
- */
-class Tabs extends BaseComponent {
-    $pcTabs = inject(TABS_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
-    bindDirectiveInstance = inject(Bind, { self: true });
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    /**
-     * Value of the active tab.
-     * @defaultValue undefined
-     * @group Props
-     */
-    value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
-    /**
-     * When specified, enables horizontal and/or vertical scrolling.
-     * @type boolean
-     * @defaultValue false
-     * @group Props
-     */
-    scrollable = input(false, ...(ngDevMode ? [{ debugName: "scrollable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    /**
-     * When enabled, tabs are not rendered until activation.
-     * @type boolean
-     * @defaultValue false
-     * @group Props
-     */
-    lazy = input(false, ...(ngDevMode ? [{ debugName: "lazy", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    /**
-     * When enabled, the focused tab is activated.
-     * @type boolean
-     * @defaultValue false
-     * @group Props
-     */
-    selectOnFocus = input(false, ...(ngDevMode ? [{ debugName: "selectOnFocus", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    /**
-     * Whether to display navigation buttons in container when scrollable is enabled.
-     * @type boolean
-     * @defaultValue true
-     * @group Props
-     */
-    showNavigators = input(true, ...(ngDevMode ? [{ debugName: "showNavigators", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    /**
-     * Tabindex of the tab buttons.
-     * @type number
-     * @defaultValue 0
-     * @group Props
-     */
-    tabindex = input(0, ...(ngDevMode ? [{ debugName: "tabindex", transform: numberAttribute }] : [{ transform: numberAttribute }]));
-    id = signal(uuid('pn_id_'), ...(ngDevMode ? [{ debugName: "id" }] : []));
-    _componentStyle = inject(TabsStyle);
-    updateValue(newValue) {
-        this.value.update(() => newValue);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Tabs, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", 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: CommonModule }, { kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Tabs, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'p-tabs',
-                    standalone: true,
-                    imports: [CommonModule, BindModule],
-                    template: ` <ng-content></ng-content>`,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    providers: [TabsStyle, { provide: TABS_INSTANCE, useExisting: Tabs }, { provide: PARENT_INSTANCE, useExisting: Tabs }],
-                    host: {
-                        '[class]': 'cx("root")',
-                        '[attr.id]': 'id()'
-                    },
-                    hostDirectives: [Bind]
-                }]
-        }] });
 class TabsModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", 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: "20.3.4", ngImport: i0, type: TabsModule, imports: [Tabs, TabPanels, TabPanel, TabList, Tab, BindModule, BindModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.1", 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: "21.0.1", ngImport: i0, type: TabsModule, imports: [Tabs, TabPanels, TabPanel, TabList, Tab, BindModule, BindModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TabsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Tabs, TabPanels, TabPanel, TabList, Tab, BindModule],