@exadel/esl/modules/esl-carousel/plugin/dots/esl-carousel.nav.dots.d.ts

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

import { ESLBaseElement } from '../../../esl-base-element/core';
import type { ESLCarousel } from '../../core/esl-carousel';
import type { DelegatedEvent } from '../../../esl-event-listener/core/types';
/** Function to generate dot element. Note it's not aware of actual carousel state, so it cannot be used to add dynamic attributes */
export type ESLCarouselNavDotBuilder = (index: number, $dots: ESLCarouselNavDots) => HTMLElement;
/** Function to update dot element upon carousel state changes */
export type ESLCarouselNavDotUpdater = ($dot: HTMLElement, index: number, $dots: ESLCarouselNavDots) => void;
/**
 * {@link ESLCarousel} Dots navigation element
 *
 * Example:
 * ```
 * <esl-carousel-dots></esl-carousel-dots>
 * ```
 */
export declare class ESLCarouselNavDots extends ESLBaseElement {
    static is: string;
    static observedAttributes: string[];
    static DEFAULT_ARIA_LABEL: string;
    /** Default dot template implementation (readonly) */
    static defaultDotBuilder(index: number, { tabIndex, dotLabelFormat, targetID }: ESLCarouselNavDots): HTMLElement;
    /** Default dot updater implementation (readonly)*/
    static defaultDotUpdater($dot: HTMLElement, index: number, { activeIndex }: ESLCarouselNavDots): void;
    /** Default dots builder function {@link ESLCarouselNavDotBuilder} */
    static dotBuilder: ESLCarouselNavDotBuilder;
    /** Default dots updater function {@link ESLCarouselNavDotUpdater} */
    static dotUpdater: ESLCarouselNavDotUpdater;
    /** {@link ESLTraversingQuery} string to find {@link ESLCarousel} instance */
    carousel: string;
    /** Label format (supports `index` key) */
    dotLabelFormat: string;
    /** Dots builder function {@link ESLCarouselNavDotBuilder} */
    dotBuilder: ESLCarouselNavDotBuilder;
    /** Dots updater function {@link ESLCarouselNavDotUpdater} */
    dotUpdater: ESLCarouselNavDotUpdater;
    /**
     * Dots number according carousel config.
     * Will be 0 if carousel does not require dots (carousel incomplete).
     * (Note: memoization used during update stage)
     */
    get count(): number;
    /** Active dot index according to carousel config. (Note: memoization used during update stage) */
    get activeIndex(): number;
    /** Previous dot index (cycled) */
    get prevIndex(): number;
    /** Next dot index (cycled) */
    get nextIndex(): number;
    /** Returns amount of slides associated with one group(dot) */
    get groupSize(): number;
    /** Current dots collection */
    get $dots(): HTMLElement[];
    /** @returns ESLCarousel instance; based on {@link carousel} attribute */
    get $carousel(): ESLCarousel | null;
    /** @returns accessible target ID */
    get targetID(): string;
    connectedCallback(): void;
    disconnectedCallback(): void;
    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
    /** Updates dots state, rebuilds dots if needed */
    update(force?: boolean): void;
    /** Updates a11y of `ESLCarouselNavDots` as a container */
    protected updateA11y(): void;
    /** Handles carousel state changes */
    protected _onSlideChange(e: Event): void;
    /** Handles `click` on the dots */
    protected _onClick(event: DelegatedEvent<PointerEvent>): void;
    /** Handles `keydown` event */
    protected _onKeydown(event: KeyboardEvent): void;
}
declare global {
    export interface ESLCarouselNS {
        Dots: typeof ESLCarouselNavDots;
    }
    export interface HTMLElementTagNameMap {
        'esl-carousel-dots': ESLCarouselNavDots;
    }
}