@ngfly/carousel
Version:
A smooth, customizable carousel component for Angular 17+ applications
130 lines (129 loc) • 4.43 kB
TypeScript
import { TemplateRef, ElementRef, AfterViewInit, OnDestroy, OnInit, OnChanges, SimpleChanges, EventEmitter } from '@angular/core';
import { CarouselConfig } from '../../interfaces/carousel-config.interface';
import * as i0 from "@angular/core";
export declare class CarouselComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges {
private readonly cdr;
private readonly ngZone;
private readonly carouselService;
slides: any[];
configs: CarouselConfig;
activeIndex: number;
onPrevClick: EventEmitter<number>;
onNextClick: EventEmitter<number>;
/**
* Template for rendering carousel slides & empty state
*/
itemTemplate: TemplateRef<any>;
emptyStateTemplate: TemplateRef<any>;
/**
* Reference to the carousel track element & wrapper element
*/
trackElement: ElementRef<HTMLElement>;
wrapperElement: ElementRef<HTMLElement>;
private currentTranslate;
currentIndex: number;
private destroy$;
private autoplayInterval?;
private itemWidths;
private itemHeights;
private containerWidth;
private containerHeight;
private intersectionObserver;
private resizeObserver;
private visibilityChangeTimeout;
private initialized;
private readonly scrollSizeMap;
showPrevButton: boolean;
showNextButton: boolean;
filteredItems: any[];
emptyStateText: string;
emptyStateIcon: string;
emptyStateTextColor: string;
showEmptyStateIcon: boolean;
ngOnInit(): void;
ngOnChanges(changes: SimpleChanges): void;
private setupAutoplay;
private clearAutoplayInterval;
ngAfterViewInit(): void;
ngOnDestroy(): void;
get isVertical(): boolean;
get containerStyles(): Record<string, string>;
get trackStyles(): Record<string, string>;
private initializeCarousel;
/**
* Set up window resize listener
*/
private setupResizeListener;
/**
* Set up intersection observer to detect when carousel becomes visible
*/
private setupIntersectionObserver;
/**
* Set up resize observer to detect when carousel's size changes
*/
private setupResizeObserver;
private updateContainerDimensions;
/**
* Check if content overflows and update button visibility
*/
private checkOverflow;
/**
* Calculate dimensions of carousel items
*/
private calculateItemDimensions;
/**
* Calculate scroll amount based on configuration
*/
private getScrollAmount;
/**
* Navigate to previous item
*/
previous(): void;
/**
* Navigate to next item
*/
next(): void;
private updateTranslatePosition;
getItemStyle(index: number): Record<string, string>;
get contentPadding(): string;
get animationDuration(): string;
get animationTiming(): string;
get showNavigation(): boolean;
getEmptyStateContainerStyle(): Record<string, string>;
hasItems(): boolean;
getNavControlsClass(): string;
getNavControlsStyle(): Record<string, string>;
get prevIcon(): string;
get nextIcon(): string;
getIconStyles(isNext: boolean): Record<string, string>;
/**
* Calculate position styles for navigation buttons
*/
private getButtonPositionStyle;
/**
* Get full styles for navigation buttons
* @param buttonType - Type of button ('prev' or 'next')
*/
private getButtonFullStyles;
getPrevButtonFullStyles(): Record<string, any>;
getNextButtonFullStyles(): Record<string, any>;
getPrevIndex(activeIndex: number): number;
goToPrevSlide(): void;
getIndicatorContainerStyles(): Record<string, string>;
/**
* Get styles for an individual indicator
* @param index Index of the indicator
*/
getIndicatorItemStyles(index: number): Record<string, string>;
/**
* Navigate to a specific slide when indicator is clicked
* @param index Target slide index
*/
goToSlide(index: number): void;
/**
* Whether to show indicators
*/
get showIndicators(): boolean;
static ɵfac: i0.ɵɵFactoryDeclaration<CarouselComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<CarouselComponent, "carousel", never, { "slides": "slides"; "configs": "configs"; "activeIndex": "activeIndex"; }, { "onPrevClick": "onPrevClick"; "onNextClick": "onNextClick"; }, ["itemTemplate", "emptyStateTemplate"], never, true>;
}