ng-smooth-carousel
Version:
A smooth, customizable carousel component for Angular 14 applications
237 lines (236 loc) • 7.65 kB
TypeScript
import { TemplateRef, ElementRef, AfterViewInit, OnDestroy, ChangeDetectorRef, OnInit, NgZone, OnChanges, SimpleChanges } from '@angular/core';
import { CarouselConfig } from './carousel-config.interface';
import * as i0 from "@angular/core";
/**
* NgSmoothCarousel Component
*
* A carousel/slider component for Angular applications with smooth scrolling capabilities.
* Supports both horizontal and vertical orientations, custom navigation styling,
* and multiple configuration options.
*/
export declare class CarouselComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges {
private readonly cdr;
private readonly ngZone;
items: any[];
config: CarouselConfig;
itemTemplate: TemplateRef<any>;
emptyStateTemplate: TemplateRef<any>;
trackElement: ElementRef<HTMLElement>;
wrapperElement: ElementRef<HTMLElement>;
searchInput: ElementRef<HTMLInputElement>;
private currentTranslate;
private currentIndex;
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;
searchQuery: string;
isSearchModalOpen: boolean;
filteredItems: any[];
constructor(cdr: ChangeDetectorRef, ngZone: NgZone);
/**
* @description Initialize component on init
*/
ngOnInit(): void;
/**
* @description Handle changes to inputs
*/
ngOnChanges(changes: SimpleChanges): void;
/**
* @description Convert time string to milliseconds
*/
private parseTimeToMs;
/**
* @description Setup autoplay functionality if enabled
*/
private setupAutoplay;
/**
* @description Initialize component after view is initialized
*/
ngAfterViewInit(): void;
/**
* @description Clean up resources on component destruction
*/
ngOnDestroy(): void;
/**
* @description Whether carousel orientation is vertical
*/
get isVertical(): boolean;
/**
* @description Get container styles based on configuration
*/
get containerStyles(): Record<string, string>;
/**
* @description Get track styles including transform property for translation
*/
get trackStyles(): Record<string, string>;
/**
* @description Initialize carousel state
*/
private initializeCarousel;
private setupResizeListener;
private setupIntersectionObserver;
private setupResizeObserver;
private updateContainerWidth;
/**
* @description Check if content overflows and update button visibility
*/
private checkOverflow;
private calculateItemWidths;
/**
* @description Calculate scroll amount based on configuration
*/
private getScrollAmount;
/**
* @description Navigate to previous item
*/
previous(): void;
/**
* @description Navigate to next item
*/
next(): void;
/**
* @description Get button shape styles based on configuration
*/
private getButtonShapeStyles;
/**
* @description Get styles for next button
*/
get nextButtonStyles(): Record<string, any>;
/**
* @description Get styles for previous button
*/
get prevButtonStyles(): Record<string, any>;
/**
* @description Get styles for search button
* @deprecated COMING SOON - Search functionality will be available in future releases
*/
/**
* @description Get individual item styling
*/
getItemStyle(index: number): Record<string, string>;
/**
* @description Content padding for the carousel
*/
get contentPadding(): string;
/**
* @description Animation duration for scrolling
*/
get animationDuration(): string;
/**
* @description Animation timing function
*/
get animationTiming(): string;
/**
* @description Whether search functionality is enabled
* @deprecated COMING SOON - Search functionality will be available in future releases
*/
/**
* @description Placeholder text for search input
* @deprecated COMING SOON - Search functionality will be available in future releases
*/
/**
* @description Title for search modal
* @deprecated COMING SOON - Search functionality will be available in future releases
*/
/**
* @description Styles for search modal
* @deprecated COMING SOON - Search functionality will be available in future releases
*/
/**
* @description Toggle search modal visibility
* @deprecated COMING SOON - Search functionality will be available in future releases
*/
/**
* @description Close search modal
* @deprecated COMING SOON - Search functionality will be available in future releases
*/
/**
* @description Apply search filter to items
* @deprecated COMING SOON - Search functionality will be available in future releases
*/
/**
* @description Handle clicks outside search modal
* @deprecated COMING SOON - Search functionality will be available in future releases
*/
/**
* @description Reset search and show all items
* @deprecated COMING SOON - Search functionality will be available in future releases
*/
/**
* @description Get navigation icons based on configuration
*/
private getNavigationIcons;
/**
* @description Previous button icon
*/
get prevIcon(): string;
/**
* @description Next button icon
*/
get nextIcon(): string;
/**
* @description Search button icon
* @deprecated COMING SOON - Search functionality will be available in future releases
*/
/**
* @description Next button icon styles
*/
get nextIconStyles(): Record<string, string>;
/**
* @description Previous button icon styles
*/
get prevIconStyles(): Record<string, string>;
/**
* @description Search button icon styles
* @deprecated COMING SOON - Search functionality will be available in future releases
*/
/**
* @description Whether navigation buttons should be shown
*/
get showNavigation(): boolean;
/**
* @description Get styles for empty state container
*/
getEmptyStateContainerStyle(): Record<string, string>;
/**
* @description Determines if carousel contains items
*/
hasItems(): boolean;
/**
* @description Default CTA position (fixed to bottom-right)
* @deprecated Will be removed in future versions
*/
get ctaPosition(): string;
/**
* @description Get class for navigation controls container
*/
getNavControlsClass(): string;
/**
* @description Get styles for navigation controls container
*/
getNavControlsStyle(): Record<string, string>;
/**
* @description Calculate position styles for navigation buttons
*/
private getButtonPositionStyle;
/**
* @description Get full styles for previous button
*/
getPrevButtonFullStyles(): Record<string, any>;
/**
* @description Get full styles for next button
*/
getNextButtonFullStyles(): Record<string, any>;
static ɵfac: i0.ɵɵFactoryDeclaration<CarouselComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<CarouselComponent, "nsc", never, { "items": "items"; "config": "config"; }, {}, ["itemTemplate", "emptyStateTemplate"], never, false>;
}