primeng
Version:
PrimeNG is a premium UI library for Angular featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock,
942 lines (933 loc) • 112 kB
JavaScript
export * from 'primeng/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 'primeng/api';
import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
import * as i1 from 'primeng/bind';
import { Bind, BindModule } from 'primeng/bind';
import { ButtonDirective } from 'primeng/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 'primeng/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.6", ngImport: i0, type: CarouselStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CarouselStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", 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.6", ngImport: i0, type: CarouselContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", 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.6", 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.6", ngImport: i0, type: CarouselItem, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", 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.6", 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.6", ngImport: i0, type: CarouselNext, deps: null, target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", 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.6", 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.6", ngImport: i0, type: CarouselPrev, deps: null, target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", 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.6", 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.6", ngImport: i0, type: CarouselIndicator, deps: null, target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", 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.6", 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.6", ngImport: i0, type: CarouselIndicators, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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.6", 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();