@exadel/esl/modules/esl-carousel/core/esl-carousel.renderer.d.ts

Exadel Smart Library (ESL) is the lightweight custom elements library that provide a set of super-flexible components

import { ESLCarouselDirection } from './esl-carousel.types';
import type { ESLCarousel } from './esl-carousel';
import type { ESLCarouselActionParams, ESLCarouselConfig, ESLCarouselState, ESLCarouselNavInfo } from './esl-carousel.types';
export declare abstract class ESLCarouselRenderer implements ESLCarouselConfig, ESLCarouselState {
    /** CSS variable name to set transition duration */
    static readonly TRANSITION_DURATION_PROP = "--esl-carousel-step-duration";
    static is: string;
    static classes: string[];
    protected readonly $carousel: ESLCarousel;
    /** (visible) slide count per view */
    readonly count: number;
    /** cyclic carousel rendering mode */
    readonly loop: boolean;
    /** vertical carousel rendering mode */
    readonly vertical: boolean;
    /** marker if the renderer is applied to the carousel */
    protected _bound: boolean;
    constructor($carousel: ESLCarousel, options: ESLCarouselConfig);
    /** @returns marker if the renderer is applied to the carousel */
    get bound(): boolean;
    /** @returns renderer type name */
    get type(): string;
    /** @returns slide total count or 0 if the renderer is not bound */
    get size(): number;
    /** @returns slides shift size in pixels */
    get offset(): number;
    /** @returns active slide index or -1 if the renderer is not bound */
    get activeIndex(): number;
    /** @returns list of active slide indexes */
    get activeIndexes(): number[];
    /** @returns renderer config safe copy */
    get config(): ESLCarouselConfig;
    /** @returns renderer state safe copy */
    get state(): ESLCarouselState;
    /** @returns {@link ESLCarousel} `$slidesArea` */
    get $area(): HTMLElement;
    /** @returns {@link ESLCarousel} `$slides` */
    get $slides(): HTMLElement[];
    protected get animating(): boolean;
    protected set animating(value: boolean);
    protected get transitionDuration(): number;
    protected set transitionDuration(value: number | null);
    protected get transitionDuration$$(): Promise<void>;
    equal(config: ESLCarouselConfig): boolean;
    bind(): void;
    unbind(): void;
    /** Processes binding of defined renderer to the carousel {@link ESLCarousel}. */
    onBind(): void;
    /** Processes unbinding of defined renderer from the carousel {@link ESLCarousel}. */
    onUnbind(): void;
    /** Processes drawing of the carousel {@link ESLCarousel}. */
    redraw(): void;
    /** Normalizes an index before navigation */
    protected normalizeIndex(index: number, params?: ESLCarouselActionParams): number;
    /** Normalizes a direction before navigation */
    protected normalizeDirection(direction: ESLCarouselDirection | undefined, params?: ESLCarouselActionParams): ESLCarouselDirection;
    /** Processes changing slides */
    navigate(to: ESLCarouselNavInfo, params: ESLCarouselActionParams): Promise<void>;
    /** Pre-processing animation action. */
    onBeforeAnimate(index: number, direction: ESLCarouselDirection, params: ESLCarouselActionParams): Promise<void>;
    /** Processes animation. */
    abstract onAnimate(index: number, direction: ESLCarouselDirection, params: ESLCarouselActionParams): Promise<void>;
    /** Post-processing animation action. */
    onAfterAnimate(index: number, direction: ESLCarouselDirection, params: ESLCarouselActionParams): Promise<void>;
    /** Moves slide by the passed offset in px */
    abstract move(offset: number, from: number, params: ESLCarouselActionParams): void;
    /** Normalizes move offset to the "nearest stable" slide position */
    abstract commit(params: ESLCarouselActionParams): Promise<void>;
    /** Sets active slides from passed index **/
    setActive(index: number, event?: ESLCarouselActionParams): void;
    /** Sets pre-active (slides that are going to be active) slides from the passed index **/
    setPreActive(index: number, event?: ESLCarouselActionParams, final?: boolean): void;
    /** Dispatches a change event with the given type and index */
    protected dispatchChangeEvent(name: 'BEFORE' | 'CHANGE' | 'AFTER', index: number, event: ESLCarouselActionParams): boolean;
    /** Dispatches a move event with the given offset, index, delta and event details */
    protected dispatchMoveEvent(offsetBefore: number, event: ESLCarouselActionParams): void;
    static register(view?: typeof ESLCarouselRenderer): void;
}