@syncfusion/ej2-navigations 30.2.7 → 31.1.17

package/dist/ts/carousel/carousel.d.ts

@@ -0,0 +1,439 @@
+import { Component, EmitType, INotifyPropertyChanged } from '@syncfusion/ej2-base';
+import { ChildProperty } from '@syncfusion/ej2-base';
+import { BaseEventArgs } from '@syncfusion/ej2-base';
+import { CarouselModel, CarouselItemModel } from './carousel-model';
+/**
+ * Specifies the direction of previous/next button navigations in carousel.
+ * ```props
+ * Previous :- To determine the previous direction of carousel item transition.
+ * Next :- To determine the next direction of carousel item transition.
+ * ```
+ */
+export declare type CarouselSlideDirection = 'Previous' | 'Next';
+/**
+ * Specifies the state of navigation buttons displayed in carousel.
+ * ```props
+ * Hidden :- Navigation buttons are hidden.
+ * Visible :- Navigation buttons are visible.
+ * VisibleOnHover :- Navigation buttons are visible only when we hover the carousel.
+ * ```
+ */
+export declare type CarouselButtonVisibility = 'Hidden' | 'Visible' | 'VisibleOnHover';
+/**
+ * Specifies the animation effects of carousel slide.
+ * ```props
+ * None :- The carousel item transition happens without animation.
+ * Slide :- The carousel item transition happens with slide animation.
+ * Fade :- The Carousel item transition happens with fade animation.
+ * Custom :- The Carousel item transition happens with custom animation.
+ * ```
+ */
+export declare type CarouselAnimationEffect = 'None' | 'Slide' | 'Fade' | 'Custom';
+/**
+ * Specifies the type of indicators.
+ * ```props
+ * Default: - Displays the indicators with a bullet design.
+ * Dynamic: - Applies a dynamic animation design to the indicators.
+ * Fraction: - Displays the slides numerically as indicators.
+ * Progress: - Represents the slides using a progress bar design.
+ * ```
+ */
+export declare type CarouselIndicatorsType = 'Default' | 'Dynamic' | 'Fraction' | 'Progress';
+/**
+ * Specifies the action (touch & mouse) which enables the slide swiping action in carousel.
+ * * Touch - Enables or disables the swiping action in touch interaction.
+ * * Mouse - Enables or disables the swiping action in mouse interaction.
+ *
+ * @aspNumberEnum
+ */
+export declare enum CarouselSwipeMode {
+    /** Enables or disables the swiping action in touch interaction. */
+    Touch = 1,
+    /** Enables or disables the swiping action in mouse interaction. */
+    Mouse = 2
+}
+/** An interface that holds details when changing the slide. */
+export interface SlideChangingEventArgs extends BaseEventArgs {
+    /** Specifies the index of current slide. */
+    currentIndex: number;
+    /** Specifies the element of current slide. */
+    currentSlide: HTMLElement;
+    /** Specifies the index of slide to be changed. */
+    nextIndex: number;
+    /** Specifies the element of slide to be changed. */
+    nextSlide: HTMLElement;
+    /** Specifies whether the slide transition occur through swiping or not. */
+    isSwiped: boolean;
+    /** Specifies the slide direction in which transition occurs. */
+    slideDirection: CarouselSlideDirection;
+    /** Specifies whether the slide transition should occur or not. */
+    cancel: boolean;
+}
+/** An interface that holds details once slide change done. */
+export interface SlideChangedEventArgs extends BaseEventArgs {
+    /** Specifies the index of current slide. */
+    currentIndex: number;
+    /** Specifies the element of current slide. */
+    currentSlide: HTMLElement;
+    /** Specifies the index of slide from which it changed. */
+    previousIndex: number;
+    /** Specifies the element of slide from which it changed. */
+    previousSlide: HTMLElement;
+    /** Specifies whether the slide transition done through swiping or not. */
+    isSwiped: boolean;
+    /** Specifies the slide direction in which transition occurred. */
+    slideDirection: CarouselSlideDirection;
+}
+/** Specifies the carousel individual item. */
+export declare class CarouselItem extends ChildProperty<CarouselItem> {
+    /**
+     * Accepts single/multiple classes (separated by a space) to be used for individual carousel item customization.
+     *
+     * @default null
+     */
+    cssClass: string;
+    /**
+     * Accepts the interval duration in milliseconds for individual carousel item transition.
+     *
+     * @default null
+     */
+    interval: number;
+    /**
+     * Accepts the template for individual carousel item.
+     *
+     * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    template: string | Function;
+    /**
+     * Accepts HTML attributes/custom attributes to add in individual carousel item.
+     *
+     * @default null
+     */
+    htmlAttributes: Record<string, string>;
+}
+export declare class Carousel extends Component<HTMLElement> implements INotifyPropertyChanged {
+    private autoSlideInterval;
+    private slideItems;
+    private touchModule;
+    private keyModule;
+    private keyConfigs;
+    private slideChangedEventArgs;
+    private localeObj;
+    private prevPageX;
+    private initialTranslate;
+    private itemsContainer;
+    private isSwipe;
+    private timeStampStart;
+    /**
+     * Allows defining the collection of carousel item to be displayed on the Carousel.
+     *
+     * @default []
+     */
+    items: CarouselItemModel[];
+    /**
+     * Specifies the type of animation effects. The possible values for this property as follows
+     * * `None`: The carousel item transition happens without animation.
+     * * `Slide`: The carousel item transition happens with slide animation.
+     * * `Fade`: The Carousel item transition happens with fade animation.
+     * * `Custom`: The Carousel item transition happens with custom animation.
+     *
+     *  @default 'Slide'
+     */
+    animationEffect: CarouselAnimationEffect;
+    /**
+     * Accepts the template for previous navigation button.
+     *
+     * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    previousButtonTemplate: string | Function;
+    /**
+     * Accepts the template for next navigation button.
+     *
+     * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    nextButtonTemplate: string | Function;
+    /**
+     * Accepts the template for indicator buttons.
+     *
+     * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    indicatorsTemplate: string | Function;
+    /**
+     * Accepts the template for play/pause button.
+     *
+     * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    playButtonTemplate: string | Function;
+    /**
+     * Accepts single/multiple classes (separated by a space) to be used for carousel customization.
+     *
+     * @default null
+     */
+    cssClass: string;
+    /**
+     * Specifies the datasource for the carousel items.
+     *
+     * @isdatamanager false
+     * @default []
+     */
+    dataSource: Record<string, any>[];
+    /**
+     * Specifies the template option for carousel items.
+     *
+     * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    itemTemplate: string | Function;
+    /**
+     * Specifies index of the current carousel item.
+     *
+     * @default 0
+     */
+    selectedIndex: number;
+    /**
+     * Specifies the width of the Carousel in pixels/number/percentage. The number value is considered as pixels.
+     *
+     * @default '100%'
+     */
+    width: string | number;
+    /**
+     * Specifies the height of the Carousel in pixels/number/percentage. The number value is considered as pixels.
+     *
+     * @default '100%'
+     */
+    height: string | number;
+    /**
+     * Specifies the interval duration in milliseconds for carousel item transition.
+     *
+     * @default 5000
+     */
+    interval: number;
+    /**
+     * Defines whether the slide transition is automatic or manual.
+     *
+     * @default true
+     */
+    autoPlay: boolean;
+    /**
+     * Defines whether the slide transition gets pause on hover or not.
+     *
+     * @default true
+     */
+    pauseOnHover: boolean;
+    /**
+     * Defines whether the slide transitions loop end or not. When set to false, the transition stops at last slide.
+     *
+     * @default true
+     */
+    loop: boolean;
+    /**
+     * Defines whether to show play button or not.
+     *
+     * @default false
+     */
+    showPlayButton: boolean;
+    /**
+     * Defines whether to enable swipe action in touch devices or not.
+     *
+     * @default true
+     */
+    enableTouchSwipe: boolean;
+    /**
+     * Defines whether to enable keyboard actions or not.
+     *
+     * * @remarks
+     * If any form input component is placed on the carousel slide, interacting with it may cause
+     * the left/right arrow keys to navigate to other slides. Disabling keyboard interaction helps
+     * prevent this unintended navigation, leading to a smoother user experience.
+     *
+     * @default true
+     */
+    allowKeyboardInteraction: boolean;
+    /**
+     * Defines whether to show the indicator positions or not. The indicator positions allow to know the current slide position of the carousel component.
+     *
+     * @default true
+     */
+    showIndicators: boolean;
+    /**
+     * Specifies the type of indicators. The available values for this property are:
+     *
+     * * `Default`: Displays the indicators with a bullet design.
+     * * `Dynamic`: Applies a dynamic animation design to the indicators.
+     * * `Fraction`: Displays the slides numerically as indicators.
+     * * `Progress`: Represents the slides using a progress bar design.
+     *
+     * @default 'Default'
+     */
+    indicatorsType: CarouselIndicatorsType;
+    /**
+     * Defines how to show the previous, next and play pause buttons visibility. The possible values for this property as follows
+     * * `Hidden`: Navigation buttons are hidden.
+     * * `Visible`: Navigation buttons are visible.
+     * * `VisibleOnHover`: Navigation buttons are visible only when we hover the carousel.
+     *
+     * @default 'Visible'
+     */
+    buttonsVisibility: CarouselButtonVisibility;
+    /**
+     * Enables active slide with partial previous/next slides.
+     *
+     * Slide animation only applicable if the partialVisible is enabled.
+     *
+     * @default false
+     */
+    partialVisible: boolean;
+    /**
+     * Specifies whether the slide transition should occur while performing swiping via touch/mouse.
+     * The slide swiping is enabled or disabled using bitwise operators. The swiping is disabled using ‘~’ bitwise operator.
+     * * Touch - Enables or disables the swiping action in touch interaction.
+     * * Mouse - Enables or disables the swiping action in mouse interaction.
+     *
+     * @default 'Touch'
+     * @aspNumberEnum
+     */
+    swipeMode: CarouselSwipeMode;
+    /**
+     * Accepts HTML attributes/custom attributes to add in individual carousel item.
+     *
+     * @default null
+     */
+    htmlAttributes: Record<string, string>;
+    /**
+     * The event will be fired before the slide change.
+     *
+     * @event slideChanging
+     */
+    slideChanging: EmitType<SlideChangingEventArgs>;
+    /**
+     * The event will be fired after the slide changed.
+     *
+     * @event slideChanged
+     */
+    slideChanged: EmitType<SlideChangedEventArgs>;
+    /**
+     * Constructor for creating the Carousel widget
+     *
+     * @param {CarouselModel} options Accepts the carousel model properties to initiate the rendering
+     * @param {string | HTMLElement} element Accepts the DOM element reference
+     */
+    constructor(options?: CarouselModel, element?: string | HTMLElement);
+    protected getModuleName(): string;
+    protected getPersistData(): string;
+    protected preRender(): void;
+    protected render(): void;
+    onPropertyChanged(newProp: CarouselModel, oldProp: CarouselModel): void;
+    private reRenderSlides;
+    private reRenderIndicators;
+    private initialize;
+    private renderSlides;
+    private getTranslateX;
+    private renderSlide;
+    private renderNavigators;
+    private renderNavigatorButton;
+    private renderPlayButton;
+    private renderIndicators;
+    private renderIndicatorTemplate;
+    private renderKeyboardActions;
+    private renderTouchActions;
+    private applyAnimation;
+    private autoSlide;
+    private autoSlideChange;
+    private applySlideInterval;
+    private resetSlideInterval;
+    private getSlideIndex;
+    private setActiveSlide;
+    private onTransitionEnd;
+    private refreshIndicators;
+    private setHtmlAttributes;
+    private templateParser;
+    private getNavigatorState;
+    private navigatorClickHandler;
+    private indicatorClickHandler;
+    private playButtonClickHandler;
+    private keyHandler;
+    private swipeHandler;
+    private isSuspendSlideTransition;
+    private handleNavigatorsActions;
+    private onHoverActions;
+    private onFocusActions;
+    private destroyButtons;
+    private getNumOfItems;
+    private getTranslateValue;
+    private swipeStart;
+    private swiping;
+    private swipStop;
+    private swipeNavigation;
+    private swipeModehandlers;
+    private resizeHandler;
+    private wireEvents;
+    private unWireEvents;
+    /**
+     * Method to transit from the current slide to the previous slide.
+     *
+     * @returns {void}
+     */
+    prev(): void;
+    /**
+     * Method to transit from the current slide to the next slide.
+     *
+     * @returns {void}
+     */
+    next(): void;
+    /**
+     * Method to play the slides programmatically.
+     *
+     * @returns {void}
+     */
+    play(): void;
+    /**
+     * Method to pause the slides programmatically.
+     *
+     * @returns {void}
+     */
+    pause(): void;
+    /**
+     * Method to render react and angular templates
+     *
+     * @returns {void}
+     * @private
+     */
+    private renderTemplates;
+    /**
+     * Method to reset react and angular templates
+     *
+     * @param {string[]} templates Accepts the template ID
+     * @returns {void}
+     * @private
+     */
+    private resetTemplates;
+    /**
+     * Method for destroy the carousel component.
+     *
+     * @returns {void}
+     */
+    destroy(): void;
+}