primenglab 22.0.0-beta.1

package/fesm2022/primenglab-carousel.mjs

@@ -0,0 +1,2052 @@
+export * from 'primenglab/types/carousel';
+import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, InjectionToken, inject, computed, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component, input, Directive, numberAttribute, booleanAttribute, output, viewChild, contentChild, signal, effect, untracked, contentChildren, NgModule } from '@angular/core';
+import { Header, Footer, SharedModule } from 'primenglab/api';
+import { BaseComponent, PARENT_INSTANCE } from 'primenglab/basecomponent';
+import * as i1 from 'primenglab/bind';
+import { Bind, BindModule } from 'primenglab/bind';
+import { ButtonDirective } from 'primenglab/button';
+import { ChevronDown } from '@primeicons/angular/chevron-down';
+import { ChevronLeft } from '@primeicons/angular/chevron-left';
+import { ChevronRight } from '@primeicons/angular/chevron-right';
+import { ChevronUp } from '@primeicons/angular/chevron-up';
+import { style } from '@primeuix/styles/carousel';
+import { BaseStyle } from 'primenglab/base';
+import { uuid, setAttribute, find, getAttribute, findSingle, removeClass, addClass } from '@primeuix/utils';
+
+const classes = {
+    root: ({ instance }) => [
+        'p-carousel p-component',
+        {
+            'p-carousel-vertical': instance.isVertical(),
+            'p-carousel-horizontal': !instance.isVertical()
+        }
+    ],
+    header: 'p-carousel-header',
+    contentContainer: 'p-carousel-content-container',
+    content: 'p-carousel-content',
+    pcPrevButton: ({ instance }) => [
+        'p-carousel-prev-button',
+        {
+            'p-disabled': instance.isBackwardNavDisabled()
+        }
+    ],
+    viewport: 'p-carousel-viewport',
+    itemList: 'p-carousel-item-list',
+    itemClone: ({ instance, index }) => [
+        'p-carousel-item p-carousel-item-clone',
+        {
+            '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 }) => [
+        'p-carousel-item',
+        {
+            'p-carousel-item-active': instance.firstIndex() <= index && instance.lastIndex() >= index,
+            'p-carousel-item-start': instance.firstIndex() === index,
+            'p-carousel-item-end': instance.lastIndex() === index
+        }
+    ],
+    pcNextButton: ({ instance }) => [
+        'p-carousel-next-button',
+        {
+            'p-disabled': instance.isForwardNavDisabled()
+        }
+    ],
+    indicatorList: ({ instance }) => ['p-carousel-indicator-list', instance.indicatorsContentClass()],
+    indicator: ({ instance, index }) => [
+        'p-carousel-indicator',
+        {
+            'p-carousel-indicator-active': instance._page() === index
+        }
+    ],
+    indicatorButton: ({ instance }) => ['p-carousel-indicator-button', instance.indicatorStyleClass()],
+    footer: 'p-carousel-footer',
+    // Composition mode
+    compositionRoot: 'p-carousel p-component',
+    compositionIndicator: ({ instance, index }) => ['p-carousel-indicator-button', { 'p-carousel-indicator-active': instance.pageState() === index }],
+    compositionContent: ({ instance }) => ['p-carousel-content', instance.orientation() === 'vertical' ? 'p-carousel-content-vertical' : 'p-carousel-content-horizontal'],
+    compositionItem: 'p-carousel-item',
+    compositionPrev: ({ instance }) => [{ 'p-disabled': instance.isPrevDisabled() }],
+    compositionNext: ({ instance }) => [{ 'p-disabled': instance.isNextDisabled() }]
+};
+class CarouselStyle extends BaseStyle {
+    name = 'carousel';
+    style = style;
+    classes = classes;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: CarouselStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: CarouselStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: CarouselStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * Carousel is a content slider featuring various customization options.
+ *
+ * [Live Demo](https://www.primeng.org/carousel/)
+ *
+ * @module carouselstyle
+ *
+ */
+var CarouselClasses;
+(function (CarouselClasses) {
+    /**
+     * Class name of the root element
+     */
+    CarouselClasses["root"] = "p-carousel";
+    /**
+     * Class name of the header element
+     */
+    CarouselClasses["header"] = "p-carousel-header";
+    /**
+     * Class name of the content container element
+     */
+    CarouselClasses["contentContainer"] = "p-carousel-content-container";
+    /**
+     * Class name of the content element
+     */
+    CarouselClasses["content"] = "p-carousel-content";
+    /**
+     * Class name of the previous button element
+     */
+    CarouselClasses["pcPrevButton"] = "p-carousel-prev-button";
+    /**
+     * Class name of the viewport element
+     */
+    CarouselClasses["viewport"] = "p-carousel-viewport";
+    /**
+     * Class name of the item list element
+     */
+    CarouselClasses["itemList"] = "p-carousel-item-list";
+    /**
+     * Class name of the item clone element
+     */
+    CarouselClasses["itemClone"] = "p-carousel-item-clone";
+    /**
+     * Class name of the item element
+     */
+    CarouselClasses["item"] = "p-carousel-item";
+    /**
+     * Class name of the next button element
+     */
+    CarouselClasses["pcNextButton"] = "p-carousel-next-button";
+    /**
+     * Class name of the indicator list element
+     */
+    CarouselClasses["indicatorList"] = "p-carousel-indicator-list";
+    /**
+     * Class name of the indicator element
+     */
+    CarouselClasses["indicator"] = "p-carousel-indicator";
+    /**
+     * Class name of the indicator button element
+     */
+    CarouselClasses["indicatorButton"] = "p-carousel-indicator-button";
+    /**
+     * Class name of the footer element
+     */
+    CarouselClasses["footer"] = "p-carousel-footer";
+})(CarouselClasses || (CarouselClasses = {}));
+
+const CAROUSEL_ROOT = new InjectionToken('CAROUSEL_ROOT');
+
+/**
+ * CarouselContent is the scrollable track element that contains carousel items.
+ * @group Components
+ */
+class CarouselContent extends BaseComponent {
+    componentName = 'CarouselContent';
+    bindDirectiveInstance = inject(Bind, { self: true });
+    root = inject(CAROUSEL_ROOT);
+    isVertical = computed(() => this.root.orientation() === 'vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isVertical" }] : /* istanbul ignore next */ []));
+    flexDirection = computed(() => (this.isVertical() ? 'column' : 'row'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flexDirection" }] : /* istanbul ignore next */ []));
+    overflowX = computed(() => (this.isVertical() ? null : 'scroll'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflowX" }] : /* istanbul ignore next */ []));
+    overflowY = computed(() => (this.isVertical() ? 'scroll' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflowY" }] : /* istanbul ignore next */ []));
+    overscrollX = computed(() => (this.isVertical() ? null : 'contain'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overscrollX" }] : /* istanbul ignore next */ []));
+    overscrollY = computed(() => (this.isVertical() ? 'contain' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overscrollY" }] : /* istanbul ignore next */ []));
+    dataAutosize = computed(() => (this.root.autoSize() ? '' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataAutosize" }] : /* istanbul ignore next */ []));
+    dataSwiping = computed(() => (this.root.swiping() ? '' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataSwiping" }] : /* istanbul ignore next */ []));
+    dataOrientation = computed(() => this.root.orientation(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataOrientation" }] : /* istanbul ignore next */ []));
+    dataAlign = computed(() => this.root.align(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataAlign" }] : /* istanbul ignore next */ []));
+    dataPage = computed(() => this.root.pageState(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataPage" }] : /* istanbul ignore next */ []));
+    slidesPerPage = computed(() => this.root.slidesPerPage(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "slidesPerPage" }] : /* istanbul ignore next */ []));
+    spacingItems = computed(() => this.root.spacing() + 'px', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "spacingItems" }] : /* istanbul ignore next */ []));
+    scrollSnapType = computed(() => this.root.resolveSnapType(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollSnapType" }] : /* istanbul ignore next */ []));
+    onPointerDown(e) {
+        this.root.onContentPointerDown(e);
+    }
+    onPointerMove(e) {
+        this.root.onContentPointerMove(e);
+    }
+    onPointerUp(e) {
+        this.root.onContentPointerUp(e);
+    }
+    onWheel(e) {
+        this.root.onContentWheel(e);
+    }
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    constructor() {
+        super();
+        afterNextRender(() => {
+            this.root.setContentEl(this.$el);
+            this.root.setupObservers();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: CarouselContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.3", type: CarouselContent, isStandalone: true, selector: "p-carousel-content", host: { listeners: { "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp($event)", "wheel": "onWheel($event)" }, properties: { "class": "root.cx('compositionContent')", "attr.data-scope": "'carousel'", "attr.data-part": "'content'", "attr.data-orientation": "dataOrientation()", "attr.data-align": "dataAlign()", "attr.data-page": "dataPage()", "attr.data-autosize": "dataAutosize()", "attr.data-swiping": "dataSwiping()", "style.display": "'flex'", "style.flex-direction": "flexDirection()", "style.overflow-x": "overflowX()", "style.overflow-y": "overflowY()", "style.overscroll-behavior-x": "overscrollX()", "style.overscroll-behavior-y": "overscrollY()", "style.gap": "'var(--px-spacing-items)'", "style.scroll-snap-type": "'var(--px-scroll-snap-type)'", "style.scrollbar-width": "'none'", "style.position": "'relative'", "style.--px-slides-per-page": "slidesPerPage()", "style.--px-spacing-items": "spacingItems()", "style.--px-scroll-snap-type": "scrollSnapType()" } }, providers: [CarouselStyle, { provide: PARENT_INSTANCE, useExisting: CarouselContent }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: CarouselContent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-carousel-content',
+                    standalone: true,
+                    imports: [BindModule],
+                    template: `<ng-content></ng-content>`,
+                    providers: [CarouselStyle, { provide: PARENT_INSTANCE, useExisting: CarouselContent }],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class]': "root.cx('compositionContent')",
+                        '[attr.data-scope]': "'carousel'",
+                        '[attr.data-part]': "'content'",
+                        '[attr.data-orientation]': 'dataOrientation()',
+                        '[attr.data-align]': 'dataAlign()',
+                        '[attr.data-page]': 'dataPage()',
+                        '[attr.data-autosize]': 'dataAutosize()',
+                        '[attr.data-swiping]': 'dataSwiping()',
+                        '[style.display]': "'flex'",
+                        '[style.flex-direction]': 'flexDirection()',
+                        '[style.overflow-x]': 'overflowX()',
+                        '[style.overflow-y]': 'overflowY()',
+                        '[style.overscroll-behavior-x]': 'overscrollX()',
+                        '[style.overscroll-behavior-y]': 'overscrollY()',
+                        '[style.gap]': "'var(--px-spacing-items)'",
+                        '[style.scroll-snap-type]': "'var(--px-scroll-snap-type)'",
+                        '[style.scrollbar-width]': "'none'",
+                        '[style.position]': "'relative'",
+                        '[style.--px-slides-per-page]': 'slidesPerPage()',
+                        '[style.--px-spacing-items]': 'spacingItems()',
+                        '[style.--px-scroll-snap-type]': 'scrollSnapType()',
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(pointermove)': 'onPointerMove($event)',
+                        '(pointerup)': 'onPointerUp($event)',
+                        '(wheel)': 'onWheel($event)'
+                    },
+                    hostDirectives: [Bind]
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * CarouselItem represents an individual item in the composition-based carousel.
+ * @group Components
+ */
+class CarouselItem extends BaseComponent {
+    componentName = 'CarouselItem';
+    bindDirectiveInstance = inject(Bind, { self: true });
+    /**
+     * The value/identifier of the carousel item.
+     * @group Props
+     */
+    value = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    root = inject(CAROUSEL_ROOT);
+    dataOrientation = computed(() => this.root.orientation(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataOrientation" }] : /* istanbul ignore next */ []));
+    dataAlign = computed(() => this.root.align(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataAlign" }] : /* istanbul ignore next */ []));
+    dataPage = computed(() => this.root.pageState(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataPage" }] : /* istanbul ignore next */ []));
+    dataSwiping = computed(() => (this.root.swiping() ? '' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataSwiping" }] : /* istanbul ignore next */ []));
+    dataAutosize = computed(() => (this.root.autoSize() ? '' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataAutosize" }] : /* istanbul ignore next */ []));
+    flexBasis = computed(() => (this.root.autoSize() ? 'auto' : 'calc(100% / var(--px-slides-per-page) - var(--px-spacing-items) * (var(--px-slides-per-page) - 1) / var(--px-slides-per-page))'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flexBasis" }] : /* istanbul ignore next */ []));
+    scrollSnapAlign = computed(() => this.root.align(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollSnapAlign" }] : /* istanbul ignore next */ []));
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: CarouselItem, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: CarouselItem, isStandalone: true, selector: "p-carousel-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "root.cx('compositionItem')", "attr.data-scope": "'carousel'", "attr.data-part": "'item'", "attr.data-item": "''", "attr.data-value": "value()", "attr.data-orientation": "dataOrientation()", "attr.data-align": "dataAlign()", "attr.data-page": "dataPage()", "attr.data-swiping": "dataSwiping()", "attr.data-autosize": "dataAutosize()", "style.flex-grow": "0", "style.flex-shrink": "0", "style.min-width": "0", "style.flex-basis": "flexBasis()", "style.scroll-snap-align": "scrollSnapAlign()" } }, providers: [CarouselStyle, { provide: PARENT_INSTANCE, useExisting: CarouselItem }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: CarouselItem, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-carousel-item',
+                    standalone: true,
+                    imports: [BindModule],
+                    template: `<ng-content></ng-content>`,
+                    providers: [CarouselStyle, { provide: PARENT_INSTANCE, useExisting: CarouselItem }],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class]': "root.cx('compositionItem')",
+                        '[attr.data-scope]': "'carousel'",
+                        '[attr.data-part]': "'item'",
+                        '[attr.data-item]': "''",
+                        '[attr.data-value]': 'value()',
+                        '[attr.data-orientation]': 'dataOrientation()',
+                        '[attr.data-align]': 'dataAlign()',
+                        '[attr.data-page]': 'dataPage()',
+                        '[attr.data-swiping]': 'dataSwiping()',
+                        '[attr.data-autosize]': 'dataAutosize()',
+                        '[style.flex-grow]': '0',
+                        '[style.flex-shrink]': '0',
+                        '[style.min-width]': '0',
+                        '[style.flex-basis]': 'flexBasis()',
+                        '[style.scroll-snap-align]': 'scrollSnapAlign()'
+                    },
+                    hostDirectives: [Bind]
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
+
+/**
+ * CarouselNext is a directive for the next navigation button.
+ * @group Directives
+ */
+class CarouselNext extends BaseComponent {
+    componentName = 'CarouselNext';
+    root = inject(CAROUSEL_ROOT);
+    _componentStyle = inject(CarouselStyle);
+    hostClass = computed(() => this.root.cx('compositionNext'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
+    dataOrientation = computed(() => this.root.orientation(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataOrientation" }] : /* istanbul ignore next */ []));
+    dataAlign = computed(() => this.root.align(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataAlign" }] : /* istanbul ignore next */ []));
+    dataPage = computed(() => this.root.pageState(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataPage" }] : /* istanbul ignore next */ []));
+    dataDisabled = computed(() => this.root.isNextDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataDisabled" }] : /* istanbul ignore next */ []));
+    dataSwiping = computed(() => (this.root.swiping() ? '' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataSwiping" }] : /* istanbul ignore next */ []));
+    attrDisabled = computed(() => (this.root.isNextDisabled() ? true : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "attrDisabled" }] : /* istanbul ignore next */ []));
+    onClick() {
+        this.root.next();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: CarouselNext, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.3", type: CarouselNext, isStandalone: true, selector: "[pCarouselNext]", host: { listeners: { "click": "onClick()" }, properties: { "class": "hostClass()", "attr.data-scope": "'carousel'", "attr.data-part": "'next'", "attr.data-orientation": "dataOrientation()", "attr.data-align": "dataAlign()", "attr.data-page": "dataPage()", "attr.data-disabled": "dataDisabled()", "attr.data-swiping": "dataSwiping()", "attr.disabled": "attrDisabled()" } }, providers: [CarouselStyle, { provide: PARENT_INSTANCE, useExisting: CarouselNext }], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: CarouselNext, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[pCarouselNext]',
+                    standalone: true,
+                    providers: [CarouselStyle, { provide: PARENT_INSTANCE, useExisting: CarouselNext }],
+                    host: {
+                        '[class]': 'hostClass()',
+                        '[attr.data-scope]': "'carousel'",
+                        '[attr.data-part]': "'next'",
+                        '[attr.data-orientation]': 'dataOrientation()',
+                        '[attr.data-align]': 'dataAlign()',
+                        '[attr.data-page]': 'dataPage()',
+                        '[attr.data-disabled]': 'dataDisabled()',
+                        '[attr.data-swiping]': 'dataSwiping()',
+                        '[attr.disabled]': 'attrDisabled()',
+                        '(click)': 'onClick()'
+                    }
+                }]
+        }] });
+
+/**
+ * CarouselPrev is a directive for the previous navigation button.
+ * @group Directives
+ */
+class CarouselPrev extends BaseComponent {
+    componentName = 'CarouselPrev';
+    root = inject(CAROUSEL_ROOT);
+    _componentStyle = inject(CarouselStyle);
+    hostClass = computed(() => this.root.cx('compositionPrev'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
+    dataOrientation = computed(() => this.root.orientation(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataOrientation" }] : /* istanbul ignore next */ []));
+    dataAlign = computed(() => this.root.align(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataAlign" }] : /* istanbul ignore next */ []));
+    dataPage = computed(() => this.root.pageState(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataPage" }] : /* istanbul ignore next */ []));
+    dataDisabled = computed(() => this.root.isPrevDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataDisabled" }] : /* istanbul ignore next */ []));
+    dataSwiping = computed(() => (this.root.swiping() ? '' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataSwiping" }] : /* istanbul ignore next */ []));
+    attrDisabled = computed(() => (this.root.isPrevDisabled() ? true : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "attrDisabled" }] : /* istanbul ignore next */ []));
+    onClick() {
+        this.root.prev();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: CarouselPrev, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.3", type: CarouselPrev, isStandalone: true, selector: "[pCarouselPrev]", host: { listeners: { "click": "onClick()" }, properties: { "class": "hostClass()", "attr.data-scope": "'carousel'", "attr.data-part": "'prev'", "attr.data-orientation": "dataOrientation()", "attr.data-align": "dataAlign()", "attr.data-page": "dataPage()", "attr.data-disabled": "dataDisabled()", "attr.data-swiping": "dataSwiping()", "attr.disabled": "attrDisabled()" } }, providers: [CarouselStyle, { provide: PARENT_INSTANCE, useExisting: CarouselPrev }], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: CarouselPrev, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[pCarouselPrev]',
+                    standalone: true,
+                    providers: [CarouselStyle, { provide: PARENT_INSTANCE, useExisting: CarouselPrev }],
+                    host: {
+                        '[class]': 'hostClass()',
+                        '[attr.data-scope]': "'carousel'",
+                        '[attr.data-part]': "'prev'",
+                        '[attr.data-orientation]': 'dataOrientation()',
+                        '[attr.data-align]': 'dataAlign()',
+                        '[attr.data-page]': 'dataPage()',
+                        '[attr.data-disabled]': 'dataDisabled()',
+                        '[attr.data-swiping]': 'dataSwiping()',
+                        '[attr.disabled]': 'attrDisabled()',
+                        '(click)': 'onClick()'
+                    }
+                }]
+        }] });
+
+/**
+ * CarouselIndicator is a directive for an individual page indicator button.
+ * @group Directives
+ */
+class CarouselIndicator extends BaseComponent {
+    componentName = 'CarouselIndicator';
+    /**
+     * The page index this indicator represents.
+     * @group Props
+     */
+    page = input(0, { ...(ngDevMode ? { debugName: "page" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    root = inject(CAROUSEL_ROOT);
+    bindDirectiveInstance = inject(Bind, { self: true });
+    _componentStyle = inject(CarouselStyle);
+    isActive = computed(() => this.root.pageState() === this.page(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+    hostClass = computed(() => this.root.cx('compositionIndicator', { index: this.page() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
+    dataOrientation = computed(() => this.root.orientation(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataOrientation" }] : /* istanbul ignore next */ []));
+    dataAlign = computed(() => this.root.align(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataAlign" }] : /* istanbul ignore next */ []));
+    dataPage = computed(() => this.root.pageState(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataPage" }] : /* istanbul ignore next */ []));
+    dataActive = computed(() => (this.isActive() ? '' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataActive" }] : /* istanbul ignore next */ []));
+    dataSwiping = computed(() => (this.root.swiping() ? '' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataSwiping" }] : /* istanbul ignore next */ []));
+    onClick() {
+        this.root.scrollToPage(this.page());
+    }
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: CarouselIndicator, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.3", type: CarouselIndicator, isStandalone: true, selector: "[pCarouselIndicator]", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()" }, properties: { "class": "hostClass()", "attr.data-scope": "'carousel'", "attr.data-part": "'indicator'", "attr.data-orientation": "dataOrientation()", "attr.data-align": "dataAlign()", "attr.data-page": "dataPage()", "attr.data-active": "dataActive()", "attr.data-swiping": "dataSwiping()" } }, providers: [CarouselStyle, { provide: PARENT_INSTANCE, useExisting: CarouselIndicator }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: CarouselIndicator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[pCarouselIndicator]',
+                    standalone: true,
+                    providers: [CarouselStyle, { provide: PARENT_INSTANCE, useExisting: CarouselIndicator }],
+                    host: {
+                        '[class]': 'hostClass()',
+                        '[attr.data-scope]': "'carousel'",
+                        '[attr.data-part]': "'indicator'",
+                        '[attr.data-orientation]': 'dataOrientation()',
+                        '[attr.data-align]': 'dataAlign()',
+                        '[attr.data-page]': 'dataPage()',
+                        '[attr.data-active]': 'dataActive()',
+                        '[attr.data-swiping]': 'dataSwiping()',
+                        '(click)': 'onClick()'
+                    },
+                    hostDirectives: [Bind]
+                }]
+        }], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }] } });
+
+/**
+ * CarouselIndicators renders the list of page indicators.
+ * Auto-generates button indicators based on snap points.
+ * @group Components
+ */
+class CarouselIndicators extends BaseComponent {
+    componentName = 'CarouselIndicators';
+    bindDirectiveInstance = inject(Bind, { self: true });
+    root = inject(CAROUSEL_ROOT);
+    hostClass = computed(() => this.root.cx('indicatorList'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
+    dataOrientation = computed(() => this.root.orientation(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataOrientation" }] : /* istanbul ignore next */ []));
+    dataAlign = computed(() => this.root.align(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataAlign" }] : /* istanbul ignore next */ []));
+    dataPage = computed(() => this.root.pageState(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataPage" }] : /* istanbul ignore next */ []));
+    dataSwiping = computed(() => (this.root.swiping() ? '' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataSwiping" }] : /* istanbul ignore next */ []));
+    pages = computed(() => {
+        const points = this.root.snapPoints();
+        return Array.from(points).map((_, i) => i);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: CarouselIndicators, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: CarouselIndicators, isStandalone: true, selector: "p-carousel-indicators", host: { properties: { "class": "hostClass()", "attr.data-scope": "'carousel'", "attr.data-part": "'indicators'", "attr.data-orientation": "dataOrientation()", "attr.data-align": "dataAlign()", "attr.data-page": "dataPage()", "attr.data-swiping": "dataSwiping()" } }, providers: [{ provide: PARENT_INSTANCE, useExisting: CarouselIndicators }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+        @for (page of pages(); track page) {
+            <button type="button" pCarouselIndicator [page]="page"></button>
+        }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }, { kind: "directive", type: CarouselIndicator, selector: "[pCarouselIndicator]", inputs: ["page"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: CarouselIndicators, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-carousel-indicators',
+                    standalone: true,
+                    imports: [BindModule, CarouselIndicator],
+                    template: `
+        @for (page of pages(); track page) {
+            <button type="button" pCarouselIndicator [page]="page"></button>
+        }
+    `,
+                    providers: [{ provide: PARENT_INSTANCE, useExisting: CarouselIndicators }],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class]': 'hostClass()',
+                        '[attr.data-scope]': "'carousel'",
+                        '[attr.data-part]': "'indicators'",
+                        '[attr.data-orientation]': 'dataOrientation()',
+                        '[attr.data-align]': 'dataAlign()',
+                        '[attr.data-page]': 'dataPage()',
+                        '[attr.data-swiping]': 'dataSwiping()'
+                    },
+                    hostDirectives: [Bind]
+                }]
+        }] });
+
+/**
+ * Base class containing all legacy (data-driven) carousel logic.
+ * Extended by the Carousel component.
+ * @deprecated Use the composition API of Carousel instead (e.g. p-carousel-content, p-carousel-item).
+ */
+class CarouselLegacyBase extends BaseComponent {
+    /**
+     * Index of the first item.
+     * @defaultValue 0
+     * @group Props
+     */
+    page = input(0, { ...(ngDevMode ? { debugName: "page" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Number of items per page.
+     * @defaultValue 1
+     * @group Props
+     */
+    numVisible = input(1, { ...(ngDevMode ? { debugName: "numVisible" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Number of items to scroll.
+     * @defaultValue 1
+     * @group Props
+     */
+    numScroll = input(1, { ...(ngDevMode ? { debugName: "numScroll" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * An array of options for responsive design.
+     * @see {CarouselResponsiveOptions}
+     * @group Props
+     */
+    responsiveOptions = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "responsiveOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * Specifies the layout of the component.
+     * @group Props
+     */
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /**
+     * Height of the viewport in vertical layout.
+     * @group Props
+     */
+    verticalViewPortHeight = input('300px', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "verticalViewPortHeight" }] : /* istanbul ignore next */ []));
+    /**
+     * Style class of main content.
+     * @group Props
+     */
+    contentClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Style class of the indicator items.
+     * @group Props
+     */
+    indicatorsContentClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indicatorsContentClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Inline style of the indicator items.
+     * @group Props
+     */
+    indicatorsContentStyle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "indicatorsContentStyle" }] : /* istanbul ignore next */ []));
+    /**
+     * Style class of the indicators.
+     * @group Props
+     */
+    indicatorStyleClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indicatorStyleClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Style of the indicators.
+     * @group Props
+     */
+    indicatorStyle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "indicatorStyle" }] : /* istanbul ignore next */ []));
+    /**
+     * An array of objects to display.
+     * @defaultValue null
+     * @group Props
+     */
+    value = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    /**
+     * Defines if scrolling would be infinite.
+     * @group Props
+     */
+    circular = input(false, { ...(ngDevMode ? { debugName: "circular" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether to display indicator container.
+     * @group Props
+     */
+    showIndicators = input(true, { ...(ngDevMode ? { debugName: "showIndicators" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether to display navigation buttons in container.
+     * @group Props
+     */
+    showNavigators = input(true, { ...(ngDevMode ? { debugName: "showNavigators" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Time in milliseconds to scroll items automatically.
+     * @group Props
+     */
+    autoplayInterval = input(0, { ...(ngDevMode ? { debugName: "autoplayInterval" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Configuration object forwarded to the underlying button.
+     * @group Props
+     */
+    prevButtonProps = input({
+        severity: 'secondary',
+        variant: 'text',
+        rounded: true
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "prevButtonProps" }] : /* istanbul ignore next */ []));
+    /**
+     * Configuration object forwarded to the underlying button.
+     * @group Props
+     */
+    nextButtonProps = input({
+        severity: 'secondary',
+        variant: 'text',
+        rounded: true
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nextButtonProps" }] : /* istanbul ignore next */ []));
+    /**
+     * Callback to invoke after scroll.
+     * @param {CarouselPageEvent} event - Custom page event.
+     * @group Emits
+     */
+    onPage = output();
+    itemsContainer = viewChild('itemsContainer', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemsContainer" }] : /* istanbul ignore next */ []));
+    indicatorContent = viewChild('indicatorContent', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indicatorContent" }] : /* istanbul ignore next */ []));
+    headerFacet = contentChild(Header, { ...(ngDevMode ? { debugName: "headerFacet" } : /* istanbul ignore next */ {}), descendants: false });
+    footerFacet = contentChild(Footer, { ...(ngDevMode ? { debugName: "footerFacet" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom item template.
+     * @group Templates
+     */
+    itemTemplate = contentChild('item', { ...(ngDevMode ? { debugName: "itemTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom header template.
+     * @group Templates
+     */
+    headerTemplate = contentChild('header', { ...(ngDevMode ? { debugName: "headerTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom footer template.
+     * @group Templates
+     */
+    footerTemplate = contentChild('footer', { ...(ngDevMode ? { debugName: "footerTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom previous icon template.
+     * @group Templates
+     */
+    previousIconTemplate = contentChild('previousicon', { ...(ngDevMode ? { debugName: "previousIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom next icon template.
+     * @group Templates
+     */
+    nextIconTemplate = contentChild('nexticon', { ...(ngDevMode ? { debugName: "nextIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    _componentStyle = inject(CarouselStyle);
+    _numVisible = 1;
+    _numScroll = 1;
+    _oldNumScroll = 0;
+    prevState = {
+        numScroll: 0,
+        numVisible: 0,
+        value: []
+    };
+    defaultNumScroll = 1;
+    defaultNumVisible = 1;
+    _page = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_page" }] : /* istanbul ignore next */ []));
+    carouselStyle = null;
+    id;
+    totalShiftedItems = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalShiftedItems" }] : /* istanbul ignore next */ []));
+    isRemainingItemsAdded = false;
+    animationTimeout;
+    translateTimeout;
+    remainingItems = 0;
+    startPos = null;
+    documentResizeListener = null;
+    clonedItemsForStarting = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clonedItemsForStarting" }] : /* istanbul ignore next */ []));
+    clonedItemsForFinishing = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clonedItemsForFinishing" }] : /* istanbul ignore next */ []));
+    allowAutoplay = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allowAutoplay" }] : /* istanbul ignore next */ []));
+    interval;
+    isCreated = false;
+    swipeThreshold = 20;
+    window;
+    viewportStyle = computed(() => {
+        return { height: this.isVertical() ? this.verticalViewPortHeight() : 'auto' };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewportStyle" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        this.window = this.document.defaultView;
+        this.totalShiftedItems.set(this.page() * this.numScroll() * -1);
+        // Effect for page changes
+        effect(() => {
+            const pageVal = this.page();
+            untracked(() => {
+                if (this.isCreated && pageVal !== this._page()) {
+                    if (this.autoplayInterval()) {
+                        this.stopAutoplay();
+                    }
+                    if (pageVal > this._page() && pageVal <= this.totalDots() - 1) {
+                        this.step(-1, pageVal);
+                    }
+                    else if (pageVal < this._page()) {
+                        this.step(1, pageVal);
+                    }
+                }
+                this._page.set(pageVal);
+            });
+        });
+        // Effect for value changes
+        effect(() => {
+            const val = this.value();
+            if (isPlatformBrowser(this.platformId)) {
+                if (this.circular() && val) {
+                    this.setCloneItems();
+                }
+            }
+        });
+        // Effect for numVisible/numScroll changes
+        effect(() => {
+            const numVisibleVal = this.numVisible();
+            const numScrollVal = this.numScroll();
+            const responsiveOpts = this.responsiveOptions();
+            untracked(() => {
+                if (this.isCreated) {
+                    if (responsiveOpts) {
+                        this.defaultNumVisible = numVisibleVal;
+                        this.defaultNumScroll = numScrollVal;
+                    }
+                    if (this.isCircular()) {
+                        this.setCloneItems();
+                    }
+                    this.createStyle();
+                    this.calculatePosition();
+                }
+                this._numVisible = numVisibleVal;
+                this._numScroll = numScrollVal;
+            });
+        });
+    }
+    legacyOnAfterContentInit() {
+        this.id = uuid('pn_id_');
+        if (isPlatformBrowser(this.platformId)) {
+            this.allowAutoplay.set(!!this.autoplayInterval());
+            if (this.circular()) {
+                this.setCloneItems();
+            }
+            if (this.responsiveOptions()) {
+                this.defaultNumScroll = this._numScroll;
+                this.defaultNumVisible = this._numVisible;
+            }
+            this.createStyle();
+            this.calculatePosition();
+            if (this.responsiveOptions()) {
+                this.bindDocumentListeners();
+            }
+        }
+    }
+    legacyOnAfterContentChecked() {
+        if (isPlatformBrowser(this.platformId)) {
+            const isCircular = this.isCircular();
+            let totalShiftedItems = this.totalShiftedItems();
+            const val = this.value();
+            if (val && this.itemsContainer() && (this.prevState.numScroll !== this._numScroll || this.prevState.numVisible !== this._numVisible || this.prevState.value.length !== val.length)) {
+                if (this.autoplayInterval()) {
+                    this.stopAutoplay(false);
+                }
+                this.remainingItems = (val.length - this._numVisible) % this._numScroll;
+                let page = this._page();
+                if (this.totalDots() !== 0 && page >= this.totalDots()) {
+                    page = this.totalDots() - 1;
+                    this._page.set(page);
+                    this.onPage.emit({
+                        page: this._page()
+                    });
+                }
+                totalShiftedItems = page * this._numScroll * -1;
+                if (isCircular) {
+                    totalShiftedItems -= this._numVisible;
+                }
+                if (page === this.totalDots() - 1 && this.remainingItems > 0) {
+                    totalShiftedItems += -1 * this.remainingItems + this._numScroll;
+                    this.isRemainingItemsAdded = true;
+                }
+                else {
+                    this.isRemainingItemsAdded = false;
+                }
+                if (totalShiftedItems !== this.totalShiftedItems()) {
+                    this.totalShiftedItems.set(totalShiftedItems);
+                }
+                this._oldNumScroll = this._numScroll;
+                this.prevState.numScroll = this._numScroll;
+                this.prevState.numVisible = this._numVisible;
+                this.prevState.value = [...val];
+                const itemsContainerEl = this.itemsContainer();
+                if (this.totalDots() > 0 && itemsContainerEl?.nativeElement) {
+                    itemsContainerEl.nativeElement.style.transform = this.isVertical() ? `translate3d(0, ${totalShiftedItems * (100 / this._numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this._numVisible)}%, 0, 0)`;
+                }
+                this.isCreated = true;
+                if (this.autoplayInterval() && this.isAutoplay()) {
+                    this.startAutoplay();
+                }
+            }
+            if (isCircular && val) {
+                if (this._page() === 0) {
+                    totalShiftedItems = -1 * this._numVisible;
+                }
+                else if (totalShiftedItems === 0) {
+                    totalShiftedItems = -1 * val.length;
+                    if (this.remainingItems > 0) {
+                        this.isRemainingItemsAdded = true;
+                    }
+                }
+                if (totalShiftedItems !== this.totalShiftedItems()) {
+                    this.totalShiftedItems.set(totalShiftedItems);
+                }
+            }
+        }
+    }
+    createStyle() {
+        if (!this.carouselStyle) {
+            const styleEl = this.renderer.createElement('style');
+            setAttribute(styleEl, 'nonce', this.config?.csp()?.nonce);
+            this.renderer.appendChild(this.document.head, styleEl);
+            this.carouselStyle = styleEl;
+        }
+        let innerHTML = `
+            #${this.id} .p-carousel-item {
+				flex: 1 0 ${100 / this._numVisible}%
+			}
+        `;
+        const responsiveOpts = this.responsiveOptions();
+        if (responsiveOpts && !this.$unstyled()) {
+            responsiveOpts.sort((data1, data2) => {
+                const value1 = data1.breakpoint;
+                const value2 = data2.breakpoint;
+                let result = null;
+                if (value1 == null && value2 != null)
+                    result = -1;
+                else if (value1 != null && value2 == null)
+                    result = 1;
+                else if (value1 == null && value2 == null)
+                    result = 0;
+                else if (typeof value1 === 'string' && typeof value2 === 'string')
+                    result = value1.localeCompare(value2, undefined, { numeric: true });
+                else
+                    result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
+                return -1 * result;
+            });
+            for (let i = 0; i < responsiveOpts.length; i++) {
+                let res = responsiveOpts[i];
+                innerHTML += `
+                    @media screen and (max-width: ${res.breakpoint}) {
+                        #${this.id} .p-carousel-item {
+                            flex: 1 0 ${100 / res.numVisible}%
+                        }
+                    }
+                `;
+            }
+        }
+        this.carouselStyle.innerHTML = innerHTML;
+    }
+    calculatePosition() {
+        const responsiveOpts = this.responsiveOptions();
+        if (responsiveOpts) {
+            let matchedResponsiveData = {
+                numVisible: this.defaultNumVisible,
+                numScroll: this.defaultNumScroll
+            };
+            if (typeof window !== 'undefined') {
+                let windowWidth = window.innerWidth;
+                for (let i = 0; i < responsiveOpts.length; i++) {
+                    let res = responsiveOpts[i];
+                    if (parseInt(res.breakpoint, 10) >= windowWidth) {
+                        matchedResponsiveData = res;
+                    }
+                }
+            }
+            if (this._numScroll !== matchedResponsiveData.numScroll) {
+                let page = this._page();
+                page = Math.floor((page * this._numScroll) / matchedResponsiveData.numScroll);
+                let totalShiftedItems = matchedResponsiveData.numScroll * this._page() * -1;
+                if (this.isCircular()) {
+                    totalShiftedItems -= matchedResponsiveData.numVisible;
+                }
+                this.totalShiftedItems.set(totalShiftedItems);
+                this._numScroll = matchedResponsiveData.numScroll;
+                this._page.set(page);
+                this.onPage.emit({
+                    page: this._page()
+                });
+            }
+            if (this._numVisible !== matchedResponsiveData.numVisible) {
+                this._numVisible = matchedResponsiveData.numVisible;
+                this.setCloneItems();
+            }
+        }
+    }
+    setCloneItems() {
+        const val = this.value();
+        if (this.isCircular() && val) {
+            this.clonedItemsForStarting.set([...val.slice(-1 * this._numVisible)]);
+            this.clonedItemsForFinishing.set([...val.slice(0, this._numVisible)]);
+        }
+        else {
+            this.clonedItemsForStarting.set([]);
+            this.clonedItemsForFinishing.set([]);
+        }
+    }
+    firstIndex() {
+        return this.isCircular() ? -1 * (this.totalShiftedItems() + this._numVisible) : this.totalShiftedItems() * -1;
+    }
+    lastIndex() {
+        return this.firstIndex() + this._numVisible - 1;
+    }
+    totalDots() {
+        const val = this.value();
+        return val?.length ? Math.ceil((val.length - this._numVisible) / this._numScroll) + 1 : 0;
+    }
+    totalDotsArray() {
+        const totalDots = this.totalDots();
+        return totalDots <= 0 ? [] : Array.from({ length: totalDots }, (_, i) => i);
+    }
+    isVertical() {
+        return this.orientation() === 'vertical';
+    }
+    isCircular() {
+        const val = this.value();
+        return this.circular() && val && val.length >= this._numVisible;
+    }
+    isAutoplay() {
+        return this.autoplayInterval() && this.allowAutoplay();
+    }
+    isForwardNavDisabled() {
+        return this.isEmpty() || (this._page() >= this.totalDots() - 1 && !this.isCircular());
+    }
+    isBackwardNavDisabled() {
+        return this.isEmpty() || (this._page() <= 0 && !this.isCircular());
+    }
+    isEmpty() {
+        const val = this.value();
+        return !val || val.length === 0;
+    }
+    // Template helper methods
+    hasHeader() {
+        return !!(this.headerFacet() || this.headerTemplate());
+    }
+    hasFooter() {
+        return !!(this.footerFacet() || this.footerTemplate());
+    }
+    ariaLive() {
+        return this.allowAutoplay() ? 'polite' : 'off';
+    }
+    showDefaultPrevIcon() {
+        return !this.previousIconTemplate();
+    }
+    showPrevIconTemplate() {
+        return !!this.previousIconTemplate();
+    }
+    showDefaultNextIcon() {
+        return !this.nextIconTemplate();
+    }
+    showNextIconTemplate() {
+        return !!this.nextIconTemplate();
+    }
+    // Clone items (starting) helpers
+    isCloneStartAriaHidden() {
+        return !(this.totalShiftedItems() * -1 === this.value()?.length);
+    }
+    isCloneStartActive() {
+        return this.totalShiftedItems() * -1 === (this.value()?.length ?? 0) + this.numVisible();
+    }
+    isCloneStartEnd(index) {
+        const cloned = this.clonedItemsForStarting();
+        return cloned.length > 0 && cloned.length - 1 === index;
+    }
+    // Main items helpers
+    isItemActive(index) {
+        return this.firstIndex() <= index && this.lastIndex() >= index;
+    }
+    isItemAriaHidden(index) {
+        return !this.isItemActive(index);
+    }
+    isItemStart(index) {
+        return this.firstIndex() === index;
+    }
+    isItemEnd(index) {
+        return this.lastIndex() === index;
+    }
+    // Indicator helpers
+    isIndicatorActive(index) {
+        return this._page() === index;
+    }
+    getIndicatorAriaCurrent(index) {
+        return this._page() === index ? 'page' : undefined;
+    }
+    getIndicatorTabindex(index) {
+        return this._page() === index ? 0 : -1;
+    }
+    navForward(e, index) {
+        if (this.isCircular() || this._page() < this.totalDots() - 1) {
+            this.step(-1, index);
+        }
+        if (this.autoplayInterval()) {
+            this.stopAutoplay();
+        }
+        if (e && e.cancelable) {
+            e.preventDefault();
+        }
+    }
+    navBackward(e, index) {
+        if (this.isCircular() || this._page() !== 0) {
+            this.step(1, index);
+        }
+        if (this.autoplayInterval()) {
+            this.stopAutoplay();
+        }
+        if (e && e.cancelable) {
+            e.preventDefault();
+        }
+    }
+    onDotClick(e, index) {
+        let page = this._page();
+        if (this.autoplayInterval()) {
+            this.stopAutoplay();
+        }
+        if (index > page) {
+            this.navForward(e, index);
+        }
+        else if (index < page) {
+            this.navBackward(e, index);
+        }
+    }
+    onIndicatorKeydown(event) {
+        switch (event.code) {
+            case 'ArrowRight':
+                this.onRightKey();
+                break;
+            case 'ArrowLeft':
+                this.onLeftKey();
+                break;
+        }
+    }
+    onRightKey() {
+        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);
+    }
+    onLeftKey() {
+        const activeIndex = this.findFocusedIndicatorIndex();
+        this.changedFocusedIndicator(activeIndex, activeIndex - 1 <= 0 ? 0 : activeIndex - 1);
+    }
+    onHomeKey() {
+        const activeIndex = this.findFocusedIndicatorIndex();
+        this.changedFocusedIndicator(activeIndex, 0);
+    }
+    onEndKey() {
+        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 highlightedIndex = indicators.findIndex((ind) => getAttribute(ind, 'data-p-highlight') === true);
+        const activeIndicator = findSingle(this.indicatorContent()?.nativeElement, '[data-pc-section="indicator"] > button[tabindex="0"]');
+        const activeIndex = indicators.findIndex((ind) => ind === activeIndicator?.parentElement);
+        if (activeIndex >= 0 && highlightedIndex >= 0) {
+            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);
+    }
+    changedFocusedIndicator(prevInd, nextInd) {
+        const indicators = [...find(this.indicatorContent()?.nativeElement, '[data-pc-section="indicator"]')];
+        if (indicators[prevInd] && indicators[nextInd]) {
+            indicators[prevInd].children[0].tabIndex = -1;
+            indicators[nextInd].children[0].tabIndex = 0;
+            indicators[nextInd].children[0].focus();
+        }
+    }
+    step(dir, page) {
+        let totalShiftedItems = this.totalShiftedItems();
+        const isCircular = this.isCircular();
+        const val = this.value();
+        if (page != null) {
+            totalShiftedItems = this._numScroll * page * -1;
+            if (isCircular) {
+                totalShiftedItems -= this._numVisible;
+            }
+            this.isRemainingItemsAdded = false;
+        }
+        else {
+            totalShiftedItems += this._numScroll * dir;
+            if (this.isRemainingItemsAdded) {
+                totalShiftedItems += this.remainingItems - this._numScroll * dir;
+                this.isRemainingItemsAdded = false;
+            }
+            let originalShiftedItems = isCircular ? totalShiftedItems + this._numVisible : totalShiftedItems;
+            page = Math.abs(Math.floor(originalShiftedItems / this._numScroll));
+        }
+        if (isCircular && this._page() === this.totalDots() - 1 && dir === -1 && val) {
+            totalShiftedItems = -1 * (val.length + this._numVisible);
+            page = 0;
+        }
+        else if (isCircular && this._page() === 0 && dir === 1) {
+            totalShiftedItems = 0;
+            page = this.totalDots() - 1;
+        }
+        else if (page === this.totalDots() - 1 && this.remainingItems > 0) {
+            totalShiftedItems += this.remainingItems * -1 - this._numScroll * dir;
+            this.isRemainingItemsAdded = true;
+        }
+        const itemsContainerEl = this.itemsContainer();
+        if (itemsContainerEl) {
+            !this.$unstyled() && removeClass(itemsContainerEl.nativeElement, 'p-items-hidden');
+            itemsContainerEl.nativeElement.style.transform = this.isVertical() ? `translate3d(0, ${totalShiftedItems * (100 / this._numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this._numVisible)}%, 0, 0)`;
+            itemsContainerEl.nativeElement.style.transition = 'transform 500ms ease 0s';
+        }
+        this.totalShiftedItems.set(totalShiftedItems);
+        this._page.set(page);
+        this.onPage.emit({
+            page: this._page()
+        });
+    }
+    startAutoplay() {
+        if (this.interval) {
+            clearInterval(this.interval);
+        }
+        this.interval = setInterval(() => {
+            if (this.totalDots() > 0) {
+                if (this._page() === this.totalDots() - 1) {
+                    this.step(-1, 0);
+                }
+                else {
+                    this.step(-1, this._page() + 1);
+                }
+            }
+        }, this.autoplayInterval());
+        this.allowAutoplay.set(true);
+    }
+    stopAutoplay(changeAllow = true) {
+        if (this.interval) {
+            clearInterval(this.interval);
+            this.interval = undefined;
+            if (changeAllow) {
+                this.allowAutoplay.set(false);
+            }
+        }
+    }
+    isPlaying() {
+        return !!this.interval;
+    }
+    onTransitionEnd() {
+        const itemsContainerEl = this.itemsContainer();
+        if (itemsContainerEl) {
+            !this.$unstyled() && addClass(itemsContainerEl.nativeElement, 'p-items-hidden');
+            itemsContainerEl.nativeElement.style.transition = '';
+            if ((this._page() === 0 || this._page() === this.totalDots() - 1) && this.isCircular()) {
+                itemsContainerEl.nativeElement.style.transform = this.isVertical() ? `translate3d(0, ${this.totalShiftedItems() * (100 / this._numVisible)}%, 0)` : `translate3d(${this.totalShiftedItems() * (100 / this._numVisible)}%, 0, 0)`;
+            }
+        }
+    }
+    onTouchStart(e) {
+        let touchobj = e.changedTouches[0];
+        this.startPos = {
+            x: touchobj.pageX,
+            y: touchobj.pageY
+        };
+    }
+    onTouchMove(e) {
+        if (e.cancelable) {
+            e.preventDefault();
+        }
+    }
+    onTouchEnd(e) {
+        if (!this.startPos)
+            return;
+        const touchobj = e.changedTouches[0];
+        if (this.isVertical()) {
+            this.changePageOnTouch(e, touchobj.pageY - this.startPos.y);
+        }
+        else {
+            this.changePageOnTouch(e, touchobj.pageX - this.startPos.x);
+        }
+    }
+    changePageOnTouch(e, diff) {
+        if (Math.abs(diff) > this.swipeThreshold) {
+            if (diff < 0) {
+                this.navForward(e);
+            }
+            else {
+                this.navBackward(e);
+            }
+        }
+    }
+    ariaPrevButtonLabel() {
+        return this.config.translation.aria ? this.config.translation.aria?.prevPageLabel : undefined;
+    }
+    ariaSlideLabel() {
+        return this.config.translation.aria ? this.config.translation.aria?.slide : undefined;
+    }
+    ariaNextButtonLabel() {
+        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, String(value)) : undefined;
+    }
+    ariaPageLabel(value) {
+        return this.config.translation.aria ? this.config.translation.aria?.pageLabel?.replace(/{page}/g, String(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)) {
+            if (!this.documentResizeListener) {
+                this.documentResizeListener = this.renderer.listen(this.window, 'resize', () => {
+                    this.calculatePosition();
+                });
+            }
+        }
+    }
+    unbindDocumentListeners() {
+        if (isPlatformBrowser(this.platformId)) {
+            if (this.documentResizeListener) {
+                this.documentResizeListener();
+                this.documentResizeListener = null;
+            }
+        }
+    }
+    legacyOnDestroy() {
+        this.unbindDocumentListeners();
+        this.stopAutoplay();
+        if (this.carouselStyle) {
+            this.carouselStyle.remove();
+            this.carouselStyle = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: CarouselLegacyBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.3", type: CarouselLegacyBase, isStandalone: true, inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, numVisible: { classPropertyName: "numVisible", publicName: "numVisible", isSignal: true, isRequired: false, transformFunction: null }, numScroll: { classPropertyName: "numScroll", publicName: "numScroll", isSignal: true, isRequired: false, transformFunction: null }, responsiveOptions: { classPropertyName: "responsiveOptions", publicName: "responsiveOptions", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, verticalViewPortHeight: { classPropertyName: "verticalViewPortHeight", publicName: "verticalViewPortHeight", isSignal: true, isRequired: false, transformFunction: null }, contentClass: { classPropertyName: "contentClass", publicName: "contentClass", isSignal: true, isRequired: false, transformFunction: null }, indicatorsContentClass: { classPropertyName: "indicatorsContentClass", publicName: "indicatorsContentClass", isSignal: true, isRequired: false, transformFunction: null }, indicatorsContentStyle: { classPropertyName: "indicatorsContentStyle", publicName: "indicatorsContentStyle", isSignal: true, isRequired: false, transformFunction: null }, indicatorStyleClass: { classPropertyName: "indicatorStyleClass", publicName: "indicatorStyleClass", isSignal: true, isRequired: false, transformFunction: null }, indicatorStyle: { classPropertyName: "indicatorStyle", publicName: "indicatorStyle", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, circular: { classPropertyName: "circular", publicName: "circular", isSignal: true, isRequired: false, transformFunction: null }, showIndicators: { classPropertyName: "showIndicators", publicName: "showIndicators", isSignal: true, isRequired: false, transformFunction: null }, showNavigators: { classPropertyName: "showNavigators", publicName: "showNavigators", isSignal: true, isRequired: false, transformFunction: null }, autoplayInterval: { classPropertyName: "autoplayInterval", publicName: "autoplayInterval", isSignal: true, isRequired: false, transformFunction: null }, prevButtonProps: { classPropertyName: "prevButtonProps", publicName: "prevButtonProps", isSignal: true, isRequired: false, transformFunction: null }, nextButtonProps: { classPropertyName: "nextButtonProps", publicName: "nextButtonProps", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onPage: "onPage" }, queries: [{ propertyName: "headerFacet", first: true, predicate: Header, isSignal: true }, { propertyName: "footerFacet", first: true, predicate: Footer, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: ["item"], isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], isSignal: true }, { propertyName: "previousIconTemplate", first: true, predicate: ["previousicon"], isSignal: true }, { propertyName: "nextIconTemplate", first: true, predicate: ["nexticon"], isSignal: true }], viewQueries: [{ propertyName: "itemsContainer", first: true, predicate: ["itemsContainer"], descendants: true, isSignal: true }, { propertyName: "indicatorContent", first: true, predicate: ["indicatorContent"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: CarouselLegacyBase, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }], numVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "numVisible", required: false }] }], numScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "numScroll", required: false }] }], responsiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsiveOptions", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], verticalViewPortHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "verticalViewPortHeight", required: false }] }], contentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentClass", required: false }] }], indicatorsContentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorsContentClass", required: false }] }], indicatorsContentStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorsContentStyle", required: false }] }], indicatorStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorStyleClass", required: false }] }], indicatorStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorStyle", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], circular: [{ type: i0.Input, args: [{ isSignal: true, alias: "circular", required: false }] }], showIndicators: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIndicators", required: false }] }], showNavigators: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNavigators", required: false }] }], autoplayInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoplayInterval", required: false }] }], prevButtonProps: [{ type: i0.Input, args: [{ isSignal: true, alias: "prevButtonProps", required: false }] }], nextButtonProps: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextButtonProps", required: false }] }], onPage: [{ type: i0.Output, args: ["onPage"] }], itemsContainer: [{ type: i0.ViewChild, args: ['itemsContainer', { isSignal: true }] }], indicatorContent: [{ type: i0.ViewChild, args: ['indicatorContent', { isSignal: true }] }], headerFacet: [{ type: i0.ContentChild, args: [i0.forwardRef(() => Header), { ...{ descendants: false }, isSignal: true }] }], footerFacet: [{ type: i0.ContentChild, args: [i0.forwardRef(() => Footer), { ...{ descendants: false }, isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: ['item', { ...{ descendants: false }, isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: ['header', { ...{ descendants: false }, isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: ['footer', { ...{ descendants: false }, isSignal: true }] }], previousIconTemplate: [{ type: i0.ContentChild, args: ['previousicon', { ...{ descendants: false }, isSignal: true }] }], nextIconTemplate: [{ type: i0.ContentChild, args: ['nexticon', { ...{ descendants: false }, isSignal: true }] }] } });
+
+/**
+ * Carousel is a content slider featuring various customization options.
+ * @group Components
+ */
+class Carousel extends CarouselLegacyBase {
+    componentName = 'Carousel';
+    bindDirectiveInstance = inject(Bind, { self: true });
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptm('root'));
+    }
+    _compositionContent = contentChildren(CarouselContent, { ...(ngDevMode ? { debugName: "_compositionContent" } : /* istanbul ignore next */ {}), descendants: true });
+    isCompositionMode = computed(() => this._compositionContent().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isCompositionMode" }] : /* istanbul ignore next */ []));
+    hostClass = computed(() => (this.isCompositionMode() ? this.cx('compositionRoot') : this.cx('root')), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Alignment of the carousel items (composition mode).
+     * @group Props
+     * @defaultValue 'start'
+     */
+    align = input('start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    /**
+     * Alias for orientation used by composition mode host bindings.
+     * Delegates to the existing `orientation` input.
+     */
+    compositionOrientation = computed(() => this.orientation(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compositionOrientation" }] : /* istanbul ignore next */ []));
+    /**
+     * Alias for align used by composition mode host bindings.
+     * Delegates to the `align` input.
+     */
+    compositionAlign = computed(() => this.align(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compositionAlign" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the carousel should loop (composition mode).
+     * @group Props
+     * @defaultValue false
+     */
+    loop = input(false, { ...(ngDevMode ? { debugName: "loop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Scroll snap type applied to the track (composition mode).
+     * @group Props
+     * @defaultValue 'mandatory'
+     */
+    snapType = input('mandatory', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "snapType" }] : /* istanbul ignore next */ []));
+    /**
+     * Spacing between carousel items in pixels (composition mode).
+     * @group Props
+     * @defaultValue 16
+     */
+    spacing = input(16, { ...(ngDevMode ? { debugName: "spacing" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Whether the carousel should auto size items (composition mode).
+     * @group Props
+     * @defaultValue false
+     */
+    autoSize = input(false, { ...(ngDevMode ? { debugName: "autoSize" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Alias for autoSize used by composition mode host bindings.
+     */
+    compositionAutoSize = computed(() => this.autoSize(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compositionAutoSize" }] : /* istanbul ignore next */ []));
+    // Host data attributes (composition mode only)
+    dataScope = computed(() => (this.isCompositionMode() ? 'carousel' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataScope" }] : /* istanbul ignore next */ []));
+    dataPart = computed(() => (this.isCompositionMode() ? 'root' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataPart" }] : /* istanbul ignore next */ []));
+    dataOrientation = computed(() => (this.isCompositionMode() ? this.compositionOrientation() : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataOrientation" }] : /* istanbul ignore next */ []));
+    dataAlign = computed(() => (this.isCompositionMode() ? this.compositionAlign() : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataAlign" }] : /* istanbul ignore next */ []));
+    dataPage = computed(() => (this.isCompositionMode() ? this.pageState() : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataPage" }] : /* istanbul ignore next */ []));
+    dataSwiping = computed(() => (this.isCompositionMode() && this.swiping() ? '' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataSwiping" }] : /* istanbul ignore next */ []));
+    dataAutosize = computed(() => (this.isCompositionMode() && this.compositionAutoSize() ? '' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataAutosize" }] : /* istanbul ignore next */ []));
+    /**
+     * How many slides are visible per page (composition mode). Supports fractions (e.g. 1.5).
+     * @group Props
+     * @defaultValue 1
+     */
+    slidesPerPage = input(1, { ...(ngDevMode ? { debugName: "slidesPerPage" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Index of the active slide (composition mode).
+     * @group Props
+     */
+    slide = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "slide" }] : /* istanbul ignore next */ []));
+    /**
+     * Callback fired when the carousel's page changes (composition mode).
+     * @group Emits
+     */
+    onPageChange = output();
+    /**
+     * Callback fired when the active slide changes (composition mode).
+     * @group Emits
+     */
+    onSlideChange = output();
+    // ==========================================
+    // Composition mode signals
+    // ==========================================
+    swiping = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "swiping" }] : /* istanbul ignore next */ []));
+    isNextDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isNextDisabled" }] : /* istanbul ignore next */ []));
+    isPrevDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isPrevDisabled" }] : /* istanbul ignore next */ []));
+    snapPoints = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "snapPoints" }] : /* istanbul ignore next */ []));
+    pageState = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageState" }] : /* istanbul ignore next */ []));
+    contentEl = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentEl" }] : /* istanbul ignore next */ []));
+    _snapPointsRef = new Set();
+    _scrollSnapsRef = [];
+    _initialPageApplied = false;
+    _initialControlledScroll = false;
+    _resizeObserver = null;
+    _mutationObserver = null;
+    _intersectionObserver = null;
+    _scrollTimeout = null;
+    _wheelTimeout = null;
+    _scrollListener = null;
+    _destroyed = false;
+    _swipeStartPoint = { x: 0, y: 0 };
+    _isRealSwipe = false;
+    _itemSelector = '[data-item]';
+    _areSetsEqual(a, b) {
+        if (a.size !== b.size)
+            return false;
+        for (const value of a) {
+            if (!b.has(value))
+                return false;
+        }
+        return true;
+    }
+    constructor() {
+        super();
+        // Composition mode: watch slide input changes
+        effect(() => {
+            const slideVal = this.slide();
+            if (slideVal === undefined || slideVal === null)
+                return;
+            if (!this.isCompositionMode())
+                return;
+            untracked(() => {
+                if (this._snapPointsRef.size > 0) {
+                    this.scrollToSlide(slideVal);
+                }
+            });
+        });
+    }
+    onAfterContentInit() {
+        this.legacyOnAfterContentInit();
+    }
+    onAfterContentChecked() {
+        this.legacyOnAfterContentChecked();
+    }
+    onDestroy() {
+        this._destroyed = true;
+        this.legacyOnDestroy();
+        // Composition mode cleanup
+        this._resizeObserver?.disconnect();
+        this._mutationObserver?.disconnect();
+        this._intersectionObserver?.disconnect();
+        this._scrollListener?.();
+        if (this._scrollTimeout)
+            clearTimeout(this._scrollTimeout);
+        if (this._wheelTimeout)
+            clearTimeout(this._wheelTimeout);
+    }
+    resolveSnapType() {
+        const axis = this.orientation() === 'vertical' ? 'y' : 'x';
+        return `${axis} ${this.snapType()}`;
+    }
+    setupObservers() {
+        const content = this.contentEl();
+        if (!content)
+            return;
+        // ResizeObserver
+        this._resizeObserver = new ResizeObserver(() => {
+            this.computeSnapPoints();
+            const closest = this.setToClosest();
+            this.scrollToPage(closest ?? this.pageState(), true);
+        });
+        this._resizeObserver.observe(content);
+        this._observeResizeItems(content);
+        // Delay initial computation to ensure items have their data-item attributes
+        requestAnimationFrame(() => {
+            this.computeSnapPoints();
+            this._observeResizeItems(content);
+            this._observeIntersectionItems(content);
+            this._applyInitialPage();
+            this._applyControlledPage();
+            this._applyControlledSlide();
+        });
+        // MutationObserver
+        this._mutationObserver = new MutationObserver((mutations) => {
+            mutations.forEach(() => {
+                this.computeSnapPoints();
+                this._observeResizeItems(content);
+                this._observeIntersectionItems(content);
+                requestAnimationFrame(() => {
+                    const closest = this.setToClosest();
+                    this.scrollToPage(closest ?? this.pageState(), true);
+                });
+            });
+        });
+        this._mutationObserver.observe(content, { childList: true, subtree: true });
+        // IntersectionObserver
+        this._intersectionObserver = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting)
+                    entry.target.setAttribute('data-inview', '');
+                else
+                    entry.target.removeAttribute('data-inview');
+            });
+        }, { root: content, threshold: 0.6 });
+        this._observeIntersectionItems(content);
+        // Scroll listener
+        const onScroll = () => {
+            if (this._scrollTimeout)
+                clearTimeout(this._scrollTimeout);
+            this._scrollTimeout = setTimeout(() => {
+                this.setToClosest();
+            }, 80);
+        };
+        onScroll();
+        content.addEventListener('scroll', onScroll, { passive: true });
+        this._scrollListener = () => content.removeEventListener('scroll', onScroll);
+    }
+    _applyInitialPage() {
+        if (this._initialPageApplied)
+            return;
+        const slideInput = this.slide();
+        if (slideInput !== undefined && slideInput !== null)
+            return;
+        const size = this._snapPointsRef.size || this.snapPoints().size;
+        if (size === 0)
+            return;
+        this._initialPageApplied = true;
+        this.scrollToPage(0, true);
+    }
+    _applyControlledPage() {
+        const pageInput = this.page();
+        const slideInput = this.slide();
+        if (pageInput === undefined || pageInput === null)
+            return;
+        if (slideInput !== undefined && slideInput !== null)
+            return;
+        if (this._snapPointsRef.size === 0 && this.snapPoints().size === 0)
+            return;
+        const instant = !this._initialControlledScroll;
+        this._initialControlledScroll = true;
+        this.scrollToPage(pageInput, instant);
+    }
+    _applyControlledSlide() {
+        const slideInput = this.slide();
+        if (slideInput === undefined || slideInput === null)
+            return;
+        if (this._snapPointsRef.size === 0 && this.snapPoints().size === 0)
+            return;
+        const instant = !this._initialControlledScroll;
+        this._initialControlledScroll = true;
+        this.scrollToSlide(slideInput, instant);
+    }
+    _observeResizeItems(content) {
+        if (!this._resizeObserver)
+            return;
+        content.querySelectorAll(this._itemSelector).forEach((item) => this._resizeObserver.observe(item));
+    }
+    _observeIntersectionItems(content) {
+        if (!this._intersectionObserver)
+            return;
+        content.querySelectorAll(this._itemSelector).forEach((item) => this._intersectionObserver.observe(item));
+    }
+    computeSnapPoints() {
+        const content = this.contentEl();
+        if (!content)
+            return;
+        const isHorizontal = this.orientation() !== 'vertical';
+        const trackSize = isHorizontal ? content.clientWidth : content.clientHeight;
+        const maxOffset = Math.max(0, isHorizontal ? content.scrollWidth - trackSize : content.scrollHeight - trackSize);
+        const snaps = [];
+        const alignValue = this.align();
+        this._scrollSnapsRef = [];
+        content.querySelectorAll(this._itemSelector).forEach((item) => {
+            const offset = isHorizontal ? item.offsetLeft : item.offsetTop;
+            const size = isHorizontal ? item.clientWidth : item.clientHeight;
+            let snapPoint = offset;
+            if (alignValue === 'center') {
+                snapPoint = offset - (trackSize - size) / 2;
+            }
+            else if (alignValue === 'end') {
+                snapPoint = offset - (trackSize - size);
+            }
+            const clamped = Math.max(0, Math.min(snapPoint, maxOffset));
+            this._scrollSnapsRef.push(clamped);
+            snaps.push(clamped);
+        });
+        const newSnapPoints = new Set(snaps.map(Number));
+        if (this._areSetsEqual(this._snapPointsRef, newSnapPoints))
+            return;
+        this._snapPointsRef = newSnapPoints;
+        this.snapPoints.set(newSnapPoints);
+    }
+    setPage(page) {
+        // Pending requestAnimationFrame/observer callbacks can still reach this after teardown;
+        // bail so we don't emit on a destroyed OutputRef.
+        if (this._destroyed)
+            return;
+        if (!this.loop()) {
+            const size = this._snapPointsRef.size || this.snapPoints().size;
+            this.isPrevDisabled.set(page === 0);
+            this.isNextDisabled.set(page === size - 1);
+        }
+        this.pageState.set(page);
+        this.onPageChange.emit({ value: page });
+        this.onSlideChange.emit({ value: page });
+    }
+    setToClosest() {
+        const content = this.contentEl();
+        const points = this._snapPointsRef;
+        if (!content || points.size === 0)
+            return undefined;
+        const scrollPos = this.orientation() === 'horizontal' ? content.scrollLeft : content.scrollTop;
+        const closestSnapPoint = Array.from(points).reduce((closest, point) => {
+            return Math.abs(point - scrollPos) < Math.abs(closest - scrollPos) ? point : closest;
+        }, Infinity);
+        const index = Array.from(points).indexOf(closestSnapPoint);
+        this.setPage(index);
+        return index;
+    }
+    scrollToPage(pageNum, instant = false) {
+        const points = this._snapPointsRef;
+        if (points.size === 0)
+            return;
+        const target = pageNum ?? this.pageState();
+        const clampedPage = this.loop() ? (target + points.size) % points.size : Math.max(0, Math.min(target, points.size - 1));
+        this.setPage(clampedPage);
+        this.scrollTo(Array.from(points)[clampedPage], instant);
+    }
+    next() {
+        this.scrollToPage(this.pageState() + 1);
+    }
+    prev() {
+        this.scrollToPage(this.pageState() - 1);
+    }
+    scrollTo(snapPoint, instant = false) {
+        const content = this.contentEl();
+        if (!content)
+            return;
+        content.scrollTo({
+            [this.orientation() === 'horizontal' ? 'left' : 'top']: snapPoint,
+            behavior: instant ? 'instant' : 'smooth'
+        });
+    }
+    scrollToSlide(slideNum, instant = false) {
+        const points = this._snapPointsRef;
+        const snaps = this._scrollSnapsRef;
+        if (points.size === 0 || snaps.length === 0)
+            return;
+        const clampedSlide = Math.max(0, Math.min(slideNum, snaps.length - 1));
+        const snap = snaps[clampedSlide];
+        this.scrollTo(snap, instant);
+        const pageIdx = Array.from(points).indexOf(snap);
+        this.setPage(pageIdx);
+    }
+    setContentEl(el) {
+        this.contentEl.set(el);
+    }
+    // Pointer event handlers (called by CarouselContent)
+    onContentPointerDown(e) {
+        if (e.button !== 0)
+            return;
+        if (e.pointerType === 'touch')
+            return;
+        this.swiping.set(true);
+        this._swipeStartPoint = { x: e.clientX, y: e.clientY };
+        this._isRealSwipe = false;
+    }
+    onContentPointerMove(e) {
+        const content = this.contentEl();
+        if (!this.swiping() || !content || e.pointerType === 'touch')
+            return;
+        const deltaX = e.clientX - this._swipeStartPoint.x;
+        const deltaY = e.clientY - this._swipeStartPoint.y;
+        const distance = Math.abs(deltaX) + Math.abs(deltaY);
+        if (distance < 6)
+            return;
+        if ((window.getSelection()?.toString().length ?? 0) > 0)
+            return;
+        e.currentTarget.setPointerCapture(e.pointerId);
+        content.style.userSelect = 'none';
+        this._isRealSwipe = true;
+        content.style.scrollSnapType = 'none';
+        content.scrollBy({ left: -e.movementX, top: -e.movementY, behavior: 'instant' });
+        e.preventDefault();
+    }
+    onContentPointerUp(e) {
+        this.swiping.set(false);
+        e.currentTarget.releasePointerCapture(e.pointerId);
+        if (!this._isRealSwipe)
+            return;
+        const content = this.contentEl();
+        if (!content)
+            return;
+        content.style.userSelect = '';
+        const scrollPos = this.orientation() === 'horizontal' ? content.scrollLeft : content.scrollTop;
+        const snapPointsSet = this._snapPointsRef;
+        const closestSnapPoint = Array.from(snapPointsSet).reduce((closest, point) => {
+            return Math.abs(point - scrollPos) < Math.abs(closest - scrollPos) ? point : closest;
+        }, Infinity);
+        const index = Array.from(snapPointsSet).indexOf(closestSnapPoint);
+        requestAnimationFrame(() => {
+            if (closestSnapPoint !== undefined)
+                this.scrollToPage(index);
+            requestAnimationFrame(() => {
+                content.style.scrollSnapType = this.resolveSnapType();
+            });
+        });
+    }
+    onContentWheel(e) {
+        if (this._wheelTimeout)
+            clearTimeout(this._wheelTimeout);
+        this._wheelTimeout = setTimeout(() => {
+            const primaryDelta = this.orientation() === 'horizontal' ? e.deltaX || e.deltaY : e.deltaY || e.deltaX;
+            if (primaryDelta > 0 && this.isNextDisabled())
+                return;
+            if (primaryDelta < 0 && this.isPrevDisabled())
+                return;
+            this.setToClosest();
+        }, 80);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: Carousel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: Carousel, isStandalone: true, selector: "p-carousel", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, snapType: { classPropertyName: "snapType", publicName: "snapType", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, autoSize: { classPropertyName: "autoSize", publicName: "autoSize", isSignal: true, isRequired: false, transformFunction: null }, slidesPerPage: { classPropertyName: "slidesPerPage", publicName: "slidesPerPage", isSignal: true, isRequired: false, transformFunction: null }, slide: { classPropertyName: "slide", publicName: "slide", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onPageChange: "onPageChange", onSlideChange: "onSlideChange" }, host: { properties: { "attr.id": "id", "attr.role": "'region'", "class": "hostClass()", "attr.data-scope": "dataScope()", "attr.data-part": "dataPart()", "attr.data-orientation": "dataOrientation()", "attr.data-align": "dataAlign()", "attr.data-page": "dataPage()", "attr.data-swiping": "dataSwiping()", "attr.data-autosize": "dataAutosize()" } }, providers: [CarouselStyle, { provide: PARENT_INSTANCE, useExisting: Carousel }, { provide: CAROUSEL_ROOT, useExisting: Carousel }], queries: [{ propertyName: "_compositionContent", predicate: CarouselContent, descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+        @if (isCompositionMode()) {
+            <ng-content></ng-content>
+        } @else {
+            @if (hasHeader()) {
+                <div [class]="cx('header')" [pBind]="ptm('header')">
+                    <ng-content select="p-header"></ng-content>
+                    <ng-container *ngTemplateOutlet="headerTemplate()"></ng-container>
+                </div>
+            }
+            <div [class]="cn(cx('contentContainer'), contentClass())" [pBind]="ptm('contentContainer')">
+                <div [class]="cx('content')" [attr.aria-live]="ariaLive()" [pBind]="ptm('content')">
+                    @if (showNavigators()) {
+                        <button
+                            type="button"
+                            iconOnly
+                            [pButton]="prevButtonProps()"
+                            [text]="true"
+                            [class]="cx('pcPrevButton')"
+                            [attr.aria-label]="ariaPrevButtonLabel()"
+                            attr.data-pc-group-section="navigator"
+                            [pButtonPT]="ptm('pcPrevButton')"
+                            [pButtonUnstyled]="unstyled()"
+                            (click)="navBackward($event)"
+                        >
+                            @if (showDefaultPrevIcon()) {
+                                @if (!isVertical()) {
+                                    <svg data-p-icon="chevron-left" />
+                                }
+                                @if (isVertical()) {
+                                    <svg data-p-icon="chevron-up" />
+                                }
+                            }
+                            @if (showPrevIconTemplate()) {
+                                <ng-template *ngTemplateOutlet="previousIconTemplate()"></ng-template>
+                            }
+                        </button>
+                    }
+                    <div [class]="cx('viewport')" [style]="viewportStyle()" (touchend)="onTouchEnd($event)" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)" [pBind]="ptm('viewport')">
+                        <div #itemsContainer [class]="cx('itemList')" (transitionend)="onTransitionEnd()" [pBind]="ptm('itemList')">
+                            @for (item of clonedItemsForStarting(); track $index; let i = $index) {
+                                <div
+                                    [class]="cx('itemClone', { index: i })"
+                                    [attr.aria-hidden]="isCloneStartAriaHidden()"
+                                    [attr.aria-label]="ariaSlideNumber(i)"
+                                    [attr.aria-roledescription]="ariaSlideLabel()"
+                                    [attr.data-p-carousel-item-active]="isCloneStartActive()"
+                                    [attr.data-p-carousel-item-start]="i === 0"
+                                    [attr.data-p-carousel-item-end]="isCloneStartEnd(i)"
+                                    [pBind]="ptm('itemClone')"
+                                >
+                                    <ng-container *ngTemplateOutlet="itemTemplate(); context: { $implicit: item }"></ng-container>
+                                </div>
+                            }
+                            @for (item of value(); track $index; let i = $index) {
+                                <div
+                                    [class]="cx('item', { index: i })"
+                                    role="group"
+                                    [attr.aria-hidden]="isItemAriaHidden(i)"
+                                    [attr.aria-label]="ariaSlideNumber(i)"
+                                    [attr.aria-roledescription]="ariaSlideLabel()"
+                                    [attr.data-p-carousel-item-active]="isItemActive(i)"
+                                    [attr.data-p-carousel-item-start]="isItemStart(i)"
+                                    [attr.data-p-carousel-item-end]="isItemEnd(i)"
+                                    [pBind]="getItemPTOptions('item', i)"
+                                >
+                                    <ng-container *ngTemplateOutlet="itemTemplate(); context: { $implicit: item }"></ng-container>
+                                </div>
+                            }
+                            @for (item of clonedItemsForFinishing(); track $index) {
+                                <div [class]="cx('itemClone', { index: 0 })" [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(); context: { $implicit: item }"></ng-container>
+                                </div>
+                            }
+                        </div>
+                    </div>
+                    @if (showNavigators()) {
+                        <button
+                            type="button"
+                            iconOnly
+                            [pButton]="nextButtonProps()"
+                            [text]="true"
+                            [class]="cx('pcNextButton')"
+                            [attr.aria-label]="ariaNextButtonLabel()"
+                            attr.data-pc-group-section="navigator"
+                            [pButtonPT]="ptm('pcNextButton')"
+                            [pButtonUnstyled]="unstyled()"
+                            (click)="navForward($event)"
+                        >
+                            @if (showDefaultNextIcon()) {
+                                @if (!isVertical()) {
+                                    <svg data-p-icon="chevron-right" />
+                                }
+                                @if (isVertical()) {
+                                    <svg data-p-icon="chevron-down" />
+                                }
+                            }
+                            @if (showNextIconTemplate()) {
+                                <ng-template *ngTemplateOutlet="nextIconTemplate()"></ng-template>
+                            }
+                        </button>
+                    }
+                </div>
+                @if (showIndicators()) {
+                    <ul #indicatorContent [class]="cx('indicatorList')" [style]="indicatorsContentStyle()" (keydown)="onIndicatorKeydown($event)" [pBind]="ptm('indicatorList')">
+                        @for (dot of totalDotsArray(); track dot) {
+                            <li [class]="cx('indicator', { index: dot })" [attr.data-p-active]="isIndicatorActive(dot)" [pBind]="getIndicatorPTOptions('indicator', dot)">
+                                <button
+                                    type="button"
+                                    [class]="cx('indicatorButton')"
+                                    (click)="onDotClick($event, dot)"
+                                    [style]="indicatorStyle()"
+                                    [attr.aria-label]="ariaPageLabel(dot + 1)"
+                                    [attr.aria-current]="getIndicatorAriaCurrent(dot)"
+                                    [tabindex]="getIndicatorTabindex(dot)"
+                                    [pBind]="getIndicatorPTOptions('indicatorButton', dot)"
+                                ></button>
+                            </li>
+                        }
+                    </ul>
+                }
+            </div>
+            @if (hasFooter()) {
+                <div [class]="cx('footer')" [pBind]="ptm('footer')">
+                    <ng-content select="p-footer"></ng-content>
+                    <ng-container *ngTemplateOutlet="footerTemplate()"></ng-container>
+                </div>
+            }
+        }
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChevronRight, selector: "svg[data-p-icon=\"chevron-right\"]" }, { kind: "directive", type: ButtonDirective, selector: "[pButton]", inputs: ["pButton", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "link", "rounded", "fluid", "variant", "iconOnly", "loading", "severity"] }, { kind: "component", type: ChevronLeft, selector: "svg[data-p-icon=\"chevron-left\"]" }, { kind: "component", type: ChevronDown, selector: "svg[data-p-icon=\"chevron-down\"]" }, { kind: "component", type: ChevronUp, selector: "svg[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: "22.0.3", ngImport: i0, type: Carousel, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-carousel',
+                    standalone: true,
+                    imports: [NgTemplateOutlet, ChevronRight, ButtonDirective, ChevronLeft, ChevronDown, ChevronUp, SharedModule, BindModule],
+                    template: `
+        @if (isCompositionMode()) {
+            <ng-content></ng-content>
+        } @else {
+            @if (hasHeader()) {
+                <div [class]="cx('header')" [pBind]="ptm('header')">
+                    <ng-content select="p-header"></ng-content>
+                    <ng-container *ngTemplateOutlet="headerTemplate()"></ng-container>
+                </div>
+            }
+            <div [class]="cn(cx('contentContainer'), contentClass())" [pBind]="ptm('contentContainer')">
+                <div [class]="cx('content')" [attr.aria-live]="ariaLive()" [pBind]="ptm('content')">
+                    @if (showNavigators()) {
+                        <button
+                            type="button"
+                            iconOnly
+                            [pButton]="prevButtonProps()"
+                            [text]="true"
+                            [class]="cx('pcPrevButton')"
+                            [attr.aria-label]="ariaPrevButtonLabel()"
+                            attr.data-pc-group-section="navigator"
+                            [pButtonPT]="ptm('pcPrevButton')"
+                            [pButtonUnstyled]="unstyled()"
+                            (click)="navBackward($event)"
+                        >
+                            @if (showDefaultPrevIcon()) {
+                                @if (!isVertical()) {
+                                    <svg data-p-icon="chevron-left" />
+                                }
+                                @if (isVertical()) {
+                                    <svg data-p-icon="chevron-up" />
+                                }
+                            }
+                            @if (showPrevIconTemplate()) {
+                                <ng-template *ngTemplateOutlet="previousIconTemplate()"></ng-template>
+                            }
+                        </button>
+                    }
+                    <div [class]="cx('viewport')" [style]="viewportStyle()" (touchend)="onTouchEnd($event)" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)" [pBind]="ptm('viewport')">
+                        <div #itemsContainer [class]="cx('itemList')" (transitionend)="onTransitionEnd()" [pBind]="ptm('itemList')">
+                            @for (item of clonedItemsForStarting(); track $index; let i = $index) {
+                                <div
+                                    [class]="cx('itemClone', { index: i })"
+                                    [attr.aria-hidden]="isCloneStartAriaHidden()"
+                                    [attr.aria-label]="ariaSlideNumber(i)"
+                                    [attr.aria-roledescription]="ariaSlideLabel()"
+                                    [attr.data-p-carousel-item-active]="isCloneStartActive()"
+                                    [attr.data-p-carousel-item-start]="i === 0"
+                                    [attr.data-p-carousel-item-end]="isCloneStartEnd(i)"
+                                    [pBind]="ptm('itemClone')"
+                                >
+                                    <ng-container *ngTemplateOutlet="itemTemplate(); context: { $implicit: item }"></ng-container>
+                                </div>
+                            }
+                            @for (item of value(); track $index; let i = $index) {
+                                <div
+                                    [class]="cx('item', { index: i })"
+                                    role="group"
+                                    [attr.aria-hidden]="isItemAriaHidden(i)"
+                                    [attr.aria-label]="ariaSlideNumber(i)"
+                                    [attr.aria-roledescription]="ariaSlideLabel()"
+                                    [attr.data-p-carousel-item-active]="isItemActive(i)"
+                                    [attr.data-p-carousel-item-start]="isItemStart(i)"
+                                    [attr.data-p-carousel-item-end]="isItemEnd(i)"
+                                    [pBind]="getItemPTOptions('item', i)"
+                                >
+                                    <ng-container *ngTemplateOutlet="itemTemplate(); context: { $implicit: item }"></ng-container>
+                                </div>
+                            }
+                            @for (item of clonedItemsForFinishing(); track $index) {
+                                <div [class]="cx('itemClone', { index: 0 })" [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(); context: { $implicit: item }"></ng-container>
+                                </div>
+                            }
+                        </div>
+                    </div>
+                    @if (showNavigators()) {
+                        <button
+                            type="button"
+                            iconOnly
+                            [pButton]="nextButtonProps()"
+                            [text]="true"
+                            [class]="cx('pcNextButton')"
+                            [attr.aria-label]="ariaNextButtonLabel()"
+                            attr.data-pc-group-section="navigator"
+                            [pButtonPT]="ptm('pcNextButton')"
+                            [pButtonUnstyled]="unstyled()"
+                            (click)="navForward($event)"
+                        >
+                            @if (showDefaultNextIcon()) {
+                                @if (!isVertical()) {
+                                    <svg data-p-icon="chevron-right" />
+                                }
+                                @if (isVertical()) {
+                                    <svg data-p-icon="chevron-down" />
+                                }
+                            }
+                            @if (showNextIconTemplate()) {
+                                <ng-template *ngTemplateOutlet="nextIconTemplate()"></ng-template>
+                            }
+                        </button>
+                    }
+                </div>
+                @if (showIndicators()) {
+                    <ul #indicatorContent [class]="cx('indicatorList')" [style]="indicatorsContentStyle()" (keydown)="onIndicatorKeydown($event)" [pBind]="ptm('indicatorList')">
+                        @for (dot of totalDotsArray(); track dot) {
+                            <li [class]="cx('indicator', { index: dot })" [attr.data-p-active]="isIndicatorActive(dot)" [pBind]="getIndicatorPTOptions('indicator', dot)">
+                                <button
+                                    type="button"
+                                    [class]="cx('indicatorButton')"
+                                    (click)="onDotClick($event, dot)"
+                                    [style]="indicatorStyle()"
+                                    [attr.aria-label]="ariaPageLabel(dot + 1)"
+                                    [attr.aria-current]="getIndicatorAriaCurrent(dot)"
+                                    [tabindex]="getIndicatorTabindex(dot)"
+                                    [pBind]="getIndicatorPTOptions('indicatorButton', dot)"
+                                ></button>
+                            </li>
+                        }
+                    </ul>
+                }
+            </div>
+            @if (hasFooter()) {
+                <div [class]="cx('footer')" [pBind]="ptm('footer')">
+                    <ng-content select="p-footer"></ng-content>
+                    <ng-container *ngTemplateOutlet="footerTemplate()"></ng-container>
+                </div>
+            }
+        }
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    providers: [CarouselStyle, { provide: PARENT_INSTANCE, useExisting: Carousel }, { provide: CAROUSEL_ROOT, useExisting: Carousel }],
+                    hostDirectives: [Bind],
+                    host: {
+                        '[attr.id]': 'id',
+                        '[attr.role]': "'region'",
+                        '[class]': 'hostClass()',
+                        '[attr.data-scope]': 'dataScope()',
+                        '[attr.data-part]': 'dataPart()',
+                        '[attr.data-orientation]': 'dataOrientation()',
+                        '[attr.data-align]': 'dataAlign()',
+                        '[attr.data-page]': 'dataPage()',
+                        '[attr.data-swiping]': 'dataSwiping()',
+                        '[attr.data-autosize]': 'dataAutosize()'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { _compositionContent: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CarouselContent), { ...{ descendants: true }, isSignal: true }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], snapType: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapType", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], autoSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSize", required: false }] }], slidesPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "slidesPerPage", required: false }] }], slide: [{ type: i0.Input, args: [{ isSignal: true, alias: "slide", required: false }] }], onPageChange: [{ type: i0.Output, args: ["onPageChange"] }], onSlideChange: [{ type: i0.Output, args: ["onSlideChange"] }] } });
+class CarouselModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: CarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.3", ngImport: i0, type: CarouselModule, imports: [Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrev, CarouselIndicators, CarouselIndicator, SharedModule], exports: [Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrev, CarouselIndicators, CarouselIndicator, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: CarouselModule, imports: [Carousel, CarouselContent, CarouselItem, CarouselIndicators, SharedModule, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: CarouselModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrev, CarouselIndicators, CarouselIndicator, SharedModule],
+                    exports: [Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrev, CarouselIndicators, CarouselIndicator, SharedModule]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Carousel, CarouselClasses, CarouselContent, CarouselIndicator, CarouselIndicators, CarouselItem, CarouselModule, CarouselNext, CarouselPrev, CarouselStyle };
+//# sourceMappingURL=primenglab-carousel.mjs.map