primeng 19.1.3 → 20.0.0-rc.1

package/fesm2022/primeng-carousel.mjs

@@ -8,109 +8,9 @@ import { BaseComponent } from 'primeng/basecomponent';
 import * as i2 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import { ChevronRightIcon, ChevronLeftIcon, ChevronDownIcon, ChevronUpIcon } from 'primeng/icons';
+import { style } from '@primeuix/styles/carousel';
 import { BaseStyle } from 'primeng/base';
 
-const theme = ({ dt }) => `
-.p-carousel {
-    display: flex;
-    flex-direction: column;
-}
-
-.p-carousel-content-container {
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
-}
-
-.p-carousel-content {
-    display: flex;
-    flex-direction: row;
-    gap: ${dt('carousel.content.gap')};
-}
-
-.p-carousel-content:dir(rtl) {
-    flex-direction: row-reverse;
-}
-
-.p-carousel-viewport {
-    overflow: hidden;
-    width: 100%;
-}
-
-.p-carousel-item-list {
-    display: flex;
-    flex-direction: row;
-}
-
-.p-carousel-item-list:dir(rtl) {
-    flex-direction: row-reverse;
-}
-
-.p-carousel-prev-button,
-.p-carousel-next-button {
-    align-self: center;
-    flex-shrink: 0;
-}
-
-.p-carousel-indicator-list {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    flex-wrap: wrap;
-    padding: ${dt('carousel.indicator.list.padding')};
-    gap: ${dt('carousel.indicator.list.gap')};
-    margin: 0;
-    list-style: none;
-}
-
-.p-carousel-indicator-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: ${dt('carousel.indicator.background')};
-    width: ${dt('carousel.indicator.width')};
-    height: ${dt('carousel.indicator.height')};
-    border: 0 none;
-    transition: background ${dt('carousel.transition.duration')}, color ${dt('carousel.transition.duration')}, outline-color ${dt('carousel.transition.duration')}, box-shadow ${dt('carousel.transition.duration')};
-    outline-color: transparent;
-    border-radius: ${dt('carousel.indicator.border.radius')};
-    padding: 0;
-    margin: 0;
-    user-select: none;
-    cursor: pointer;
-}
-
-.p-carousel-indicator-button:focus-visible {
-    box-shadow: ${dt('carousel.indicator.focus.ring.shadow')};
-    outline: ${dt('carousel.indicator.focus.ring.width')} ${dt('carousel.indicator.focus.ring.style')} ${dt('carousel.indicator.focus.ring.color')};
-    outline-offset: ${dt('carousel.indicator.focus.ring.offset')};
-}
-
-.p-carousel-indicator-button:hover {
-    background: ${dt('carousel.indicator.hover.background')};
-}
-
-.p-carousel-indicator-active .p-carousel-indicator-button {
-    background: ${dt('carousel.indicator.active.background')};
-}
-
-.p-carousel-vertical .p-carousel-content {
-    flex-direction: column;
-}
-
-.p-carousel-vertical .p-carousel-item-list {
-    flex-direction: column;
-    height: 100%;
-}
-
-.p-items-hidden .p-carousel-item {
-    visibility: hidden;
-}
-
-.p-items-hidden .p-carousel-item.p-carousel-item-active {
-    visibility: visible;
-}
-`;
 const classes = {
     root: ({ instance }) => [
         'p-carousel p-component',
@@ -125,17 +25,17 @@ const classes = {
     pcPrevButton: ({ instance }) => [
         'p-carousel-prev-button',
         {
-            'p-disabled': instance.backwardIsDisabled
+            'p-disabled': instance.isBackwardNavDisabled()
         }
     ],
     viewport: 'p-carousel-viewport',
     itemList: 'p-carousel-item-list',
-    itemClone: ({ index, value, totalShiftedItems, d_numVisible }) => [
+    itemClone: ({ instance, index }) => [
         'p-carousel-item p-carousel-item-clone',
         {
-            'p-carousel-item-active': totalShiftedItems * -1 === value.length + d_numVisible,
-            'p-carousel-item-start': index === 0,
-            'p-carousel-item-end': value.slice(-1 * d_numVisible).length - 1 === index
+            'p-carousel-item-active': instance.totalShiftedItems * -1 === instance.value.length,
+            'p-carousel-item-start': 0 === index,
+            'p-carousel-item-end': instance.clonedItemsForStarting.length - 1 === index
         }
     ],
     item: ({ instance, index }) => [
@@ -149,27 +49,27 @@ const classes = {
     pcNextButton: ({ instance }) => [
         'p-carousel-next-button',
         {
-            'p-disabled': instance.forwardIsDisabled
+            'p-disabled': instance.isForwardNavDisabled()
         }
     ],
-    indicatorList: 'p-carousel-indicator-list',
+    indicatorList: ({ instance }) => ['p-carousel-indicator-list', instance.indicatorsContentClass],
     indicator: ({ instance, index }) => [
         'p-carousel-indicator',
         {
-            'p-carousel-indicator-active': instance.d_page === index
+            'p-carousel-indicator-active': instance._page === index
         }
     ],
-    indicatorButton: 'p-carousel-indicator-button',
+    indicatorButton: ({ instance }) => ['p-carousel-indicator-button', instance.indicatorStyleClass],
     footer: 'p-carousel-footer'
 };
 class CarouselStyle extends BaseStyle {
     name = 'carousel';
-    theme = theme;
+    theme = style;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: CarouselStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: CarouselStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CarouselStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CarouselStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: CarouselStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CarouselStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -364,13 +264,9 @@ class Carousel extends BaseComponent {
      * @group Props
      */
     autoplayInterval = 0;
-    /**
-     * Inline style of the component.
-     * @group Props
-     */
-    style;
     /**
      * Style class of the viewport container.
+     * @deprecated since v20.0.0, use `class` instead.
      * @group Props
      */
     styleClass;
@@ -943,241 +839,170 @@ class Carousel extends BaseComponent {
             this.stopAutoplay();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: Carousel, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.10", 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], style: "style", styleClass: "styleClass", prevButtonProps: "prevButtonProps", nextButtonProps: "nextButtonProps" }, outputs: { onPage: "onPage" }, 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 [attr.id]="id" [ngClass]="{ 'p-carousel p-component': true, 'p-carousel-vertical': isVertical(), 'p-carousel-horizontal': !isVertical() }" [ngStyle]="style" [class]="styleClass" role="region">
-            <div class="p-carousel-header" *ngIf="headerFacet || headerTemplate">
-                <ng-content select="p-header"></ng-content>
-                <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
-            </div>
-            <div [class]="contentClass" [ngClass]="'p-carousel-content-container'">
-                <div class="p-carousel-content" [attr.aria-live]="allowAutoplay ? 'polite' : 'off'">
-                    <p-button
-                        *ngIf="showNavigators"
-                        [ngClass]="{ 'p-carousel-prev-button': true, 'p-disabled': isBackwardNavDisabled() }"
-                        [disabled]="isBackwardNavDisabled()"
-                        [attr.aria-label]="ariaPrevButtonLabel()"
-                        (click)="navBackward($event)"
-                        [text]="true"
-                        [buttonProps]="prevButtonProps"
-                    >
-                        <ng-template #icon>
-                            <ng-container *ngIf="!previousIconTemplate && !_previousIconTemplate && !prevButtonProps?.icon">
-                                <ChevronLeftIcon *ngIf="!isVertical()" [styleClass]="'carousel-prev-icon'" />
-                                <ChevronUpIcon *ngIf="isVertical()" [styleClass]="'carousel-prev-icon'" />
-                            </ng-container>
-                            <span *ngIf="(previousIconTemplate || _previousIconTemplate) && !prevButtonProps?.icon" class="p-carousel-prev-icon">
-                                <ng-template *ngTemplateOutlet="previousIconTemplate || _previousIconTemplate"></ng-template>
-                            </span>
-                        </ng-template>
-                    </p-button>
-                    <div class="p-carousel-viewport" [ngStyle]="{ height: isVertical() ? verticalViewPortHeight : 'auto' }" (touchend)="onTouchEnd($event)" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)">
-                        <div #itemsContainer class="p-carousel-item-list" (transitionend)="onTransitionEnd()">
-                            <div
-                                *ngFor="let item of clonedItemsForStarting; let index = index"
-                                [ngClass]="{
-                                    'p-carousel-item p-carousel-item-clone': true,
-                                    'p-carousel-item-active': totalShiftedItems * -1 === value.length,
-                                    'p-carousel-item-start': 0 === index,
-                                    'p-carousel-item-end': clonedItemsForStarting.length - 1 === index
-                                }"
-                                [attr.aria-hidden]="!(totalShiftedItems * -1 === value.length)"
-                                [attr.aria-label]="ariaSlideNumber(index)"
-                                [attr.aria-roledescription]="ariaSlideLabel()"
-                            >
-                                <ng-container *ngTemplateOutlet="itemTemplate || _itemTemplate; context: { $implicit: item }"></ng-container>
-                            </div>
-                            <div
-                                *ngFor="let item of value; let index = index"
-                                [ngClass]="{
-                                    'p-carousel-item': true,
-                                    'p-carousel-item-active': firstIndex() <= index && lastIndex() >= index,
-                                    'p-carousel-item-start': firstIndex() === index,
-                                    'p-carousel-item-end': lastIndex() === index
-                                }"
-                                [attr.aria-hidden]="!(firstIndex() <= index && lastIndex() >= index)"
-                                [attr.aria-label]="ariaSlideNumber(index)"
-                                [attr.aria-roledescription]="ariaSlideLabel()"
-                            >
-                                <ng-container *ngTemplateOutlet="itemTemplate || _itemTemplate; context: { $implicit: item }"></ng-container>
-                            </div>
-                            <div
-                                *ngFor="let item of clonedItemsForFinishing; let index = index"
-                                [ngClass]="{
-                                    'p-carousel-item p-carousel-item-clone': true,
-                                    'p-carousel-item-active': totalShiftedItems * -1 === numVisible,
-                                    'p-carousel-item-start': 0 === index,
-                                    'p-carousel-item-end': clonedItemsForFinishing.length - 1 === index
-                                }"
-                            >
-                                <ng-container *ngTemplateOutlet="itemTemplate || _itemTemplate; context: { $implicit: item }"></ng-container>
-                            </div>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", 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.0.6", 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">
+            <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">
+                    <ng-template #icon>
+                        <ng-container *ngIf="!previousIconTemplate && !_previousIconTemplate && !prevButtonProps?.icon">
+                            <ChevronLeftIcon *ngIf="!isVertical()" />
+                            <ChevronUpIcon *ngIf="isVertical()" />
+                        </ng-container>
+                        <span *ngIf="(previousIconTemplate || _previousIconTemplate) && !prevButtonProps?.icon">
+                            <ng-template *ngTemplateOutlet="previousIconTemplate || _previousIconTemplate"></ng-template>
+                        </span>
+                    </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
+                            *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()"
+                        >
+                            <ng-container *ngTemplateOutlet="itemTemplate || _itemTemplate; context: { $implicit: item }"></ng-container>
+                        </div>
+                        <div
+                            *ngFor="let item of value; let index = index"
+                            [class]="cx('item', { index })"
+                            [attr.aria-hidden]="!(firstIndex() <= index && lastIndex() >= index)"
+                            [attr.aria-label]="ariaSlideNumber(index)"
+                            [attr.aria-roledescription]="ariaSlideLabel()"
+                        >
+                            <ng-container *ngTemplateOutlet="itemTemplate || _itemTemplate; context: { $implicit: item }"></ng-container>
+                        </div>
+                        <div *ngFor="let item of clonedItemsForFinishing; let index = index" [class]="cx('itemClone', { index })">
+                            <ng-container *ngTemplateOutlet="itemTemplate || _itemTemplate; context: { $implicit: item }"></ng-container>
                         </div>
                     </div>
-                    <p-button
-                        type="button"
-                        *ngIf="showNavigators"
-                        [ngClass]="{ 'p-carousel-next-button': true, 'p-disabled': isForwardNavDisabled() }"
-                        [disabled]="isForwardNavDisabled()"
-                        (click)="navForward($event)"
-                        [attr.aria-label]="ariaNextButtonLabel()"
-                        [buttonProps]="nextButtonProps"
-                        [text]="true"
-                    >
-                        <ng-template #icon>
-                            <ng-container *ngIf="!nextIconTemplate && !_nextIconTemplate && !nextButtonProps?.icon">
-                                <ChevronRightIcon *ngIf="!isVertical()" [styleClass]="'carousel-next-icon'" />
-                                <ChevronDownIcon *ngIf="isVertical()" [styleClass]="'carousel-next-icon'" />
-                            </ng-container>
-                            <span *ngIf="nextIconTemplate || (_nextIconTemplate && !nextButtonProps?.icon)" class="next">
-                                <ng-template *ngTemplateOutlet="nextIconTemplate || _nextIconTemplate"></ng-template>
-                            </span>
-                        </ng-template>
-                    </p-button>
                 </div>
-                <ul #indicatorContent [ngClass]="'p-carousel-indicator-list'" [class]="indicatorsContentClass" [ngStyle]="indicatorsContentStyle" *ngIf="showIndicators" (keydown)="onIndicatorKeydown($event)">
-                    <li *ngFor="let totalDot of totalDotsArray(); let i = index" [ngClass]="{ 'p-carousel-indicator': true, 'p-carousel-indicator-active': _page === i }" [attr.data-pc-section]="'indicator'">
-                        <button
-                            type="button"
-                            [ngClass]="'p-carousel-indicator-button'"
-                            (click)="onDotClick($event, i)"
-                            [class]="indicatorStyleClass"
-                            [ngStyle]="indicatorStyle"
-                            [attr.aria-label]="ariaPageLabel(i + 1)"
-                            [attr.aria-current]="_page === i ? 'page' : undefined"
-                            [tabindex]="_page === i ? 0 : -1"
-                        ></button>
-                    </li>
-                </ul>
-            </div>
-            <div class="p-carousel-footer" *ngIf="footerFacet || footerTemplate || _footerTemplate">
-                <ng-content select="p-footer"></ng-content>
-                <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
+                <p-button type="button" *ngIf="showNavigators" [class]="cx('pcNextButton')" (click)="navForward($event)" [attr.aria-label]="ariaNextButtonLabel()" [buttonProps]="nextButtonProps" [text]="true">
+                    <ng-template #icon>
+                        <ng-container *ngIf="!nextIconTemplate && !_nextIconTemplate && !nextButtonProps?.icon">
+                            <ChevronRightIcon *ngIf="!isVertical()" />
+                            <ChevronDownIcon *ngIf="isVertical()" />
+                        </ng-container>
+                        <span *ngIf="nextIconTemplate || (_nextIconTemplate && !nextButtonProps?.icon)">
+                            <ng-template *ngTemplateOutlet="nextIconTemplate || _nextIconTemplate"></ng-template>
+                        </span>
+                    </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'">
+                    <button
+                        type="button"
+                        [class]="cx('indicatorButton')"
+                        (click)="onDotClick($event, i)"
+                        [ngStyle]="indicatorStyle"
+                        [attr.aria-label]="ariaPageLabel(i + 1)"
+                        [attr.aria-current]="_page === i ? 'page' : undefined"
+                        [tabindex]="_page === i ? 0 : -1"
+                    ></button>
+                </li>
+            </ul>
+        </div>
+        <div [class]="cx('footer')" *ngIf="footerFacet || footerTemplate || _footerTemplate">
+            <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: "ChevronRightIcon" }, { 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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ChevronLeftIcon, selector: "ChevronLeftIcon" }, { kind: "component", type: ChevronDownIcon, selector: "ChevronDownIcon" }, { kind: "component", type: ChevronUpIcon, selector: "ChevronUpIcon" }, { 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: Carousel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Carousel, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-carousel',
                     standalone: true,
                     imports: [CommonModule, ChevronRightIcon, ButtonModule, ChevronLeftIcon, ChevronDownIcon, ChevronUpIcon, SharedModule],
                     template: `
-        <div [attr.id]="id" [ngClass]="{ 'p-carousel p-component': true, 'p-carousel-vertical': isVertical(), 'p-carousel-horizontal': !isVertical() }" [ngStyle]="style" [class]="styleClass" role="region">
-            <div class="p-carousel-header" *ngIf="headerFacet || headerTemplate">
-                <ng-content select="p-header"></ng-content>
-                <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
-            </div>
-            <div [class]="contentClass" [ngClass]="'p-carousel-content-container'">
-                <div class="p-carousel-content" [attr.aria-live]="allowAutoplay ? 'polite' : 'off'">
-                    <p-button
-                        *ngIf="showNavigators"
-                        [ngClass]="{ 'p-carousel-prev-button': true, 'p-disabled': isBackwardNavDisabled() }"
-                        [disabled]="isBackwardNavDisabled()"
-                        [attr.aria-label]="ariaPrevButtonLabel()"
-                        (click)="navBackward($event)"
-                        [text]="true"
-                        [buttonProps]="prevButtonProps"
-                    >
-                        <ng-template #icon>
-                            <ng-container *ngIf="!previousIconTemplate && !_previousIconTemplate && !prevButtonProps?.icon">
-                                <ChevronLeftIcon *ngIf="!isVertical()" [styleClass]="'carousel-prev-icon'" />
-                                <ChevronUpIcon *ngIf="isVertical()" [styleClass]="'carousel-prev-icon'" />
-                            </ng-container>
-                            <span *ngIf="(previousIconTemplate || _previousIconTemplate) && !prevButtonProps?.icon" class="p-carousel-prev-icon">
-                                <ng-template *ngTemplateOutlet="previousIconTemplate || _previousIconTemplate"></ng-template>
-                            </span>
-                        </ng-template>
-                    </p-button>
-                    <div class="p-carousel-viewport" [ngStyle]="{ height: isVertical() ? verticalViewPortHeight : 'auto' }" (touchend)="onTouchEnd($event)" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)">
-                        <div #itemsContainer class="p-carousel-item-list" (transitionend)="onTransitionEnd()">
-                            <div
-                                *ngFor="let item of clonedItemsForStarting; let index = index"
-                                [ngClass]="{
-                                    'p-carousel-item p-carousel-item-clone': true,
-                                    'p-carousel-item-active': totalShiftedItems * -1 === value.length,
-                                    'p-carousel-item-start': 0 === index,
-                                    'p-carousel-item-end': clonedItemsForStarting.length - 1 === index
-                                }"
-                                [attr.aria-hidden]="!(totalShiftedItems * -1 === value.length)"
-                                [attr.aria-label]="ariaSlideNumber(index)"
-                                [attr.aria-roledescription]="ariaSlideLabel()"
-                            >
-                                <ng-container *ngTemplateOutlet="itemTemplate || _itemTemplate; context: { $implicit: item }"></ng-container>
-                            </div>
-                            <div
-                                *ngFor="let item of value; let index = index"
-                                [ngClass]="{
-                                    'p-carousel-item': true,
-                                    'p-carousel-item-active': firstIndex() <= index && lastIndex() >= index,
-                                    'p-carousel-item-start': firstIndex() === index,
-                                    'p-carousel-item-end': lastIndex() === index
-                                }"
-                                [attr.aria-hidden]="!(firstIndex() <= index && lastIndex() >= index)"
-                                [attr.aria-label]="ariaSlideNumber(index)"
-                                [attr.aria-roledescription]="ariaSlideLabel()"
-                            >
-                                <ng-container *ngTemplateOutlet="itemTemplate || _itemTemplate; context: { $implicit: item }"></ng-container>
-                            </div>
-                            <div
-                                *ngFor="let item of clonedItemsForFinishing; let index = index"
-                                [ngClass]="{
-                                    'p-carousel-item p-carousel-item-clone': true,
-                                    'p-carousel-item-active': totalShiftedItems * -1 === numVisible,
-                                    'p-carousel-item-start': 0 === index,
-                                    'p-carousel-item-end': clonedItemsForFinishing.length - 1 === index
-                                }"
-                            >
-                                <ng-container *ngTemplateOutlet="itemTemplate || _itemTemplate; context: { $implicit: item }"></ng-container>
-                            </div>
+        <div [class]="cx('header')" *ngIf="headerFacet || headerTemplate">
+            <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">
+                    <ng-template #icon>
+                        <ng-container *ngIf="!previousIconTemplate && !_previousIconTemplate && !prevButtonProps?.icon">
+                            <ChevronLeftIcon *ngIf="!isVertical()" />
+                            <ChevronUpIcon *ngIf="isVertical()" />
+                        </ng-container>
+                        <span *ngIf="(previousIconTemplate || _previousIconTemplate) && !prevButtonProps?.icon">
+                            <ng-template *ngTemplateOutlet="previousIconTemplate || _previousIconTemplate"></ng-template>
+                        </span>
+                    </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
+                            *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()"
+                        >
+                            <ng-container *ngTemplateOutlet="itemTemplate || _itemTemplate; context: { $implicit: item }"></ng-container>
+                        </div>
+                        <div
+                            *ngFor="let item of value; let index = index"
+                            [class]="cx('item', { index })"
+                            [attr.aria-hidden]="!(firstIndex() <= index && lastIndex() >= index)"
+                            [attr.aria-label]="ariaSlideNumber(index)"
+                            [attr.aria-roledescription]="ariaSlideLabel()"
+                        >
+                            <ng-container *ngTemplateOutlet="itemTemplate || _itemTemplate; context: { $implicit: item }"></ng-container>
+                        </div>
+                        <div *ngFor="let item of clonedItemsForFinishing; let index = index" [class]="cx('itemClone', { index })">
+                            <ng-container *ngTemplateOutlet="itemTemplate || _itemTemplate; context: { $implicit: item }"></ng-container>
                         </div>
                     </div>
-                    <p-button
-                        type="button"
-                        *ngIf="showNavigators"
-                        [ngClass]="{ 'p-carousel-next-button': true, 'p-disabled': isForwardNavDisabled() }"
-                        [disabled]="isForwardNavDisabled()"
-                        (click)="navForward($event)"
-                        [attr.aria-label]="ariaNextButtonLabel()"
-                        [buttonProps]="nextButtonProps"
-                        [text]="true"
-                    >
-                        <ng-template #icon>
-                            <ng-container *ngIf="!nextIconTemplate && !_nextIconTemplate && !nextButtonProps?.icon">
-                                <ChevronRightIcon *ngIf="!isVertical()" [styleClass]="'carousel-next-icon'" />
-                                <ChevronDownIcon *ngIf="isVertical()" [styleClass]="'carousel-next-icon'" />
-                            </ng-container>
-                            <span *ngIf="nextIconTemplate || (_nextIconTemplate && !nextButtonProps?.icon)" class="next">
-                                <ng-template *ngTemplateOutlet="nextIconTemplate || _nextIconTemplate"></ng-template>
-                            </span>
-                        </ng-template>
-                    </p-button>
                 </div>
-                <ul #indicatorContent [ngClass]="'p-carousel-indicator-list'" [class]="indicatorsContentClass" [ngStyle]="indicatorsContentStyle" *ngIf="showIndicators" (keydown)="onIndicatorKeydown($event)">
-                    <li *ngFor="let totalDot of totalDotsArray(); let i = index" [ngClass]="{ 'p-carousel-indicator': true, 'p-carousel-indicator-active': _page === i }" [attr.data-pc-section]="'indicator'">
-                        <button
-                            type="button"
-                            [ngClass]="'p-carousel-indicator-button'"
-                            (click)="onDotClick($event, i)"
-                            [class]="indicatorStyleClass"
-                            [ngStyle]="indicatorStyle"
-                            [attr.aria-label]="ariaPageLabel(i + 1)"
-                            [attr.aria-current]="_page === i ? 'page' : undefined"
-                            [tabindex]="_page === i ? 0 : -1"
-                        ></button>
-                    </li>
-                </ul>
-            </div>
-            <div class="p-carousel-footer" *ngIf="footerFacet || footerTemplate || _footerTemplate">
-                <ng-content select="p-footer"></ng-content>
-                <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
+                <p-button type="button" *ngIf="showNavigators" [class]="cx('pcNextButton')" (click)="navForward($event)" [attr.aria-label]="ariaNextButtonLabel()" [buttonProps]="nextButtonProps" [text]="true">
+                    <ng-template #icon>
+                        <ng-container *ngIf="!nextIconTemplate && !_nextIconTemplate && !nextButtonProps?.icon">
+                            <ChevronRightIcon *ngIf="!isVertical()" />
+                            <ChevronDownIcon *ngIf="isVertical()" />
+                        </ng-container>
+                        <span *ngIf="nextIconTemplate || (_nextIconTemplate && !nextButtonProps?.icon)">
+                            <ng-template *ngTemplateOutlet="nextIconTemplate || _nextIconTemplate"></ng-template>
+                        </span>
+                    </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'">
+                    <button
+                        type="button"
+                        [class]="cx('indicatorButton')"
+                        (click)="onDotClick($event, i)"
+                        [ngStyle]="indicatorStyle"
+                        [attr.aria-label]="ariaPageLabel(i + 1)"
+                        [attr.aria-current]="_page === i ? 'page' : undefined"
+                        [tabindex]="_page === i ? 0 : -1"
+                    ></button>
+                </li>
+            </ul>
+        </div>
+        <div [class]="cx('footer')" *ngIf="footerFacet || footerTemplate || _footerTemplate">
+            <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],
+                    host: {
+                        '[attr.id]': 'id',
+                        '[attr.role]': "'region'",
+                        '[class]': "cn(cx('root'), styleClass)"
+                    }
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { page: [{
                 type: Input
@@ -1215,8 +1040,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             }], autoplayInterval: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
-            }], style: [{
-                type: Input
             }], styleClass: [{
                 type: Input
             }], prevButtonProps: [{
@@ -1257,11 +1080,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 args: [PrimeTemplate]
             }] } });
 class CarouselModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: CarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: CarouselModule, imports: [Carousel, SharedModule], exports: [Carousel, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: CarouselModule, imports: [Carousel, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: CarouselModule, imports: [Carousel, SharedModule], exports: [Carousel, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CarouselModule, imports: [Carousel, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: CarouselModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CarouselModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Carousel, SharedModule],