igniteui-angular

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<any>; /** @hidden @internal */ leaveAnimationDone: EventEmitter<any>; /** @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<IgxCarouselComponentBase, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<IgxCarouselComponentBase, never, never, {}, {}, never, never, true, never>; } /** * 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 */ declare class IgxSlideComponent implements AfterContentChecked, OnDestroy, IgxSlideComponentBase { private elementRef; /** * 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: 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 * <igx-carousel> * <igx-slide [active] ="false"></igx-slide> * <igx-carousel> * ``` * * Two-way data binding. * ```html * <igx-carousel> * <igx-slide [(active)] ="model.isActive"></igx-slide> * <igx-carousel> * ``` * * @memberof IgxSlideComponent */ get active(): boolean; set active(value: boolean); previous: boolean; /** * @hidden */ activeChange: EventEmitter<boolean>; 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<boolean>; ngAfterContentChecked(): void; /** * @hidden */ ngOnDestroy(): void; static ɵfac: i0.ɵɵFactoryDeclaration<IgxSlideComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<IgxSlideComponent, "igx-slide", never, { "index": { "alias": "index"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "total": { "alias": "total"; "required": false; }; "active": { "alias": "active"; "required": false; }; "previous": { "alias": "previous"; "required": false; }; }, { "activeChange": "activeChange"; }, never, ["*"], true, never>; static ngAcceptInputType_active: unknown; static ngAcceptInputType_previous: unknown; } declare class CarouselHammerConfig extends HammerGestureConfig { overrides: { pan: { direction: number; }; }; static ɵfac: i0.ɵɵFactoryDeclaration<CarouselHammerConfig, never>; static ɵprov: i0.ɵɵInjectableDeclaration<CarouselHammerConfig>; } /** * **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> * ``` */ 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 * <igx-carousel id="my-first-carousel"></igx-carousel> * ``` * * @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 * <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; /** * 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 render the indicators. * Default value is `true`. * ```html * <igx-carousel [indicators]="false"></igx-carousel> * ``` * * @memberOf IgxCarouselComponent */ indicators: boolean; /** * Controls whether the carousel has vertical alignment. * Default value is `false`. * ```html * <igx-carousel [vertical]="true"></igx-carousel> * ``` * * @memberOf IgxCarouselComponent */ vertical: 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 `10`. * ```html * <igx-carousel [maximumIndicatorsCount]="5"></igx-carousel> * ``` * * @memberOf IgxCarouselComponent */ maximumIndicatorsCount: number; /** * Gets/sets the display mode of carousel indicators. It can be `start` or `end`. * Default value is `end`. * ```html * <igx-carousel indicatorsOrientation="start"> * <igx-carousel> * ``` * * @memberOf IgxCarouselComponent */ indicatorsOrientation: CarouselIndicatorsOrientation; /** * Gets/sets the animation type of carousel. * Default value is `slide`. * ```html * <igx-carousel animationType="none"> * <igx-carousel> * ``` * * @memberOf IgxCarouselComponent */ animationType: CarouselAnimationType; /** * 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">brightness_7</igx-icon> * <igx-icon *ngIf="!slide.active">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 type="button" igxButton="fab" igxRipple="white" [disabled]="disabled"> * <igx-icon name="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.prevButtonTemplate = myCustomTemplate; * ``` * ```html *  * <igx-carousel #carousel> * ... * <ng-template igxCarouselPrevButton let-disabled> * <button type="button" igxButton="fab" igxRipple="white" [disabled]="disabled"> * <igx-icon name="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 (slideChanged)="slideChanged($event)"></igx-carousel> * ``` * * @memberOf IgxCarouselComponent */ slideChanged: 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 (slideAdded)="slideAdded($event)"></igx-carousel> * ``` * * @memberOf IgxCarouselComponent */ slideAdded: 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 (slideRemoved)="slideRemoved($event)"></igx-carousel> * ``` * * @memberOf IgxCarouselComponent */ slideRemoved: 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 (carouselPaused)="carouselPaused($event)"></igx-carousel> * ``` * * @memberOf IgxCarouselComponent */ carouselPaused: 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 (carouselPlaying)="carouselPlaying($event)"></igx-carousel> * ``` * * @memberOf IgxCarouselComponent */ carouselPlaying: EventEmitter<IgxCarouselComponent>; 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<any>; /** @hidden */ get getNextButtonTemplate(): TemplateRef<any>; /** @hidden */ get getPrevButtonTemplate(): TemplateRef<any>; /** @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 * <igx-carousel [interval]="1000"></igx-carousel> * ``` * * @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<IgxCarouselComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<IgxCarouselComponent, "igx-carousel", never, { "id": { "alias": "id"; "required": false; }; "loop": { "alias": "loop"; "required": false; }; "pause": { "alias": "pause"; "required": false; }; "navigation": { "alias": "navigation"; "required": false; }; "indicators": { "alias": "indicators"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "gesturesSupport": { "alias": "gesturesSupport"; "required": false; }; "maximumIndicatorsCount": { "alias": "maximumIndicatorsCount"; "required": false; }; "indicatorsOrientation": { "alias": "indicatorsOrientation"; "required": false; }; "animationType": { "alias": "animationType"; "required": false; }; "resourceStrings": { "alias": "resourceStrings"; "required": false; }; "interval": { "alias": "interval"; "required": false; }; }, { "slideChanged": "slideChanged"; "slideAdded": "slideAdded"; "slideRemoved": "slideRemoved"; "carouselPaused": "carouselPaused"; "carouselPlaying": "carouselPlaying"; }, ["indicatorTemplate", "nextButtonTemplate", "prevButtonTemplate", "slides"], ["*"], true, never>; 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<IgxCarouselIndicatorDirective, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<IgxCarouselIndicatorDirective, "[igxCarouselIndicator]", never, {}, {}, never, never, true, never>; } declare class IgxCarouselNextButtonDirective { static ɵfac: i0.ɵɵFactoryDeclaration<IgxCarouselNextButtonDirective, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<IgxCarouselNextButtonDirective, "[igxCarouselNextButton]", never, {}, {}, never, never, true, never>; } declare class IgxCarouselPrevButtonDirective { static ɵfac: i0.ɵɵFactoryDeclaration<IgxCarouselPrevButtonDirective, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<IgxCarouselPrevButtonDirective, "[igxCarouselPrevButton]", never, {}, {}, never, never, true, never>; } 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<IgxCarouselModule, never>; static ɵmod: i0.ɵɵNgModuleDeclaration<IgxCarouselModule, never, [typeof IgxCarouselComponent, typeof IgxSlideComponent, typeof IgxCarouselIndicatorDirective, typeof IgxCarouselNextButtonDirective, typeof IgxCarouselPrevButtonDirective], [typeof IgxCarouselComponent, typeof IgxSlideComponent, typeof IgxCarouselIndicatorDirective, typeof IgxCarouselNextButtonDirective, typeof IgxCarouselPrevButtonDirective]>; static ɵinj: i0.ɵɵInjectorDeclaration<IgxCarouselModule>; } export { CarouselAnimationDirection, CarouselAnimationType, CarouselHammerConfig, CarouselIndicatorsOrientation, IGX_CAROUSEL_DIRECTIVES, IgxCarouselComponent, IgxCarouselComponentBase, IgxCarouselIndicatorDirective, IgxCarouselModule, IgxCarouselNextButtonDirective, IgxCarouselPrevButtonDirective, IgxSlideComponent }; export type { CarouselAnimationSettings, ISlideEventArgs, IgxSlideComponentBase };