primeng 19.1.3 → 20.0.0-rc.1

package/fesm2022/primeng-tabs.mjs

@@ -4,169 +4,29 @@ import * as i0 from '@angular/core';
 import { Injectable, inject, forwardRef, signal, computed, effect, ViewChild, ContentChildren, ContentChild, ViewEncapsulation, ChangeDetectionStrategy, Component, model, input, booleanAttribute, ElementRef, HostListener, numberAttribute, NgModule } from '@angular/core';
 import { getWidth, isRTL, findSingle, getOuterWidth, getOffset, equals, getAttribute, focus, uuid } from '@primeuix/utils';
 import { BaseComponent } from 'primeng/basecomponent';
+import { style } from '@primeuix/styles/tabs';
 import { BaseStyle } from 'primeng/base';
 import { SharedModule, PrimeTemplate } from 'primeng/api';
 import * as i2 from 'primeng/ripple';
 import { RippleModule, Ripple } from 'primeng/ripple';
 import { ChevronLeftIcon, ChevronRightIcon } from 'primeng/icons';
 
-const theme = ({ dt }) => `
-.p-tabs {
-    display: flex;
-    flex-direction: column;
-}
-
-.p-tablist {
-    display: flex;
-    position: relative;
-}
-
-.p-tabs-scrollable > .p-tablist {
-    overflow: hidden;
-}
-
-.p-tablist-viewport {
-    overflow-x: auto;
-    overflow-y: hidden;
-    scroll-behavior: smooth;
-    scrollbar-width: none;
-    overscroll-behavior: contain auto;
-}
-
-.p-tablist-viewport::-webkit-scrollbar {
-    display: none;
-}
-
-.p-tablist-tab-list {
-    position: relative;
-    display: flex;
-    background: ${dt('tabs.tablist.background')};
-    border-style: solid;
-    border-color: ${dt('tabs.tablist.border.color')};
-    border-width: ${dt('tabs.tablist.border.width')};
-}
-
-.p-tablist-content {
-    flex-grow: 1;
-}
-
-.p-tablist-nav-button {
-    all: unset;
-    position: absolute !important;
-    flex-shrink: 0;
-    top: 0;
-    z-index: 2;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: ${dt('tabs.nav.button.background')};
-    color: ${dt('tabs.nav.button.color')};
-    width: ${dt('tabs.nav.button.width')};
-    transition: color ${dt('tabs.transition.duration')}, outline-color ${dt('tabs.transition.duration')}, box-shadow ${dt('tabs.transition.duration')};
-    box-shadow: ${dt('tabs.nav.button.shadow')};
-    outline-color: transparent;
-    cursor: pointer;
-}
-
-.p-tablist-nav-button:focus-visible {
-    z-index: 1;
-    box-shadow: ${dt('tabs.nav.button.focus.ring.shadow')};
-    outline: ${dt('tabs.nav.button.focus.ring.width')} ${dt('tabs.nav.button.focus.ring.style')} ${dt('tabs.nav.button.focus.ring.color')};
-    outline-offset: ${dt('tabs.nav.button.focus.ring.offset')};
-}
-
-.p-tablist-nav-button:hover {
-    color: ${dt('tabs.nav.button.hover.color')};
-}
-
-.p-tablist-prev-button {
-    left: 0;
-}
-
-.p-tablist-next-button {
-    right: 0;
-}
-
-.p-tab {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    cursor: pointer;
-    user-select: none;
-    position: relative;
-    border-style: solid;
-    white-space: nowrap;
-    gap: ${dt('tabs.tab.gap')};
-    background: ${dt('tabs.tab.background')};
-    border-width: ${dt('tabs.tab.border.width')};
-    border-color: ${dt('tabs.tab.border.color')};
-    color: ${dt('tabs.tab.color')};
-    padding: ${dt('tabs.tab.padding')};
-    font-weight: ${dt('tabs.tab.font.weight')};
-    transition: background ${dt('tabs.transition.duration')}, border-color ${dt('tabs.transition.duration')}, color ${dt('tabs.transition.duration')}, outline-color ${dt('tabs.transition.duration')}, box-shadow ${dt('tabs.transition.duration')};
-    margin: ${dt('tabs.tab.margin')};
-    outline-color: transparent;
-}
-
-.p-tab:not(.p-disabled):focus-visible {
-    z-index: 1;
-    box-shadow: ${dt('tabs.tab.focus.ring.shadow')};
-    outline: ${dt('tabs.tab.focus.ring.width')} ${dt('tabs.tab.focus.ring.style')} ${dt('tabs.tab.focus.ring.color')};
-    outline-offset: ${dt('tabs.tab.focus.ring.offset')};
-}
-
-.p-tab:not(.p-tab-active):not(.p-disabled):hover {
-    background: ${dt('tabs.tab.hover.background')};
-    border-color: ${dt('tabs.tab.hover.border.color')};
-    color: ${dt('tabs.tab.hover.color')};
-}
-
-.p-tab-active {
-    background: ${dt('tabs.tab.active.background')};
-    border-color: ${dt('tabs.tab.active.border.color')};
-    color: ${dt('tabs.tab.active.color')};
-}
-
-.p-tabpanels {
-    background: ${dt('tabs.tabpanel.background')};
-    color: ${dt('tabs.tabpanel.color')};
-    padding: ${dt('tabs.tabpanel.padding')};
-    outline: 0 none;
-}
-
-.p-tabpanel:focus-visible {
-    box-shadow: ${dt('tabs.tabpanel.focus.ring.shadow')};
-    outline: ${dt('tabs.tabpanel.focus.ring.width')} ${dt('tabs.tabpanel.focus.ring.style')} ${dt('tabs.tabpanel.focus.ring.color')};
-    outline-offset: ${dt('tabs.tabpanel.focus.ring.offset')};
-}
-
-.p-tablist-active-bar {
-    z-index: 1;
-    display: block;
-    position: absolute;
-    bottom: ${dt('tabs.active.bar.bottom')};
-    height: ${dt('tabs.active.bar.height')};
-    background: ${dt('tabs.active.bar.background')};
-    transition: 250ms cubic-bezier(0.35, 0, 0.25, 1);
-}
-`;
-const classes = {
-    root: ({ props }) => [
+const classes$4 = {
+    root: ({ instance }) => [
         'p-tabs p-component',
         {
-            'p-tabs-scrollable': props.scrollable
+            'p-tabs-scrollable': instance.scrollable()
         }
     ]
 };
 class TabsStyle extends BaseStyle {
     name = 'tabs';
-    theme = theme;
-    classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TabsStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TabsStyle });
+    theme = style;
+    classes = classes$4;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TabsStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TabsStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TabsStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TabsStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -218,6 +78,65 @@ var TabsClasses;
     TabsClasses["tabpanel"] = "p-tabs-panel";
 })(TabsClasses || (TabsClasses = {}));
 
