@catull/igniteui-angular

import { ElementRef, EventEmitter, OnDestroy, QueryList, IterableDiffers, AfterContentInit, TemplateRef } from '@angular/core'; import { IBaseEventArgs, PlatformUtil } from '../core/utils'; import { AnimationBuilder, AnimationReferenceMetadata } from '@angular/animations'; import { IgxSlideComponent, Direction } from './slide.component'; import { ICarouselResourceStrings } from '../core/i18n/carousel-resources'; import { HammerGestureConfig } from '@angular/platform-browser'; export declare enum CarouselIndicatorsOrientation { bottom = "bottom", top = "top" } export declare enum CarouselAnimationType { none = "none", slide = "slide", fade = "fade" } export interface CarouselAnimationSettings { enterAnimation: AnimationReferenceMetadata; leaveAnimation: AnimationReferenceMetadata; } export declare class CarouselHammerConfig extends HammerGestureConfig { overrides: { pan: { direction: number; }; }; } /** * **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 * <igx-carousel> * <igx-slide> * <h3>First Slide Header</h3> * <p>First slide Content</p> * <igx-slide> * <igx-slide> * <h3>Second Slide Header</h3> * <p>Second Slide Content</p> * </igx-carousel> * ``` */ export declare class IgxCarouselComponent implements OnDestroy, AfterContentInit { private element; private iterableDiffers; private builder; private platformUtil; /** * Returns the `role` attribute of the carousel. * ```typescript * let carouselRole = this.carousel.role; * ``` * @memberof IgxCarouselComponent */ role: string; /** * Sets the `id` of the carousel. * If not set, the `id` of the first carousel component will be `"igx-carousel-0"`. * ```html * <igx-carousel id="my-first-carousel"></igx-carousel> * ``` * @memberof IgxCarouselComponent */ id: string; /** * Returns the `aria-label` of the carousel. * * ```typescript * let carousel = this.carousel.ariaLabel; * ``` * */ ariaLabel: string; /** * Returns the `tabIndex` of the carousel component. * ```typescript * let tabIndex = this.carousel.tabIndex; * ``` * @memberof IgxCarouselComponent */ readonly tabIndex: number; /** * 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; * ``` */ readonly touchAction: "auto" | "pan-y"; /** * Sets whether the carousel should `loop` back to the first slide after reaching the last slide. * Default value is `true`. * ```html * <igx-carousel [loop]="false"></igx-carousel> * ``` * @memberOf IgxCarouselComponent */ loop: boolean; /** * Sets whether the carousel will `pause` the slide transitions on user interactions. * Default value is `true`. * ```html * <igx-carousel [pause]="false"></igx-carousel> * ``` * @memberOf IgxCarouselComponent */ pause: boolean; /** * Returns the time `interval` in milliseconds before the slide changes. * ```typescript * let timeInterval = this.carousel.interval; * ``` * @memberof IgxCarouselComponent */ /** * Sets the time `interval` in milliseconds before the slide changes. * If not set, the carousel will not change `slides` automatically. * ```html * <igx-carousel [interval] = "1000"></igx-carousel> * ``` * @memberof IgxCarouselComponent */ interval: number; /** * Controls whether the carousel should render the left/right `navigation` buttons. * Default value is `true`. * ```html * <igx-carousel [navigation] = "false"></igx-carousel> * ``` * @memberOf IgxCarouselComponent */ navigation: boolean; /** * Controls whether the carousel should support keyboard navigation. * Default value is `true`. * ```html * <igx-carousel [keyboardSupport] = "false"></igx-carousel> * ``` * @memberOf IgxCarouselComponent */ keyboardSupport: boolean; /** * Controls whether the carousel should support gestures. * Default value is `true`. * ```html * <igx-carousel [gesturesSupport] = "false"></igx-carousel> * ``` * @memberOf IgxCarouselComponent */ gesturesSupport: boolean; /** * Controls the maximum indexes that can be shown. * Default value is `5`. * ```html * <igx-carousel [maximumIndicatorsCount] = "10"></igx-carousel> * ``` * @memberOf IgxCarouselComponent */ maximumIndicatorsCount: number; /** * Gets/sets the display mode of carousel indicators. It can be top or bottom. * Default value is `bottom`. * ```html * <igx-carousel indicatorsOrientation='top'> * <igx-carousel> * ``` * @memberOf IgxSlideComponent */ indicatorsOrientation: CarouselIndicatorsOrientation; /** * Gets/sets the animation type of carousel. * Default value is `slide`. * ```html * <igx-carousel animationType='none'> * <igx-carousel> * ``` * @memberOf IgxSlideComponent */ animationType: CarouselAnimationType; /** * An accessor that sets the resource strings. * By default it uses EN resources. */ /** * An accessor that returns the resource strings. */ resourceStrings: ICarouselResourceStrings; private defaultIndicator; private defaultNextButton; private defaultPrevButton; /** * The custom template, if any, that should be used when rendering carousel indicators * * ```typescript * // Set in typescript * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate; * myComponent.carousel.indicatorTemplate = myCustomTemplate; * ``` * ```html *  * <igx-carousel #carousel> * ... * <ng-template igxCarouselIndicator let-slide> * <igx-icon *ngIf="slide.active" fontSet="material">brightness_7</igx-icon> * <igx-icon *ngIf="!slide.active" fontSet="material">brightness_5</igx-icon> * </ng-template> * </igx-carousel> * ``` */ indicatorTemplate: TemplateRef<any>; /** * The custom template, if any, that should be used when rendering carousel next button * * ```typescript * // Set in typescript * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate; * myComponent.carousel.nextButtonTemplate = myCustomTemplate; * ``` * ```html *  * <igx-carousel #carousel> * ... * <ng-template igxCarouselNextButton let-disabled> * <button igxButton="fab" igxRipple="white" [disabled]="disabled"> * <igx-icon fontSet="material">add</igx-icon> * </button> * </ng-template> * </igx-carousel> * ``` */ nextButtonTemplate: TemplateRef<any>; /** * The custom template, if any, that should be used when rendering carousel previous button * * ```typescript * // Set in typescript * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate; * myComponent.carousel.nextButtonTemplate = myCustomTemplate; * ``` * ```html *  * <igx-carousel #carousel> * ... * <ng-template igxCarouselPrevButton let-disabled> * <button igxButton="fab" igxRipple="white" [disabled]="disabled"> * <igx-icon fontSet="material">remove</igx-icon> * </button> * </ng-template> * </igx-carousel> * ``` */ prevButtonTemplate: TemplateRef<any>; /** * The collection of `slides` currently in the carousel. * ```typescript * let slides: QueryList<IgxSlideComponent> = this.carousel.slides; * ``` * @memberOf IgxCarouselComponent */ slides: QueryList<IgxSlideComponent>; /** * An event that is emitted after a slide transition has happened. * Provides references to the `IgxCarouselComponent` and `IgxSlideComponent` as event arguments. * ```html * <igx-carousel (onSlideChanged)="onSlideChanged($event)"></igx-carousel> * ``` * @memberOf IgxCarouselComponent */ onSlideChanged: EventEmitter<ISlideEventArgs>; /** * 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 * <igx-carousel (onSlideAdded)="onSlideAdded($event)"></igx-carousel> * ``` * @memberOf IgxCarouselComponent */ onSlideAdded: EventEmitter<ISlideEventArgs>; /** * 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 * <igx-carousel (onSlideRemoved)="onSlideRemoved($event)"></igx-carousel> * ``` * @memberOf IgxCarouselComponent */ onSlideRemoved: EventEmitter<ISlideEventArgs>; /** * An event that is emitted after the carousel has been paused. * Provides a reference to the `IgxCarouselComponent` as an event argument. * ```html * <igx-carousel (onCarouselPaused)="onCarouselPaused($event)"></igx-carousel> * ``` * @memberOf IgxCarouselComponent */ onCarouselPaused: EventEmitter<IgxCarouselComponent>; /** * An event that is emitted after the carousel has resumed transitioning between `slides`. * Provides a reference to the `IgxCarouselComponent` as an event argument. * ```html * <igx-carousel (onCarouselPlaying)="onCarouselPlaying($event)"></igx-carousel> * ``` * @memberOf IgxCarouselComponent */ onCarouselPlaying: EventEmitter<IgxCarouselComponent>; private _interval; private _resourceStrings; private lastInterval; private playing; private stoppedByInteraction; private destroyed; private destroy$; private differ; private enterAnimationPlayer?; private leaveAnimationPlayer?; private currentSlide; private previousSlide; private animationDuration; private incomingSlide; private animationPosition; private newDuration; constructor(element: ElementRef, iterableDiffers: IterableDiffers, builder: AnimationBuilder, platformUtil: PlatformUtil); /** @hidden */ ngAfterContentInit(): void; /** @hidden */ ngOnDestroy(): void; private unsubscriber; private onSlideActivated; private playAnimations; private finishAnimations; private getAnimation; private playEnterAnimation; private playLeaveAnimation; private initSlides; private updateSlidesSelection; /** @hidden */ readonly getIndicatorTemplate: TemplateRef<any>; /** @hidden */ readonly getNextButtonTemplate: TemplateRef<any>; /** @hidden */ readonly getPrevButtonTemplate: TemplateRef<any>; /** @hidden */ setAriaLabel(slide: any): string; /** @hidden */ readonly indicatorsOrientationClass: string; /** @hidden */ readonly showIndicators: boolean; /** @hidden */ readonly showIndicatorsLabel: boolean; /** @hidden */ readonly getCarouselLabel: string; /** * Returns the total number of `slides` in the carousel. * ```typescript * let slideCount = this.carousel.total; * ``` * @memberOf IgxCarouselComponent */ readonly total: number; /** * The index of the slide being currently shown. * ```typescript * let currentSlideNumber = this.carousel.current; * ``` * @memberOf IgxCarouselComponent */ readonly current: number; private getNextIndex; private getPrevIndex; /** * Returns a boolean indicating if the carousel is playing. * ```typescript * let isPlaying = this.carousel.isPlaying; * ``` * @memberOf IgxCarouselComponent */ readonly isPlaying: boolean; /** * Returns а boolean indicating if the carousel is destroyed. * ```typescript * let isDestroyed = this.carousel.isDestroyed; * ``` * @memberOf IgxCarouselComponent */ readonly isDestroyed: boolean; /** * Returns a reference to the carousel element in the DOM. * ```typescript * let nativeElement = this.carousel.nativeElement; * ``` * @memberof IgxCarouselComponent */ readonly nativeElement: any; /** * 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; /** * Kicks in a transition for a given slide with a given `direction`. * ```typescript * this.carousel.select(this.carousel.get(2), Direction.NEXT); * ``` * @memberOf IgxCarouselComponent */ select(slide: IgxSlideComponent, direction?: Direction): 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; private resetInterval; private restartInterval; /** @hidden */ readonly nextButtonDisabled: boolean; /** @hidden */ readonly prevButtonDisabled: boolean; /** @hidden */ onKeydownArrowRight(event: any): void; /** @hidden */ onKeydownArrowLeft(event: any): void; /** @hidden */ onTap(event: any): void; /** @hidden */ onKeydownHome(event: any): void; /** @hidden */ onKeydownEnd(event: any): void; /** @hidden */ onMouseEnter(): void; /** @hidden */ onMouseLeave(): void; /** @hidden */ onPanLeft(event: any): void; /** @hidden */ onPanRight(event: any): void; private resetSlideStyles; private pan; /** * @hidden */ onPanEnd(event: any): void; } export interface ISlideEventArgs extends IBaseEventArgs { carousel: IgxCarouselComponent; slide: IgxSlideComponent; } /** * @hidden */ export declare class IgxCarouselModule { }