igniteui-angular/lib/carousel/carousel.component.d.ts

Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps

import { ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
export declare enum Direction {
    NONE = 0,
    NEXT = 1,
    PREV = 2
}
/**
 * **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 {
    private element;
    /**
     * 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;
    /**
     * 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"></carousel>
    * ```
    * @memberof IgxCarouselComponent
    */
    interval: number;
    /**
     * Returns the `tabIndex` of the carousel component.
     * ```typescript
     * let tabIndex =  this.carousel.tabIndex;
     * ```
     * @memberof IgxCarouselComponent
     */
    readonly tabIndex: 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;
    /**
     * 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>;
    /**
     * The collection of `slides` currently in the carousel.
     * ```typescript
     * let slides: IgxSlideComponent[] = this.carousel.slides;
     * ```
     * @memberOf IgxCarouselComponent
     */
    slides: IgxSlideComponent[];
    private _interval;
    private _lastInterval;
    private _playing;
    private _currentSlide;
    private _destroyed;
    private _total;
    constructor(element: ElementRef);
    /**
     *@hidden
     */
    ngOnDestroy(): void;
    /**
     * @hidden
     * @memberof IgxCarouselComponent
     */
    setAriaLabel(slide: any): 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;
    /**
     * 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;
    /**
     *@hidden
     */
    private _moveTo;
    /**
     *@hidden
     */
    private _resetInterval;
    /**
     *@hidden
     */
    private _restartInterval;
    /**
     *@hidden
     */
    onKeydownArrowRight(): void;
    /**
     *@hidden
     */
    onKeydownArrowLeft(): void;
}
/**
 * A slide component that usually holds an image and/or a caption text.
 * IgxSlideComponent is usually a child component of an IgxCarouselComponent.
 *
 * ```
 * <igx-slide [input bindings] >
 *    <ng-content></ng-content>
 * </igx-slide>
 * ```
 *
 * @export
 */
export declare class IgxSlideComponent implements OnInit, OnDestroy {
    private carousel;
    /**
     * Gets/sets the `index` of the slide inside the carousel.
     * ```html
     * <igx-carousel>
     *  <igx-slide index = "1"</igx-slide>
     * <igx-carousel>
     * ```
     * @memberOf IgxSlideComponent
     */
    index: number;
    /**
     * Gets/sets the target `direction` for the slide.
     * ```html
     * <igx-carousel>
     *  <igx-slide direction="NEXT"</igx-slide>
     * <igx-carousel>
     * ```
     * @memberOf IgxSlideComponent
     */
    direction: Direction;
    /**
     * Gets/sets the `active` state of the slide.
     * ```html
     * <igx-carousel>
     *  <igx-slide [active] ="false"</igx-slide>
     * <igx-carousel>
     * ```
     * @memberof IgxSlideComponent
     */
    active: boolean;
    constructor(carousel: IgxCarouselComponent);
    /**
     *@hidden
     */
    ngOnInit(): void;
    /**
     *@hidden
     */
    ngOnDestroy(): void;
}
export interface ISlideEventArgs {
    carousel: IgxCarouselComponent;
    slide: IgxSlideComponent;
}
/**
 * @hidden
 */
export declare class IgxCarouselModule {
}