primeng 20.1.2 → 20.3.0-rc.1

package/fesm2022/primeng-card.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"primeng-card.mjs","sources":["../../src/card/style/cardstyle.ts","../../src/card/card.ts","../../src/card/primeng-card.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { style } from '@primeuix/styles/card';\nimport { BaseStyle } from 'primeng/base';\n\nconst theme = /*css*/ `\n    ${style}\n\n    .p-card {\n        display: block;\n    }\n`;\n\nconst classes = {\n    root: 'p-card p-component',\n    header: 'p-card-header',\n    body: 'p-card-body',\n    caption: 'p-card-caption',\n    title: 'p-card-title',\n    subtitle: 'p-card-subtitle',\n    content: 'p-card-content',\n    footer: 'p-card-footer'\n};\n\n@Injectable()\nexport class CardStyle extends BaseStyle {\n    name = 'card';\n\n    theme = theme;\n\n    classes = classes;\n}\n\n/**\n *\n * Card is a flexible container component.\n *\n * [Live Demo](https://www.primeng.org/card/)\n *\n * @module cardstyle\n *\n */\nexport enum CardClasses {\n    /**\n     * Class name of the root element\n     */\n    root = 'p-card',\n    /**\n     * Class name of the header element\n     */\n    header = 'p-card-header',\n    /**\n     * Class name of the body element\n     */\n    body = 'p-card-body',\n    /**\n     * Class name of the caption element\n     */\n    caption = 'p-card-caption',\n    /**\n     * Class name of the title element\n     */\n    title = 'p-card-title',\n    /**\n     * Class name of the subtitle element\n     */\n    subtitle = 'p-card-subtitle',\n    /**\n     * Class name of the content element\n     */\n    content = 'p-card-content',\n    /**\n     * Class name of the footer element\n     */\n    footer = 'p-card-footer'\n}\n\nexport interface CardStyle extends BaseStyle {}\n","import { CommonModule } from '@angular/common';\nimport { AfterContentInit, ChangeDetectionStrategy, Component, ContentChild, ContentChildren, inject, Input, NgModule, QueryList, signal, TemplateRef, ViewEncapsulation } from '@angular/core';\nimport { equals } from '@primeuix/utils';\nimport { BlockableUI, Footer, Header, PrimeTemplate, SharedModule } from 'primeng/api';\nimport { BaseComponent } from 'primeng/basecomponent';\nimport { CardStyle } from './style/cardstyle';\n\n/**\n * Card is a flexible container component.\n * @group Components\n */\n@Component({\n    selector: 'p-card',\n    standalone: true,\n    imports: [CommonModule, SharedModule],\n    template: `\n        <div [class]=\"cx('header')\" *ngIf=\"headerFacet || headerTemplate || _headerTemplate\">\n            <ng-content select=\"p-header\"></ng-content>\n            <ng-container *ngTemplateOutlet=\"headerTemplate || _headerTemplate\"></ng-container>\n        </div>\n        <div [class]=\"cx('body')\">\n            <div [class]=\"cx('title')\" *ngIf=\"header || titleTemplate || _titleTemplate\">\n                <ng-container *ngIf=\"header && !_titleTemplate && !titleTemplate\">{{ header }}</ng-container>\n                <ng-container *ngTemplateOutlet=\"titleTemplate || _titleTemplate\"></ng-container>\n            </div>\n            <div [class]=\"cx('subtitle')\" *ngIf=\"subheader || subtitleTemplate || _subtitleTemplate\">\n                <ng-container *ngIf=\"subheader && !_subtitleTemplate && !subtitleTemplate\">{{ subheader }}</ng-container>\n                <ng-container *ngTemplateOutlet=\"subtitleTemplate || _subtitleTemplate\"></ng-container>\n            </div>\n            <div [class]=\"cx('content')\">\n                <ng-content></ng-content>\n                <ng-container *ngTemplateOutlet=\"contentTemplate || _contentTemplate\"></ng-container>\n            </div>\n            <div [class]=\"cx('footer')\" *ngIf=\"footerFacet || footerTemplate || _footerTemplate\">\n                <ng-content select=\"p-footer\"></ng-content>\n                <ng-container *ngTemplateOutlet=\"footerTemplate || _footerTemplate\"></ng-container>\n            </div>\n        </div>\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    providers: [CardStyle],\n    host: {\n        '[class]': \"cn(cx('root'), styleClass)\",\n        '[attr.data-pc-name]': '\"card\"',\n        '[style]': '_style()'\n    }\n})\nexport class Card extends BaseComponent implements AfterContentInit, BlockableUI {\n    /**\n     * Header of the card.\n     * @group Props\n     */\n    @Input() header: string | undefined;\n    /**\n     * Subheader of the card.\n     * @group Props\n     */\n    @Input() subheader: string | undefined;\n    /**\n     * Inline style of the element.\n     * @group Props\n     */\n    @Input() set style(value: { [klass: string]: any } | null | undefined) {\n        if (!equals(this._style(), value)) {\n            this._style.set(value);\n        }\n    }\n    /**\n     * Class of the element.\n     * @deprecated since v20.0.0, use `class` instead.\n     * @group Props\n     */\n    @Input() styleClass: string | undefined;\n\n    @ContentChild(Header) headerFacet: TemplateRef<any> | undefined;\n\n    @ContentChild(Footer) footerFacet: TemplateRef<any> | undefined;\n\n    @ContentChild('header', { descendants: false }) headerTemplate: TemplateRef<any> | undefined;\n\n    @ContentChild('title', { descendants: false }) titleTemplate: TemplateRef<any> | undefined;\n\n    @ContentChild('subtitle', { descendants: false }) subtitleTemplate: TemplateRef<any> | undefined;\n\n    @ContentChild('content', { descendants: false }) contentTemplate: TemplateRef<any> | undefined;\n\n    @ContentChild('footer', { descendants: false }) footerTemplate: TemplateRef<any> | undefined;\n\n    _headerTemplate: TemplateRef<any> | undefined;\n\n    _titleTemplate: TemplateRef<any> | undefined;\n\n    _subtitleTemplate: TemplateRef<any> | undefined;\n\n    _contentTemplate: TemplateRef<any> | undefined;\n\n    _footerTemplate: TemplateRef<any> | undefined;\n\n    _style = signal<{ [klass: string]: any } | null | undefined>(null);\n\n    _componentStyle = inject(CardStyle);\n\n    getBlockableElement(): HTMLElement {\n        return this.el.nativeElement.children[0];\n    }\n\n    @ContentChildren(PrimeTemplate) templates: QueryList<PrimeTemplate> | undefined;\n\n    ngAfterContentInit() {\n        (this.templates as QueryList<PrimeTemplate>).forEach((item) => {\n            switch (item.getType()) {\n                case 'header':\n                    this._headerTemplate = item.template;\n                    break;\n\n                case 'title':\n                    this._titleTemplate = item.template;\n                    break;\n\n                case 'subtitle':\n                    this._subtitleTemplate = item.template;\n                    break;\n\n                case 'content':\n                    this._contentTemplate = item.template;\n                    break;\n\n                case 'footer':\n                    this._footerTemplate = item.template;\n                    break;\n\n                default:\n                    this._contentTemplate = item.template;\n                    break;\n            }\n        });\n    }\n}\n\n@NgModule({\n    imports: [Card, SharedModule],\n    exports: [Card, SharedModule]\n})\nexport class CardModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"primeng-card.mjs","sources":["../../src/card/style/cardstyle.ts","../../src/card/card.ts","../../src/card/primeng-card.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { style as card_style } from '@primeuix/styles/card';\nimport { BaseStyle } from 'primeng/base';\n\nconst style = /*css*/ `\n    ${card_style}\n\n    .p-card {\n        display: block;\n    }\n`;\n\nconst classes = {\n    root: 'p-card p-component',\n    header: 'p-card-header',\n    body: 'p-card-body',\n    caption: 'p-card-caption',\n    title: 'p-card-title',\n    subtitle: 'p-card-subtitle',\n    content: 'p-card-content',\n    footer: 'p-card-footer'\n};\n\n@Injectable()\nexport class CardStyle extends BaseStyle {\n    name = 'card';\n\n    style = style;\n\n    classes = classes;\n}\n\n/**\n *\n * Card is a flexible container component.\n *\n * [Live Demo](https://www.primeng.org/card/)\n *\n * @module cardstyle\n *\n */\nexport enum CardClasses {\n    /**\n     * Class name of the root element\n     */\n    root = 'p-card',\n    /**\n     * Class name of the header element\n     */\n    header = 'p-card-header',\n    /**\n     * Class name of the body element\n     */\n    body = 'p-card-body',\n    /**\n     * Class name of the caption element\n     */\n    caption = 'p-card-caption',\n    /**\n     * Class name of the title element\n     */\n    title = 'p-card-title',\n    /**\n     * Class name of the subtitle element\n     */\n    subtitle = 'p-card-subtitle',\n    /**\n     * Class name of the content element\n     */\n    content = 'p-card-content',\n    /**\n     * Class name of the footer element\n     */\n    footer = 'p-card-footer'\n}\n\nexport interface CardStyle extends BaseStyle {}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, ContentChild, ContentChildren, inject, InjectionToken, Input, NgModule, QueryList, signal, TemplateRef, ViewEncapsulation } from '@angular/core';\nimport { equals } from '@primeuix/utils';\nimport { BlockableUI, Footer, Header, PrimeTemplate, SharedModule } from 'primeng/api';\nimport { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';\nimport { Bind, BindModule } from 'primeng/bind';\nimport { CardStyle } from './style/cardstyle';\nimport { CardPassThrough } from 'primeng/types/card';\n\nconst CARD_INSTANCE = new InjectionToken<Card>('CARD_INSTANCE');\n\n/**\n * Card is a flexible container component.\n * @group Components\n */\n@Component({\n    selector: 'p-card',\n    standalone: true,\n    imports: [CommonModule, SharedModule, BindModule],\n    template: `\n        <div [pBind]=\"ptm('header')\" [class]=\"cx('header')\" *ngIf=\"headerFacet || headerTemplate || _headerTemplate\">\n            <ng-content select=\"p-header\"></ng-content>\n            <ng-container *ngTemplateOutlet=\"headerTemplate || _headerTemplate\"></ng-container>\n        </div>\n        <div [pBind]=\"ptm('body')\" [class]=\"cx('body')\">\n            <div [pBind]=\"ptm('title')\" [class]=\"cx('title')\" *ngIf=\"header || titleTemplate || _titleTemplate\">\n                <ng-container *ngIf=\"header && !_titleTemplate && !titleTemplate\">{{ header }}</ng-container>\n                <ng-container *ngTemplateOutlet=\"titleTemplate || _titleTemplate\"></ng-container>\n            </div>\n            <div [pBind]=\"ptm('subtitle')\" [class]=\"cx('subtitle')\" *ngIf=\"subheader || subtitleTemplate || _subtitleTemplate\">\n                <ng-container *ngIf=\"subheader && !_subtitleTemplate && !subtitleTemplate\">{{ subheader }}</ng-container>\n                <ng-container *ngTemplateOutlet=\"subtitleTemplate || _subtitleTemplate\"></ng-container>\n            </div>\n            <div [pBind]=\"ptm('content')\" [class]=\"cx('content')\">\n                <ng-content></ng-content>\n                <ng-container *ngTemplateOutlet=\"contentTemplate || _contentTemplate\"></ng-container>\n            </div>\n            <div [pBind]=\"ptm('footer')\" [class]=\"cx('footer')\" *ngIf=\"footerFacet || footerTemplate || _footerTemplate\">\n                <ng-content select=\"p-footer\"></ng-content>\n                <ng-container *ngTemplateOutlet=\"footerTemplate || _footerTemplate\"></ng-container>\n            </div>\n        </div>\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    providers: [CardStyle, { provide: CARD_INSTANCE, useExisting: Card }, { provide: PARENT_INSTANCE, useExisting: Card }],\n    host: {\n        '[class]': \"cn(cx('root'), styleClass)\",\n        '[style]': '_style()'\n    },\n    hostDirectives: [Bind]\n})\nexport class Card extends BaseComponent<CardPassThrough> implements BlockableUI {\n    $pcCard: Card | undefined = inject(CARD_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;\n\n    bindDirectiveInstance = inject(Bind, { self: true });\n\n    _componentStyle = inject(CardStyle);\n\n    onAfterViewChecked(): void {\n        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));\n    }\n    /**\n     * Header of the card.\n     * @group Props\n     */\n    @Input() header: string | undefined;\n    /**\n     * Subheader of the card.\n     * @group Props\n     */\n    @Input() subheader: string | undefined;\n    /**\n     * Inline style of the element.\n     * @group Props\n     */\n    @Input() set style(value: { [klass: string]: any } | null | undefined) {\n        if (!equals(this._style(), value)) {\n            this._style.set(value);\n            // Apply style directly to avoid infinite loop in host binding\n            if (this.el?.nativeElement) {\n                if (value) {\n                    Object.keys(value).forEach((key) => {\n                        this.el.nativeElement.style[key] = value[key];\n                    });\n                }\n            }\n        }\n    }\n\n    get style() {\n        return this._style();\n    }\n    /**\n     * Class of the element.\n     * @deprecated since v20.0.0, use `class` instead.\n     * @group Props\n     */\n    @Input() styleClass: string | undefined;\n\n    @ContentChild(Header) headerFacet: TemplateRef<any> | undefined;\n\n    @ContentChild(Footer) footerFacet: TemplateRef<any> | undefined;\n\n    @ContentChild('header', { descendants: false }) headerTemplate: TemplateRef<any> | undefined;\n\n    @ContentChild('title', { descendants: false }) titleTemplate: TemplateRef<any> | undefined;\n\n    @ContentChild('subtitle', { descendants: false }) subtitleTemplate: TemplateRef<any> | undefined;\n\n    @ContentChild('content', { descendants: false }) contentTemplate: TemplateRef<any> | undefined;\n\n    @ContentChild('footer', { descendants: false }) footerTemplate: TemplateRef<any> | undefined;\n\n    _headerTemplate: TemplateRef<any> | undefined;\n\n    _titleTemplate: TemplateRef<any> | undefined;\n\n    _subtitleTemplate: TemplateRef<any> | undefined;\n\n    _contentTemplate: TemplateRef<any> | undefined;\n\n    _footerTemplate: TemplateRef<any> | undefined;\n\n    _style = signal<{ [klass: string]: any } | null | undefined>(null);\n\n    getBlockableElement(): HTMLElement {\n        return this.el.nativeElement.children[0];\n    }\n\n    @ContentChildren(PrimeTemplate) templates: QueryList<PrimeTemplate> | undefined;\n\n    onAfterContentInit() {\n        (this.templates as QueryList<PrimeTemplate>).forEach((item) => {\n            switch (item.getType()) {\n                case 'header':\n                    this._headerTemplate = item.template;\n                    break;\n\n                case 'title':\n                    this._titleTemplate = item.template;\n                    break;\n\n                case 'subtitle':\n                    this._subtitleTemplate = item.template;\n                    break;\n\n                case 'content':\n                    this._contentTemplate = item.template;\n                    break;\n\n                case 'footer':\n                    this._footerTemplate = item.template;\n                    break;\n\n                default:\n                    this._contentTemplate = item.template;\n                    break;\n            }\n        });\n    }\n}\n\n@NgModule({\n    imports: [Card, SharedModule, BindModule],\n    exports: [Card, SharedModule, BindModule]\n})\nexport class CardModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["card_style"],"mappings":"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"}

package/fesm2022/primeng-carousel.mjs

@@ -1,11 +1,14 @@
-import * as i1 from '@angular/common';
+export * from 'primeng/types/carousel';
+import * as i2 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, inject, numberAttribute, booleanAttribute, ContentChildren, ContentChild, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { Injectable, inject, EventEmitter, numberAttribute, booleanAttribute, ContentChildren, ContentChild, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { uuid, setAttribute, find, getAttribute, findSingle } from '@primeuix/utils';
 import { SharedModule, Header, Footer, PrimeTemplate } from 'primeng/api';
-import { BaseComponent } from 'primeng/basecomponent';
-import * as i2 from 'primeng/button';
+import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
+import * as i1 from 'primeng/bind';
+import { Bind, BindModule } from 'primeng/bind';
+import * as i3 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import { ChevronRightIcon, ChevronLeftIcon, ChevronDownIcon, ChevronUpIcon } from 'primeng/icons';
 import { style } from '@primeuix/styles/carousel';
@@ -64,12 +67,12 @@ const classes = {
 };
 class CarouselStyle extends BaseStyle {
     name = 'carousel';
-    theme = style;
+    style = style;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CarouselStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CarouselStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CarouselStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CarouselStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CarouselStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CarouselStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -148,6 +151,10 @@ var CarouselClasses;
 class Carousel extends BaseComponent {
     el;
     zone;
+    bindDirectiveInstance = inject(Bind, { self: true });
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptm('root'));
+    }
     /**
      * Index of the first item.
      * @defaultValue 0
@@ -365,7 +372,7 @@ class Carousel extends BaseComponent {
         this.totalShiftedItems = this.page * this.numScroll * -1;
         this.window = this.document.defaultView;
     }
-    ngOnChanges(simpleChange) {
+    onChanges(simpleChange) {
         if (isPlatformBrowser(this.platformId)) {
             if (simpleChange.value) {
                 if (this.circular && this._value) {
@@ -393,7 +400,7 @@ class Carousel extends BaseComponent {
         this.cd.markForCheck();
     }
     templates;
-    ngAfterContentInit() {
+    onAfterContentInit() {
         this.id = uuid('pn_id_');
         if (isPlatformBrowser(this.platformId)) {
             this.allowAutoplay = !!this.autoplayInterval;
@@ -434,7 +441,7 @@ class Carousel extends BaseComponent {
         });
         this.cd.detectChanges();
     }
-    ngAfterContentChecked() {
+    onAfterContentChecked() {
         if (isPlatformBrowser(this.platformId)) {
             const isCircular = this.isCircular();
             let totalShiftedItems = this.totalShiftedItems;
@@ -656,7 +663,7 @@ class Carousel extends BaseComponent {
         }
     }
     onRightKey() {
-        const indicators = [...find(this.indicatorContent.nativeElement, '[data-pc-section="indicator"]')];
+        const indicators = [...find(this.indicatorContent?.nativeElement, '[data-pc-section="indicator"]')];
         const activeIndex = this.findFocusedIndicatorIndex();
         this.changedFocusedIndicator(activeIndex, activeIndex + 1 === indicators.length ? indicators.length - 1 : activeIndex + 1);
     }
@@ -669,25 +676,25 @@ class Carousel extends BaseComponent {
         this.changedFocusedIndicator(activeIndex, 0);
     }
     onEndKey() {
-        const indicators = [...find(this.indicatorContent.nativeElement, '[data-pc-section="indicator"]r')];
+        const indicators = [...find(this.indicatorContent?.nativeElement, '[data-pc-section="indicator"]')];
         const activeIndex = this.findFocusedIndicatorIndex();
         this.changedFocusedIndicator(activeIndex, indicators.length - 1);
     }
     onTabKey() {
-        const indicators = [...find(this.indicatorContent.nativeElement, '[data-pc-section="indicator"]')];
+        const indicators = [...find(this.indicatorContent?.nativeElement, '[data-pc-section="indicator"]')];
         const highlightedIndex = indicators.findIndex((ind) => getAttribute(ind, 'data-p-highlight') === true);
-        const activeIndicator = findSingle(this.indicatorContent.nativeElement, '[data-pc-section="indicator"] > button[tabindex="0"]');
+        const activeIndicator = findSingle(this.indicatorContent?.nativeElement, '[data-pc-section="indicator"] > button[tabindex="0"]');
         const activeIndex = indicators.findIndex((ind) => ind === activeIndicator.parentElement);
         indicators[activeIndex].children[0].tabIndex = '-1';
         indicators[highlightedIndex].children[0].tabIndex = '0';
     }
     findFocusedIndicatorIndex() {
-        const indicators = [...find(this.indicatorContent.nativeElement, '[data-pc-section="indicator"]')];
-        const activeIndicator = findSingle(this.indicatorContent.nativeElement, '[data-pc-section="indicator"] > button[tabindex="0"]');
-        return indicators.findIndex((ind) => ind === activeIndicator.parentElement);
+        const indicators = [...find(this.indicatorContent?.nativeElement, '[data-pc-section="indicator"]')];
+        const activeIndicator = findSingle(this.indicatorContent?.nativeElement, '[data-pc-section="indicator"] > button[tabindex="0"]');
+        return indicators.findIndex((ind) => ind === activeIndicator?.parentElement);
     }
     changedFocusedIndicator(prevInd, nextInd) {
-        const indicators = [...find(this.indicatorContent.nativeElement, '[data-pc-section="indicator"]')];
+        const indicators = [...find(this.indicatorContent?.nativeElement, '[data-pc-section="indicator"]')];
         indicators[prevInd].children[0].tabIndex = '-1';
         indicators[nextInd].children[0].tabIndex = '0';
         indicators[nextInd].children[0].focus();
@@ -801,19 +808,36 @@ class Carousel extends BaseComponent {
         }
     }
     ariaPrevButtonLabel() {
-        return this.config.translation.aria ? this.config.translation.aria.prevPageLabel : undefined;
+        return this.config.translation.aria ? this.config.translation.aria?.prevPageLabel : undefined;
     }
     ariaSlideLabel() {
-        return this.config.translation.aria ? this.config.translation.aria.slide : undefined;
+        return this.config.translation.aria ? this.config.translation.aria?.slide : undefined;
     }
     ariaNextButtonLabel() {
-        return this.config.translation.aria ? this.config.translation.aria.nextPageLabel : undefined;
+        return this.config.translation.aria ? this.config.translation.aria?.nextPageLabel : undefined;
     }
     ariaSlideNumber(value) {
-        return this.config.translation.aria ? this.config.translation.aria.slideNumber.replace(/{slideNumber}/g, value) : undefined;
+        return this.config.translation.aria ? this.config.translation.aria?.slideNumber?.replace(/{slideNumber}/g, value) : undefined;
     }
     ariaPageLabel(value) {
-        return this.config.translation.aria ? this.config.translation.aria.pageLabel.replace(/{page}/g, value) : undefined;
+        return this.config.translation.aria ? this.config.translation.aria?.pageLabel?.replace(/{page}/g, value) : undefined;
+    }
+    getIndicatorPTOptions(key, index) {
+        return this.ptm(key, {
+            context: {
+                highlighted: index === this._page
+            }
+        });
+    }
+    getItemPTOptions(key, index) {
+        return this.ptm(key, {
+            context: {
+                index,
+                active: this.firstIndex() <= index && this.lastIndex() >= index,
+                start: this.firstIndex() === index,
+                end: this.lastIndex() === index
+            }
+        });
     }
     bindDocumentListeners() {
         if (isPlatformBrowser(this.platformId)) {
@@ -832,7 +856,7 @@ class Carousel extends BaseComponent {
             }
         }
     }
-    ngOnDestroy() {
+    onDestroy() {
         if (this.responsiveOptions) {
             this.unbindDocumentListeners();
         }
@@ -840,15 +864,24 @@ class Carousel extends BaseComponent {
             this.stopAutoplay();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: Carousel, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.0", type: Carousel, isStandalone: true, selector: "p-carousel", inputs: { page: "page", numVisible: "numVisible", numScroll: "numScroll", responsiveOptions: "responsiveOptions", orientation: "orientation", verticalViewPortHeight: "verticalViewPortHeight", contentClass: "contentClass", indicatorsContentClass: "indicatorsContentClass", indicatorsContentStyle: "indicatorsContentStyle", indicatorStyleClass: "indicatorStyleClass", indicatorStyle: "indicatorStyle", value: "value", circular: ["circular", "circular", booleanAttribute], showIndicators: ["showIndicators", "showIndicators", booleanAttribute], showNavigators: ["showNavigators", "showNavigators", booleanAttribute], autoplayInterval: ["autoplayInterval", "autoplayInterval", numberAttribute], styleClass: "styleClass", prevButtonProps: "prevButtonProps", nextButtonProps: "nextButtonProps" }, outputs: { onPage: "onPage" }, host: { properties: { "attr.id": "id", "attr.role": "'region'", "class": "cn(cx('root'), styleClass)" } }, providers: [CarouselStyle], queries: [{ propertyName: "headerFacet", first: true, predicate: Header, descendants: true }, { propertyName: "footerFacet", first: true, predicate: Footer, descendants: true }, { propertyName: "itemTemplate", first: true, predicate: ["item"] }, { propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "previousIconTemplate", first: true, predicate: ["previousicon"] }, { propertyName: "nextIconTemplate", first: true, predicate: ["nexticon"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "itemsContainer", first: true, predicate: ["itemsContainer"], descendants: true }, { propertyName: "indicatorContent", first: true, predicate: ["indicatorContent"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
-        <div [class]="cx('header')" *ngIf="headerFacet || headerTemplate">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Carousel, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.4", type: Carousel, isStandalone: true, selector: "p-carousel", inputs: { page: "page", numVisible: "numVisible", numScroll: "numScroll", responsiveOptions: "responsiveOptions", orientation: "orientation", verticalViewPortHeight: "verticalViewPortHeight", contentClass: "contentClass", indicatorsContentClass: "indicatorsContentClass", indicatorsContentStyle: "indicatorsContentStyle", indicatorStyleClass: "indicatorStyleClass", indicatorStyle: "indicatorStyle", value: "value", circular: ["circular", "circular", booleanAttribute], showIndicators: ["showIndicators", "showIndicators", booleanAttribute], showNavigators: ["showNavigators", "showNavigators", booleanAttribute], autoplayInterval: ["autoplayInterval", "autoplayInterval", numberAttribute], styleClass: "styleClass", prevButtonProps: "prevButtonProps", nextButtonProps: "nextButtonProps" }, outputs: { onPage: "onPage" }, host: { properties: { "attr.id": "id", "attr.role": "'region'", "class": "cn(cx('root'), styleClass)" } }, providers: [CarouselStyle, { provide: PARENT_INSTANCE, useExisting: Carousel }], queries: [{ propertyName: "headerFacet", first: true, predicate: Header, descendants: true }, { propertyName: "footerFacet", first: true, predicate: Footer, descendants: true }, { propertyName: "itemTemplate", first: true, predicate: ["item"] }, { propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "previousIconTemplate", first: true, predicate: ["previousicon"] }, { propertyName: "nextIconTemplate", first: true, predicate: ["nexticon"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "itemsContainer", first: true, predicate: ["itemsContainer"], descendants: true }, { propertyName: "indicatorContent", first: true, predicate: ["indicatorContent"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+        <div [class]="cx('header')" *ngIf="headerFacet || headerTemplate" [pBind]="ptm('header')">
             <ng-content select="p-header"></ng-content>
             <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
         </div>
-        <div [class]="contentClass" [ngClass]="cx('contentContainer')">
-            <div [class]="cx('content')" [attr.aria-live]="allowAutoplay ? 'polite' : 'off'">
-                <p-button *ngIf="showNavigators" [class]="cx('pcPrevButton')" [attr.aria-label]="ariaPrevButtonLabel()" (click)="navBackward($event)" [text]="true" [buttonProps]="prevButtonProps">
+        <div [class]="contentClass" [ngClass]="cx('contentContainer')" [pBind]="ptm('contentContainer')">
+            <div [class]="cx('content')" [attr.aria-live]="allowAutoplay ? 'polite' : 'off'" [pBind]="ptm('content')">
+                <p-button
+                    *ngIf="showNavigators"
+                    [class]="cx('pcPrevButton')"
+                    [attr.aria-label]="ariaPrevButtonLabel()"
+                    (click)="navBackward($event)"
+                    [text]="true"
+                    [buttonProps]="prevButtonProps"
+                    [pt]="ptm('pcPrevButton')"
+                    attr.data-pc-group-section="navigator"
+                >
                     <ng-template #icon>
                         <ng-container *ngIf="!previousIconTemplate && !_previousIconTemplate && !prevButtonProps?.icon">
                             <svg data-p-icon="chevron-left" *ngIf="!isVertical()" />
@@ -859,32 +892,58 @@ class Carousel extends BaseComponent {
                         </ng-container>
                     </ng-template>
                 </p-button>
-                <div [class]="cx('viewport')" [ngStyle]="{ height: isVertical() ? verticalViewPortHeight : 'auto' }" (touchend)="onTouchEnd($event)" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)">
-                    <div #itemsContainer [class]="cx('itemList')" (transitionend)="onTransitionEnd()">
+                <div [class]="cx('viewport')" [ngStyle]="{ height: isVertical() ? verticalViewPortHeight : 'auto' }" (touchend)="onTouchEnd($event)" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)" [pBind]="ptm('viewport')">
+                    <div #itemsContainer [class]="cx('itemList')" (transitionend)="onTransitionEnd()" [pBind]="ptm('itemList')">
                         <div
                             *ngFor="let item of clonedItemsForStarting; let index = index"
                             [class]="cx('itemClone', { index })"
                             [attr.aria-hidden]="!(totalShiftedItems * -1 === value.length)"
                             [attr.aria-label]="ariaSlideNumber(index)"
                             [attr.aria-roledescription]="ariaSlideLabel()"
+                            [attr.data-p-carousel-item-active]="totalShiftedItems * -1 === value.length + _numVisible"
+                            [attr.data-p-carousel-item-start]="index === 0"
+                            [attr.data-p-carousel-item-end]="clonedItemsForStarting && clonedItemsForStarting.length - 1 === index"
+                            [pBind]="ptm('itemClone')"
                         >
                             <ng-container *ngTemplateOutlet="itemTemplate || _itemTemplate; context: { $implicit: item }"></ng-container>
                         </div>
                         <div
                             *ngFor="let item of value; let index = index"
                             [class]="cx('item', { index })"
+                            role="group"
                             [attr.aria-hidden]="!(firstIndex() <= index && lastIndex() >= index)"
                             [attr.aria-label]="ariaSlideNumber(index)"
                             [attr.aria-roledescription]="ariaSlideLabel()"
+                            [attr.data-p-carousel-item-active]="firstIndex() <= index && lastIndex() >= index"
+                            [attr.data-p-carousel-item-start]="firstIndex() === index"
+                            [attr.data-p-carousel-item-end]="lastIndex() === index"
+                            [pBind]="getItemPTOptions('item', index)"
                         >
                             <ng-container *ngTemplateOutlet="itemTemplate || _itemTemplate; context: { $implicit: item }"></ng-container>
                         </div>
-                        <div *ngFor="let item of clonedItemsForFinishing; let index = index" [class]="cx('itemClone', { index })">
+                        <div
+                            *ngFor="let item of clonedItemsForFinishing; let index = index"
+                            [class]="cx('itemClone', { index })"
+                            [attr.data-p-carousel-item-active]="false"
+                            [attr.data-p-carousel-item-start]="false"
+                            [attr.data-p-carousel-item-end]="false"
+                            [pBind]="ptm('itemClone')"
+                        >
                             <ng-container *ngTemplateOutlet="itemTemplate || _itemTemplate; context: { $implicit: item }"></ng-container>
                         </div>
                     </div>
                 </div>
-                <p-button type="button" *ngIf="showNavigators" [class]="cx('pcNextButton')" (click)="navForward($event)" [attr.aria-label]="ariaNextButtonLabel()" [buttonProps]="nextButtonProps" [text]="true">
+                <p-button
+                    type="button"
+                    *ngIf="showNavigators"
+                    [class]="cx('pcNextButton')"
+                    (click)="navForward($event)"
+                    [attr.aria-label]="ariaNextButtonLabel()"
+                    [buttonProps]="nextButtonProps"
+                    [text]="true"
+                    [pt]="ptm('pcNextButton')"
+                    attr.data-pc-group-section="navigator"
+                >
                     <ng-template #icon>
                         <ng-container *ngIf="!nextIconTemplate && !_nextIconTemplate && !nextButtonProps?.icon">
                             <svg data-p-icon="chevron-right" *ngIf="!isVertical()" />
@@ -896,8 +955,8 @@ class Carousel extends BaseComponent {
                     </ng-template>
                 </p-button>
             </div>
-            <ul #indicatorContent [class]="cx('indicatorList')" [ngStyle]="indicatorsContentStyle" *ngIf="showIndicators" (keydown)="onIndicatorKeydown($event)">
-                <li *ngFor="let totalDot of totalDotsArray(); let i = index" [class]="cx('indicator', { index: i })" [attr.data-pc-section]="'indicator'">
+            <ul #indicatorContent [class]="cx('indicatorList')" [ngStyle]="indicatorsContentStyle" *ngIf="showIndicators" (keydown)="onIndicatorKeydown($event)" [pBind]="ptm('indicatorList')">
+                <li *ngFor="let totalDot of totalDotsArray(); let i = index" [class]="cx('indicator', { index: i })" [attr.data-p-active]="_page === i" [pBind]="getIndicatorPTOptions('indicator', i)">
                     <button
                         type="button"
                         [class]="cx('indicatorButton')"
@@ -906,30 +965,40 @@ class Carousel extends BaseComponent {
                         [attr.aria-label]="ariaPageLabel(i + 1)"
                         [attr.aria-current]="_page === i ? 'page' : undefined"
                         [tabindex]="_page === i ? 0 : -1"
+                        [pBind]="getIndicatorPTOptions('indicatorButton', i)"
                     ></button>
                 </li>
             </ul>
         </div>
-        <div [class]="cx('footer')" *ngIf="footerFacet || footerTemplate || _footerTemplate">
+        <div [class]="cx('footer')" *ngIf="footerFacet || footerTemplate || _footerTemplate" [pBind]="ptm('footer')">
             <ng-content select="p-footer"></ng-content>
             <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
         </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ChevronRightIcon, selector: "[data-p-icon=\"chevron-right\"]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ChevronLeftIcon, selector: "[data-p-icon=\"chevron-left\"]" }, { kind: "component", type: ChevronDownIcon, selector: "[data-p-icon=\"chevron-down\"]" }, { kind: "component", type: ChevronUpIcon, selector: "[data-p-icon=\"chevron-up\"]" }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ChevronRightIcon, selector: "[data-p-icon=\"chevron-right\"]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ChevronLeftIcon, selector: "[data-p-icon=\"chevron-left\"]" }, { kind: "component", type: ChevronDownIcon, selector: "[data-p-icon=\"chevron-down\"]" }, { kind: "component", type: ChevronUpIcon, selector: "[data-p-icon=\"chevron-up\"]" }, { 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.0", ngImport: i0, type: Carousel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Carousel, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-carousel',
                     standalone: true,
-                    imports: [CommonModule, ChevronRightIcon, ButtonModule, ChevronLeftIcon, ChevronDownIcon, ChevronUpIcon, SharedModule],
+                    imports: [CommonModule, ChevronRightIcon, ButtonModule, ChevronLeftIcon, ChevronDownIcon, ChevronUpIcon, SharedModule, BindModule],
                     template: `
-        <div [class]="cx('header')" *ngIf="headerFacet || headerTemplate">
+        <div [class]="cx('header')" *ngIf="headerFacet || headerTemplate" [pBind]="ptm('header')">
             <ng-content select="p-header"></ng-content>
             <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
         </div>
-        <div [class]="contentClass" [ngClass]="cx('contentContainer')">
-            <div [class]="cx('content')" [attr.aria-live]="allowAutoplay ? 'polite' : 'off'">
-                <p-button *ngIf="showNavigators" [class]="cx('pcPrevButton')" [attr.aria-label]="ariaPrevButtonLabel()" (click)="navBackward($event)" [text]="true" [buttonProps]="prevButtonProps">
+        <div [class]="contentClass" [ngClass]="cx('contentContainer')" [pBind]="ptm('contentContainer')">
+            <div [class]="cx('content')" [attr.aria-live]="allowAutoplay ? 'polite' : 'off'" [pBind]="ptm('content')">
+                <p-button
+                    *ngIf="showNavigators"
+                    [class]="cx('pcPrevButton')"
+                    [attr.aria-label]="ariaPrevButtonLabel()"
+                    (click)="navBackward($event)"
+                    [text]="true"
+                    [buttonProps]="prevButtonProps"
+                    [pt]="ptm('pcPrevButton')"
+                    attr.data-pc-group-section="navigator"
+                >
                     <ng-template #icon>
                         <ng-container *ngIf="!previousIconTemplate && !_previousIconTemplate && !prevButtonProps?.icon">
                             <svg data-p-icon="chevron-left" *ngIf="!isVertical()" />
@@ -940,32 +1009,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         </ng-container>
                     </ng-template>
                 </p-button>
-                <div [class]="cx('viewport')" [ngStyle]="{ height: isVertical() ? verticalViewPortHeight : 'auto' }" (touchend)="onTouchEnd($event)" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)">
-                    <div #itemsContainer [class]="cx('itemList')" (transitionend)="onTransitionEnd()">
+                <div [class]="cx('viewport')" [ngStyle]="{ height: isVertical() ? verticalViewPortHeight : 'auto' }" (touchend)="onTouchEnd($event)" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)" [pBind]="ptm('viewport')">
+                    <div #itemsContainer [class]="cx('itemList')" (transitionend)="onTransitionEnd()" [pBind]="ptm('itemList')">
                         <div
                             *ngFor="let item of clonedItemsForStarting; let index = index"
                             [class]="cx('itemClone', { index })"
                             [attr.aria-hidden]="!(totalShiftedItems * -1 === value.length)"
                             [attr.aria-label]="ariaSlideNumber(index)"
                             [attr.aria-roledescription]="ariaSlideLabel()"
+                            [attr.data-p-carousel-item-active]="totalShiftedItems * -1 === value.length + _numVisible"
+                            [attr.data-p-carousel-item-start]="index === 0"
+                            [attr.data-p-carousel-item-end]="clonedItemsForStarting && clonedItemsForStarting.length - 1 === index"
+                            [pBind]="ptm('itemClone')"
                         >
                             <ng-container *ngTemplateOutlet="itemTemplate || _itemTemplate; context: { $implicit: item }"></ng-container>
                         </div>
                         <div
                             *ngFor="let item of value; let index = index"
                             [class]="cx('item', { index })"
+                            role="group"
                             [attr.aria-hidden]="!(firstIndex() <= index && lastIndex() >= index)"
                             [attr.aria-label]="ariaSlideNumber(index)"
                             [attr.aria-roledescription]="ariaSlideLabel()"
+                            [attr.data-p-carousel-item-active]="firstIndex() <= index && lastIndex() >= index"
+                            [attr.data-p-carousel-item-start]="firstIndex() === index"
+                            [attr.data-p-carousel-item-end]="lastIndex() === index"
+                            [pBind]="getItemPTOptions('item', index)"
                         >
                             <ng-container *ngTemplateOutlet="itemTemplate || _itemTemplate; context: { $implicit: item }"></ng-container>
                         </div>
-                        <div *ngFor="let item of clonedItemsForFinishing; let index = index" [class]="cx('itemClone', { index })">
+                        <div
+                            *ngFor="let item of clonedItemsForFinishing; let index = index"
+                            [class]="cx('itemClone', { index })"
+                            [attr.data-p-carousel-item-active]="false"
+                            [attr.data-p-carousel-item-start]="false"
+                            [attr.data-p-carousel-item-end]="false"
+                            [pBind]="ptm('itemClone')"
+                        >
                             <ng-container *ngTemplateOutlet="itemTemplate || _itemTemplate; context: { $implicit: item }"></ng-container>
                         </div>
                     </div>
                 </div>
-                <p-button type="button" *ngIf="showNavigators" [class]="cx('pcNextButton')" (click)="navForward($event)" [attr.aria-label]="ariaNextButtonLabel()" [buttonProps]="nextButtonProps" [text]="true">
+                <p-button
+                    type="button"
+                    *ngIf="showNavigators"
+                    [class]="cx('pcNextButton')"
+                    (click)="navForward($event)"
+                    [attr.aria-label]="ariaNextButtonLabel()"
+                    [buttonProps]="nextButtonProps"
+                    [text]="true"
+                    [pt]="ptm('pcNextButton')"
+                    attr.data-pc-group-section="navigator"
+                >
                     <ng-template #icon>
                         <ng-container *ngIf="!nextIconTemplate && !_nextIconTemplate && !nextButtonProps?.icon">
                             <svg data-p-icon="chevron-right" *ngIf="!isVertical()" />
@@ -977,8 +1072,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                     </ng-template>
                 </p-button>
             </div>
-            <ul #indicatorContent [class]="cx('indicatorList')" [ngStyle]="indicatorsContentStyle" *ngIf="showIndicators" (keydown)="onIndicatorKeydown($event)">
-                <li *ngFor="let totalDot of totalDotsArray(); let i = index" [class]="cx('indicator', { index: i })" [attr.data-pc-section]="'indicator'">
+            <ul #indicatorContent [class]="cx('indicatorList')" [ngStyle]="indicatorsContentStyle" *ngIf="showIndicators" (keydown)="onIndicatorKeydown($event)" [pBind]="ptm('indicatorList')">
+                <li *ngFor="let totalDot of totalDotsArray(); let i = index" [class]="cx('indicator', { index: i })" [attr.data-p-active]="_page === i" [pBind]="getIndicatorPTOptions('indicator', i)">
                     <button
                         type="button"
                         [class]="cx('indicatorButton')"
@@ -987,18 +1082,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         [attr.aria-label]="ariaPageLabel(i + 1)"
                         [attr.aria-current]="_page === i ? 'page' : undefined"
                         [tabindex]="_page === i ? 0 : -1"
+                        [pBind]="getIndicatorPTOptions('indicatorButton', i)"
                     ></button>
                 </li>
             </ul>
         </div>
-        <div [class]="cx('footer')" *ngIf="footerFacet || footerTemplate || _footerTemplate">
+        <div [class]="cx('footer')" *ngIf="footerFacet || footerTemplate || _footerTemplate" [pBind]="ptm('footer')">
             <ng-content select="p-footer"></ng-content>
             <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
         </div>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    providers: [CarouselStyle],
+                    providers: [CarouselStyle, { provide: PARENT_INSTANCE, useExisting: Carousel }],
+                    hostDirectives: [Bind],
                     host: {
                         '[attr.id]': 'id',
                         '[attr.role]': "'region'",
@@ -1081,11 +1178,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 args: [PrimeTemplate]
             }] } });
 class CarouselModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: CarouselModule, imports: [Carousel, SharedModule], exports: [Carousel, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CarouselModule, imports: [Carousel, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: CarouselModule, imports: [Carousel, SharedModule], exports: [Carousel, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CarouselModule, imports: [Carousel, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CarouselModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CarouselModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Carousel, SharedModule],