import * as i0 from '@angular/core'; import { OnDestroy, ChangeDetectorRef, EventEmitter, AfterContentChecked, AfterContentInit, TemplateRef, QueryList } from '@angular/core'; import { HammerGestureConfig } from '@angular/platform-browser'; import { AnimationPlayer, IBaseEventArgs, ICarouselResourceStrings } from 'igniteui-angular/core'; import { AnimationReferenceMetadata } from '@angular/animations'; import { Subject } from 'rxjs'; declare const CarouselAnimationType: { readonly none: "none"; readonly slide: "slide"; readonly fade: "fade"; }; type CarouselAnimationType = (typeof CarouselAnimationType)[keyof typeof CarouselAnimationType]; declare const CarouselIndicatorsOrientation: { /** * @deprecated in version 19.1.0. Use `end` instead. */ readonly bottom: "bottom"; /** * @deprecated in version 19.1.0. Use `start` instead. */ readonly top: "top"; readonly start: "start"; readonly end: "end"; }; type CarouselIndicatorsOrientation = (typeof CarouselIndicatorsOrientation)[keyof typeof CarouselIndicatorsOrientation]; declare enum CarouselAnimationDirection { NONE = 0, NEXT = 1, PREV = 2 } interface CarouselAnimationSettings { enterAnimation: AnimationReferenceMetadata; leaveAnimation: AnimationReferenceMetadata; } /** @hidden */ interface IgxSlideComponentBase { direction: CarouselAnimationDirection; previous: boolean; } /** @hidden */ declare abstract class IgxCarouselComponentBase implements OnDestroy { private animationService; protected cdr: ChangeDetectorRef; /** @hidden */ animationType: CarouselAnimationType; /** @hidden @internal */ enterAnimationDone: EventEmitter; /** @hidden @internal */ leaveAnimationDone: EventEmitter; /** @hidden */ protected currentItem: IgxSlideComponentBase; /** @hidden */ protected previousItem: IgxSlideComponentBase; /** @hidden */ protected enterAnimationPlayer?: AnimationPlayer; /** @hidden */ protected leaveAnimationPlayer?: AnimationPlayer; /** @hidden */ protected defaultAnimationDuration: number; /** @hidden */ protected animationPosition: number; /** @hidden */ protected newDuration: number; /** @hidden */ protected vertical: boolean; ngOnDestroy(): void; /** @hidden */ protected triggerAnimations(): void; /** @hidden */ protected animationStarted(animation: AnimationPlayer): boolean; /** @hidden */ protected playAnimations(): void; private resetAnimations; private getAnimation; private playEnterAnimation; private playLeaveAnimation; protected abstract getPreviousElement(): HTMLElement; protected abstract getCurrentElement(): HTMLElement; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * A slide component that usually holds an image and/or a caption text. * IgxSlideComponent is usually a child component of an IgxCarouselComponent. * * ``` * * * * ``` * * @export */ declare class IgxSlideComponent implements AfterContentChecked, OnDestroy, IgxSlideComponentBase { private elementRef; /** * Gets/sets the `index` of the slide inside the carousel. * ```html * * * * ``` * * @memberOf IgxSlideComponent */ index: number; /** * Gets/sets the target `direction` for the slide. * ```html * * * * ``` * * @memberOf IgxSlideComponent */ direction: CarouselAnimationDirection; total: number; /** * Returns the `tabIndex` of the slide component. * ```typescript * let tabIndex = this.carousel.tabIndex; * ``` * * @memberof IgxSlideComponent * @deprecated in version 19.2.0. */ get tabIndex(): number; /** * @hidden */ id: string; /** * Returns the `role` of the slide component. * By default is set to `tabpanel` * * @memberof IgxSlideComponent */ tab: string; /** @hidden */ ariaLabelledBy: any; /** * Returns the class of the slide component. * ```typescript * let class = this.slide.cssClass; * ``` * * @memberof IgxSlideComponent */ cssClass: string; /** * Gets/sets the `active` state of the slide. * ```html * * * * ``` * * Two-way data binding. * ```html * * * * ``` * * @memberof IgxSlideComponent */ get active(): boolean; set active(value: boolean); previous: boolean; /** * @hidden */ activeChange: EventEmitter; private _active; private _destroy$; /** * Returns a reference to the carousel element in the DOM. * ```typescript * let nativeElement = this.slide.nativeElement; * ``` * * @memberof IgxSlideComponent */ get nativeElement(): any; /** * @hidden */ get isDestroyed(): Subject; ngAfterContentChecked(): void; /** * @hidden */ ngOnDestroy(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_active: unknown; static ngAcceptInputType_previous: unknown; } declare class CarouselHammerConfig extends HammerGestureConfig { overrides: { pan: { direction: number; }; }; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * **Ignite UI for Angular Carousel** - * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/carousel.html) * * The Ignite UI Carousel is used to browse or navigate through a collection of slides. Slides can contain custom * content such as images or cards and be used for things such as on-boarding tutorials or page-based interfaces. * It can be used as a separate fullscreen element or inside another component. * * Example: * ```html * * *

First Slide Header

*

First slide Content

* * *

Second Slide Header

*

Second Slide Content

*
* ``` */ declare class IgxCarouselComponent extends IgxCarouselComponentBase implements OnDestroy, AfterContentInit { private element; private iterableDiffers; private platformUtil; private dir; private document; /** * Sets the `id` of the carousel. * If not set, the `id` of the first carousel component will be `"igx-carousel-0"`. * ```html * * ``` * * @memberof IgxCarouselComponent */ id: string; /** * Returns the `role` attribute of the carousel. * ```typescript * let carouselRole = this.carousel.role; * ``` * * @memberof IgxCarouselComponent */ role: string; /** @hidden */ roleDescription: string; /** @hidden */ get labelId(): string; /** @hidden */ get isVertical(): boolean; /** * Returns the class of the carousel component. * ```typescript * let class = this.carousel.cssClass; * ``` * * @memberof IgxCarouselComponent */ cssClass: string; /** * Gets the `touch-action` style of the `list item`. * ```typescript * let touchAction = this.listItem.touchAction; * ``` */ get touchAction(): "pan-y" | "auto"; /** * Sets whether the carousel should `loop` back to the first slide after reaching the last slide. * Default value is `true`. * ```html * * ``` * * @memberOf IgxCarouselComponent */ loop: boolean; /** * Sets whether the carousel will `pause` the slide transitions on user interactions. * Default value is `true`. * ```html * * ``` * * @memberOf IgxCarouselComponent */ pause: boolean; /** * Controls whether the carousel should render the left/right `navigation` buttons. * Default value is `true`. * ```html * * ``` * * @memberOf IgxCarouselComponent */ navigation: boolean; /** * Controls whether the carousel should render the indicators. * Default value is `true`. * ```html * * ``` * * @memberOf IgxCarouselComponent */ indicators: boolean; /** * Controls whether the carousel has vertical alignment. * Default value is `false`. * ```html * * ``` * * @memberOf IgxCarouselComponent */ vertical: boolean; /** * Controls whether the carousel should support gestures. * Default value is `true`. * ```html * * ``` * * @memberOf IgxCarouselComponent */ gesturesSupport: boolean; /** * Controls the maximum indexes that can be shown. * Default value is `10`. * ```html * * ``` * * @memberOf IgxCarouselComponent */ maximumIndicatorsCount: number; /** * Gets/sets the display mode of carousel indicators. It can be `start` or `end`. * Default value is `end`. * ```html * * * ``` * * @memberOf IgxCarouselComponent */ indicatorsOrientation: CarouselIndicatorsOrientation; /** * Gets/sets the animation type of carousel. * Default value is `slide`. * ```html * * * ``` * * @memberOf IgxCarouselComponent */ animationType: CarouselAnimationType; /** * The custom template, if any, that should be used when rendering carousel indicators * * ```typescript * // Set in typescript * const myCustomTemplate: TemplateRef = myComponent.customTemplate; * myComponent.carousel.indicatorTemplate = myCustomTemplate; * ``` * ```html * * * ... * * brightness_7 * brightness_5 * * * ``` */ indicatorTemplate: TemplateRef; /** * The custom template, if any, that should be used when rendering carousel next button * * ```typescript * // Set in typescript * const myCustomTemplate: TemplateRef = myComponent.customTemplate; * myComponent.carousel.nextButtonTemplate = myCustomTemplate; * ``` * ```html * * * ... * * * * * ``` */ nextButtonTemplate: TemplateRef; /** * The custom template, if any, that should be used when rendering carousel previous button * * ```typescript * // Set in typescript * const myCustomTemplate: TemplateRef = myComponent.customTemplate; * myComponent.carousel.prevButtonTemplate = myCustomTemplate; * ``` * ```html * * * ... * * * * * ``` */ prevButtonTemplate: TemplateRef; /** * The collection of `slides` currently in the carousel. * ```typescript * let slides: QueryList = this.carousel.slides; * ``` * * @memberOf IgxCarouselComponent */ slides: QueryList; /** * An event that is emitted after a slide transition has happened. * Provides references to the `IgxCarouselComponent` and `IgxSlideComponent` as event arguments. * ```html * * ``` * * @memberOf IgxCarouselComponent */ slideChanged: EventEmitter; /** * An event that is emitted after a slide has been added to the carousel. * Provides references to the `IgxCarouselComponent` and `IgxSlideComponent` as event arguments. * ```html * * ``` * * @memberOf IgxCarouselComponent */ slideAdded: EventEmitter; /** * An event that is emitted after a slide has been removed from the carousel. * Provides references to the `IgxCarouselComponent` and `IgxSlideComponent` as event arguments. * ```html * * ``` * * @memberOf IgxCarouselComponent */ slideRemoved: EventEmitter; /** * An event that is emitted after the carousel has been paused. * Provides a reference to the `IgxCarouselComponent` as an event argument. * ```html * * ``` * * @memberOf IgxCarouselComponent */ carouselPaused: EventEmitter; /** * An event that is emitted after the carousel has resumed transitioning between `slides`. * Provides a reference to the `IgxCarouselComponent` as an event argument. * ```html * * ``` * * @memberOf IgxCarouselComponent */ carouselPlaying: EventEmitter; private defaultIndicator; private defaultNextButton; private defaultPrevButton; private _indicators; /** * @hidden * @internal */ stoppedByInteraction: boolean; protected currentItem: IgxSlideComponent; protected previousItem: IgxSlideComponent; private _interval; private _resourceStrings; private lastInterval; private playing; private destroyed; private destroy$; private differ; private incomingSlide; private _hasKeyboardFocusOnIndicators; /** * An accessor that sets the resource strings. * By default it uses EN resources. */ set resourceStrings(value: ICarouselResourceStrings); /** * An accessor that returns the resource strings. */ get resourceStrings(): ICarouselResourceStrings; /** @hidden */ get getIndicatorTemplate(): TemplateRef; /** @hidden */ get getNextButtonTemplate(): TemplateRef; /** @hidden */ get getPrevButtonTemplate(): TemplateRef; /** @hidden */ get indicatorsClass(): { [x: string]: boolean; "igx-carousel-indicators--focused": boolean; }; /** @hidden */ get showIndicators(): boolean; /** @hidden */ get showIndicatorsLabel(): boolean; /** @hidden */ get getCarouselLabel(): string; /** * Returns the total number of `slides` in the carousel. * ```typescript * let slideCount = this.carousel.total; * ``` * * @memberOf IgxCarouselComponent */ get total(): number; /** * The index of the slide being currently shown. * ```typescript * let currentSlideNumber = this.carousel.current; * ``` * * @memberOf IgxCarouselComponent */ get current(): number; /** * Returns a boolean indicating if the carousel is playing. * ```typescript * let isPlaying = this.carousel.isPlaying; * ``` * * @memberOf IgxCarouselComponent */ get isPlaying(): boolean; /** * Returns а boolean indicating if the carousel is destroyed. * ```typescript * let isDestroyed = this.carousel.isDestroyed; * ``` * * @memberOf IgxCarouselComponent */ get isDestroyed(): boolean; /** * Returns a reference to the carousel element in the DOM. * ```typescript * let nativeElement = this.carousel.nativeElement; * ``` * * @memberof IgxCarouselComponent */ get nativeElement(): any; /** * Returns the time `interval` in milliseconds before the slide changes. * ```typescript * let timeInterval = this.carousel.interval; * ``` * * @memberof IgxCarouselComponent */ get interval(): number; /** * Sets the time `interval` in milliseconds before the slide changes. * If not set, the carousel will not change `slides` automatically. * ```html * * ``` * * @memberof IgxCarouselComponent */ set interval(value: number); constructor(); /** @hidden */ onTap(event: any): void; /** @hidden */ onMouseEnter(): void; /** @hidden */ onMouseLeave(): void; /** @hidden */ onPanLeft(event: any): void; /** @hidden */ onPanRight(event: any): void; /** @hidden */ onPanUp(event: any): void; /** @hidden */ onPanDown(event: any): void; /** * @hidden */ onPanEnd(event: any): void; /** @hidden */ ngAfterContentInit(): void; /** @hidden */ ngOnDestroy(): void; /** @hidden */ handleKeydownPrev(event: KeyboardEvent): void; /** @hidden */ handleKeydownNext(event: KeyboardEvent): void; /** @hidden */ handleKeyUp(event: KeyboardEvent): void; /** @hidden */ handleFocusOut(event: FocusEvent): void; /** @hidden */ handleClick(): void; /** @hidden */ handleKeydown(event: KeyboardEvent): void; /** * Returns the slide corresponding to the provided `index` or null. * ```typescript * let slide1 = this.carousel.get(1); * ``` * * @memberOf IgxCarouselComponent */ get(index: number): IgxSlideComponent; /** * Adds a new slide to the carousel. * ```typescript * this.carousel.add(newSlide); * ``` * * @memberOf IgxCarouselComponent */ add(slide: IgxSlideComponent): void; /** * Removes a slide from the carousel. * ```typescript * this.carousel.remove(slide); * ``` * * @memberOf IgxCarouselComponent */ remove(slide: IgxSlideComponent): void; /** * Switches to the passed-in slide with a given `direction`. * ```typescript * const slide = this.carousel.get(2); * this.carousel.select(slide, CarouselAnimationDirection.NEXT); * ``` * * @memberOf IgxCarouselComponent */ select(slide: IgxSlideComponent, direction?: CarouselAnimationDirection): void; /** * Switches to slide by index with a given `direction`. * ```typescript * this.carousel.select(2, CarouselAnimationDirection.NEXT); * ``` * * @memberOf IgxCarouselComponent */ select(index: number, direction?: CarouselAnimationDirection): void; /** * Transitions to the next slide in the carousel. * ```typescript * this.carousel.next(); * ``` * * @memberOf IgxCarouselComponent */ next(): void; /** * Transitions to the previous slide in the carousel. * ```typescript * this.carousel.prev(); * ``` * * @memberOf IgxCarouselComponent */ prev(): void; /** * Resumes playing of the carousel if in paused state. * No operation otherwise. * ```typescript * this.carousel.play(); * } * ``` * * @memberOf IgxCarouselComponent */ play(): void; /** * Stops slide transitions if the `pause` option is set to `true`. * No operation otherwise. * ```typescript * this.carousel.stop(); * } * ``` * * @memberOf IgxCarouselComponent */ stop(): void; protected getPreviousElement(): HTMLElement; protected getCurrentElement(): HTMLElement; private resetInterval; private restartInterval; /** @hidden */ get nextButtonDisabled(): boolean; /** @hidden */ get prevButtonDisabled(): boolean; private get indicatorsElements(); private getIndicatorsClass; private getNextIndex; private getPrevIndex; private resetSlideStyles; private pan; private unsubscriber; private onSlideActivated; private finishAnimations; private initSlides; private updateSlidesSelection; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_loop: unknown; static ngAcceptInputType_pause: unknown; static ngAcceptInputType_navigation: unknown; static ngAcceptInputType_indicators: unknown; static ngAcceptInputType_vertical: unknown; static ngAcceptInputType_gesturesSupport: unknown; } interface ISlideEventArgs extends IBaseEventArgs { carousel: IgxCarouselComponent; slide: IgxSlideComponent; } declare class IgxCarouselIndicatorDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxCarouselNextButtonDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxCarouselPrevButtonDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare const IGX_CAROUSEL_DIRECTIVES: readonly [typeof IgxCarouselComponent, typeof IgxSlideComponent, typeof IgxCarouselIndicatorDirective, typeof IgxCarouselNextButtonDirective, typeof IgxCarouselPrevButtonDirective]; /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxCarouselModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } export { CarouselAnimationDirection, CarouselAnimationType, CarouselHammerConfig, CarouselIndicatorsOrientation, IGX_CAROUSEL_DIRECTIVES, IgxCarouselComponent, IgxCarouselComponentBase, IgxCarouselIndicatorDirective, IgxCarouselModule, IgxCarouselNextButtonDirective, IgxCarouselPrevButtonDirective, IgxSlideComponent }; export type { CarouselAnimationSettings, ISlideEventArgs, IgxSlideComponentBase };