+const classes$3 = {
+    root: 'p-tablist',
+    content: ({ instance }) => [
+        'p-tablist-content',
+        {
+            'p-tablist-viewport': instance.scrollable()
+        }
+    ],
+    tabList: 'p-tablist-tab-list',
+    activeBar: 'p-tablist-active-bar',
+    prevButton: 'p-tablist-prev-button p-tablist-nav-button',
+    nextButton: 'p-tablist-next-button p-tablist-nav-button'
+};
+class TabListStyle extends BaseStyle {
+    name = 'tablist';
+    classes = classes$3;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TabListStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TabListStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TabListStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * Tabs facilitates seamless switching between different views.
+ *
+ * [Live Demo](https://www.primeng.org/tabs/)
+ *
+ * @module tabliststyle
+ *
+ */
+var TabListClasses;
+(function (TabListClasses) {
+    /**
+     * Class name of the root element
+     */
+    TabListClasses["root"] = "p-tablist";
+    /**
+     * Class name of the content element
+     */
+    TabListClasses["content"] = "p-tablist-content";
+    /**
+     * Class name of the tabs element
+     */
+    TabListClasses["tabList"] = "p-tablist-tab-list";
+    /**
+     * Class name of the activebar element
+     */
+    TabListClasses["activeBar"] = "p-tablist-active-bar";
+    /**
+     * Class name of the previous button element
+     */
+    TabListClasses["prevButton"] = "p-tablist-prev-button";
+    /**
+     * Class name of the next button element
+     */
+    TabListClasses["nextButton"] = "p-tablist-next-button";
+})(TabListClasses || (TabListClasses = {}));
+
 /**
  * TabList is a helper component for Tabs component.
  * @group Components
@@ -248,6 +167,7 @@ class TabList extends BaseComponent {
     showNavigators = computed(() => this.pcTabs.showNavigators());
     tabindex = computed(() => this.pcTabs.tabindex());
     scrollable = computed(() => this.pcTabs.scrollable());
+    _componentStyle = inject(TabListStyle);
     constructor() {
         super();
         effect(() => {
@@ -343,10 +263,10 @@ class TabList extends BaseComponent {
             this.resizeObserver = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TabList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", 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"] }, { 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, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TabList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: TabList, isStandalone: true, selector: "p-tablist", host: { properties: { "class": "cx(\"root\")", "attr.data-pc-name": "\"tablist\"" } }, providers: [TabListStyle], 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, ngImport: i0, template: `
         @if (showNavigators() && isPrevButtonEnabled()) {
-            <button 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()">
+            <button type="button" #prevButton pRipple [class]="cx('prevButton')" [attr.aria-label]="prevButtonAriaLabel" [attr.tabindex]="tabindex()" [attr.data-pc-group-section]="'navigator'" (click)="onPrevButtonClick()">
                 @if (prevIconTemplate || _prevIconTemplate) {
                     <ng-container *ngTemplateOutlet="prevIconTemplate || _prevIconTemplate" />
                 } @else {
@@ -354,14 +274,14 @@ class TabList extends BaseComponent {
                 }
             </button>
         }
-        <div #content class="p-tablist-content" [ngClass]="{ 'p-tablist-viewport': scrollable() }" (scroll)="onScroll($event)">
-            <div #tabs class="p-tablist-tab-list" role="tablist">
+        <div #content [class]="cx('content')" (scroll)="onScroll($event)">
+            <div #tabs [class]="cx('tabList')" role="tablist">
                 <ng-content />
-                <span #inkbar role="presentation" class="p-tablist-active-bar" [attr.data-pc-section]="'inkbar'"></span>
+                <span #inkbar role="presentation" [class]="cx('activeBar')" [attr.data-pc-section]="'inkbar'"></span>
             </div>
         </div>
         @if (showNavigators() && isNextButtonEnabled()) {
-            <button 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()">
+            <button type="button" #nextButton pRipple [class]="cx('nextButton')" [attr.aria-label]="nextButtonAriaLabel" [attr.tabindex]="tabindex()" [attr.data-pc-group-section]="'navigator'" (click)="onNextButtonClick()">
                 @if (nextIconTemplate || _nextIconTemplate) {
                     <ng-container *ngTemplateOutlet="nextIconTemplate || _nextIconTemplate" />
                 } @else {
@@ -369,9 +289,9 @@ class TabList extends BaseComponent {
                 }
             </button>
         }
-    `, 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]" }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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]" }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TabList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TabList, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-tablist',
@@ -379,7 +299,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     imports: [CommonModule, ChevronLeftIcon, ChevronRightIcon, RippleModule, SharedModule],
                     template: `
         @if (showNavigators() && isPrevButtonEnabled()) {
-            <button 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()">
+            <button type="button" #prevButton pRipple [class]="cx('prevButton')" [attr.aria-label]="prevButtonAriaLabel" [attr.tabindex]="tabindex()" [attr.data-pc-group-section]="'navigator'" (click)="onPrevButtonClick()">
                 @if (prevIconTemplate || _prevIconTemplate) {
                     <ng-container *ngTemplateOutlet="prevIconTemplate || _prevIconTemplate" />
                 } @else {
@@ -387,14 +307,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 }
             </button>
         }
-        <div #content class="p-tablist-content" [ngClass]="{ 'p-tablist-viewport': scrollable() }" (scroll)="onScroll($event)">
-            <div #tabs class="p-tablist-tab-list" role="tablist">
+        <div #content [class]="cx('content')" (scroll)="onScroll($event)">
+            <div #tabs [class]="cx('tabList')" role="tablist">
                 <ng-content />
-                <span #inkbar role="presentation" class="p-tablist-active-bar" [attr.data-pc-section]="'inkbar'"></span>
+                <span #inkbar role="presentation" [class]="cx('activeBar')" [attr.data-pc-section]="'inkbar'"></span>
             </div>
         </div>
         @if (showNavigators() && isNextButtonEnabled()) {
-            <button 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()">
+            <button type="button" #nextButton pRipple [class]="cx('nextButton')" [attr.aria-label]="nextButtonAriaLabel" [attr.tabindex]="tabindex()" [attr.data-pc-group-section]="'navigator'" (click)="onNextButtonClick()">
                 @if (nextIconTemplate || _nextIconTemplate) {
                     <ng-container *ngTemplateOutlet="nextIconTemplate || _nextIconTemplate" />
                 } @else {
@@ -406,10 +326,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     host: {
-                        '[class.p-tablist]': 'true',
-                        '[class.p-component]': 'true',
+                        '[class]': 'cx("root")',
                         '[attr.data-pc-name]': '"tablist"'
-                    }
+                    },
+                    providers: [TabListStyle]
                 }]
         }], ctorParameters: () => [], propDecorators: { prevIconTemplate: [{
                 type: ContentChild,
@@ -437,6 +357,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 args: ['tabs']
             }] } });
 
+const classes$2 = {
+    root: ({ instance }) => [
+        'p-tab',
+        {
+            'p-tab-active': instance.active(),
+            'p-disabled': instance.disabled()
+        }
+    ]
+};
+class TabStyle extends BaseStyle {
+    name = 'tab';
+    classes = classes$2;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TabStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TabStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TabStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * Tabs facilitates seamless switching between different views.
+ *
+ * [Live Demo](https://www.primeng.org/tabs/)
+ *
+ * @module tabsstyle
+ *
+ */
+var TabClasses;
+(function (TabClasses) {
+    /**
+     * Class name of the tab list element
+     */
+    TabClasses["tab"] = "p-tab";
+})(TabClasses || (TabClasses = {}));
+
 /**
  * Defines valid properties in Tab component.
  * @group Components
@@ -457,6 +412,7 @@ class Tab extends BaseComponent {
     pcTabs = inject(forwardRef(() => Tabs));
     pcTabList = inject(forwardRef(() => TabList));
     el = inject(ElementRef);
+    _componentStyle = inject(TabStyle);
     ripple = computed(() => this.config.ripple());
     id = computed(() => `${this.pcTabs.id()}_tab_${this.value()}`);
     ariaControls = computed(() => `${this.pcTabs.id()}_tabpanel_${this.value()}`);
@@ -580,10 +536,10 @@ class Tab extends BaseComponent {
         }
         super.ngOnDestroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: Tab, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", 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-tab-active": "active()", "class.p-disabled": "disabled()", "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 }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Tab, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", 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.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()" } }, providers: [TabStyle], usesInheritance: true, hostDirectives: [{ directive: i2.Ripple }], ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: Tab, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Tab, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-tab',
@@ -593,10 +549,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     host: {
-                        '[class.p-tab]': 'true',
-                        '[class.p-tab-active]': 'active()',
-                        '[class.p-disabled]': 'disabled()',
-                        '[class.p-component]': 'true',
+                        '[class]': 'cx("root")',
                         '[attr.data-pc-name]': '"tab"',
                         '[attr.id]': 'id()',
                         '[attr.aria-controls]': 'ariaControls()',
@@ -606,7 +559,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         '[attr.data-p-active]': 'active()',
                         '[attr.tabindex]': 'tabindex()'
                     },
-                    hostDirectives: [Ripple]
+                    hostDirectives: [Ripple],
+                    providers: [TabStyle]
                 }]
         }], propDecorators: { onFocus: [{
                 type: HostListener,
@@ -619,6 +573,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 args: ['keydown', ['$event']]
             }] } });
 
+const classes$1 = {
+    root: ({ instance }) => [
+        'p-tabpanel',
+        {
+            'p-tabpanel-active': instance.active()
+        }
+    ]
+};
+class TabPanelStyle extends BaseStyle {
+    name = 'tabpanel';
+    classes = classes$1;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TabPanelStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TabPanelStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TabPanelStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * Tab is a helper component for Tabs component.
+ *
+ * [Live Demo](https://www.primeng.org/tabs/)
+ *
+ * @module tabstyle
+ *
+ */
+var TabPanelClasses;
+(function (TabPanelClasses) {
+    /**
+     * Class name of the root element
+     */
+    TabPanelClasses["root"] = "p-tabpanel";
+})(TabPanelClasses || (TabPanelClasses = {}));
+
 /**
  * TabPanel is a helper component for Tabs component.
  * @group Components
@@ -634,12 +622,13 @@ class TabPanel extends BaseComponent {
     id = computed(() => `${this.pcTabs.id()}_tabpanel_${this.value()}`);
     ariaLabelledby = computed(() => `${this.pcTabs.id()}_tab_${this.value()}`);
     active = computed(() => equals(this.pcTabs.value(), this.value()));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TabPanel, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", 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()) {
+    _componentStyle = inject(TabPanelStyle);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TabPanel, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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": "cx(\"root\")", "attr.data-pc-name": "\"tabpanel\"", "attr.id": "id()", "attr.role": "\"tabpanel\"", "attr.aria-labelledby": "ariaLabelledby()", "attr.data-p-active": "active()" } }, providers: [TabPanelStyle], 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: "19.2.10", ngImport: i0, type: TabPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TabPanel, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-tabpanel',
@@ -651,26 +640,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     host: {
-                        '[class.p-tabpanel]': 'true',
-                        '[class.p-component]': 'true',
+                        '[class]': 'cx("root")',
                         '[attr.data-pc-name]': '"tabpanel"',
                         '[attr.id]': 'id()',
                         '[attr.role]': '"tabpanel"',
                         '[attr.aria-labelledby]': 'ariaLabelledby()',
                         '[attr.data-p-active]': 'active()'
-                    }
+                    },
+                    providers: [TabPanelStyle]
                 }]
         }] });
 
+const classes = {
+    root: 'p-tabpanels'
+};
+class TabPanelsStyle extends BaseStyle {
+    name = 'tabpanels';
+    classes = classes;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TabPanelsStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TabPanelsStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TabPanelsStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * Tab is a helper component for Tabs component.
+ *
+ * [Live Demo](https://www.primeng.org/tabs/)
+ *
+ * @module tabpanelstyle
+ *
+ */
+var TabPanelsClasses;
+(function (TabPanelsClasses) {
+    /**
+     * Class name of the root element
+     */
+    TabPanelsClasses["root"] = "p-tabpanels";
+})(TabPanelsClasses || (TabPanelsClasses = {}));
+
 /**
  * TabPanels is a helper component for Tabs component.
  * @group Components
  */
 class TabPanels extends BaseComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TabPanels, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", 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 });
+    _componentStyle = inject(TabPanelsStyle);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TabPanels, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: TabPanels, isStandalone: true, selector: "p-tabpanels", host: { properties: { "class": "cx(\"root\")", "attr.data-pc-name": "\"tabpanels\"", "attr.role": "\"presentation\"" } }, providers: [TabPanelsStyle], 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: "19.2.10", ngImport: i0, type: TabPanels, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TabPanels, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-tabpanels',
@@ -680,11 +699,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     host: {
-                        '[class.p-tabpanels]': 'true',
-                        '[class.p-component]': 'true',
+                        '[class]': 'cx("root")',
                         '[attr.data-pc-name]': '"tabpanels"',
                         '[attr.role]': '"presentation"'
-                    }
+                    },
+                    providers: [TabPanelsStyle]
                 }]
         }] });
 
@@ -739,10 +758,10 @@ class Tabs extends BaseComponent {
     updateValue(newValue) {
         this.value.update(() => newValue);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: Tabs, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Tabs, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", 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.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: "19.2.10", ngImport: i0, type: Tabs, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Tabs, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-tabs',
@@ -753,20 +772,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     encapsulation: ViewEncapsulation.None,
                     providers: [TabsStyle],
                     host: {
-                        '[class.p-tabs]': 'true',
-                        '[class.p-tabs-scrollable]': 'scrollable()',
-                        '[class.p-component]': 'true',
+                        '[class]': 'cx("root")',
                         '[attr.data-pc-name]': '"tabs"',
                         '[attr.id]': 'id()'
                     }
                 }]
         }] });
 class TabsModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", 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: "19.2.10", ngImport: i0, type: TabsModule, imports: [Tabs, TabPanels, TabPanel, TabList, Tab] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", 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: "20.0.6", ngImport: i0, type: TabsModule, imports: [Tabs, TabPanels, TabPanel, TabList, Tab] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TabsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TabsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Tabs, TabPanels, TabPanel, TabList, Tab],