wj-elements/dist/packages/wje-carousel/carousel.element.d.ts

WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.

import { default as WJElement } from '../wje-element/element.js';
/**
 * @summary Carousel class that extends WJElement.
 * @documentation https://elements.webjet.sk/components/carousel
 * @status stable
 * @augments WJElement
 * @slot - The carousel main content.
 * @cssproperty [--wje-carousel-size=100%] - Effective size of one carousel item.
 * @cssproperty [--wje-carousel-gap=0.5rem] - Gap between carousel items.
 */
export default class Carousel extends WJElement {
    /**
     * Getter for the CSS stylesheet.
     * @returns {*}
     */
    static get cssStyleSheet(): any;
    /**
     * Getter for the observed attributes.
     * @returns {string[]}
     */
    static get observedAttributes(): string[];
    slidePerPage: number;
    /**
     * Active slide attribute.
     * @param value
     */
    set activeSlide(value: number | number);
    /**
     * Active slide attribute.
     * @returns {number|number}
     */
    get activeSlide(): number | number;
    /**
     * Pagination attribute.
     * @returns {boolean}
     */
    get pagination(): boolean;
    /**
     * Navigation attribute.
     * @returns {boolean}
     */
    get navigation(): boolean;
    /**
     * Thumbnails attribute.
     * @returns {boolean}
     */
    get thumbnails(): boolean;
    /**
     * Loop attribute.
     * @returns {boolean}
     */
    get loop(): boolean;
    /**
     * Continuous loop attribute.
     * @returns {boolean}
     */
    get continuousLoop(): boolean;
    /**
     * Before draw method for the Carousel.
     */
    beforeDraw(): void;
    /**
     * Draw method for the Carousel.
     * @returns {DocumentFragment}
     */
    draw(): DocumentFragment;
    prevButton: Element;
    nextButton: Element;
    slides: HTMLDivElement;
    /**
     * After draw method for the Carousel.
     */
    afterDraw(): void;
    /**
     * Sync `activeSlide` to the slide whose leading edge is closest to the snap start.
     */
    syncActiveToSnapStart(): void;
    /**
     * Syncs computed CSS variables derived from `slide-per-page`.
     */
    syncSlideMetrics(): void;
    /**
     * Returns the inline scroll padding used by the snap area.
     * @returns {number}
     */
    getScrollPaddingInlineStart(): number;
    /**
     * Returns the interaction scroll behavior for UI controls.
     * Continuous multi-slide loops use instant snapping to avoid blank edge states
     * while the browser is still animating a previous smooth scroll.
     * @returns {string}
     */
    getControlBehavior(): string;
    /**
     * Sets up the IntersectionObserver for the Carousel.
     */
    setIntersectionObserver(): void;
    intersectionObserver: IntersectionObserver;
    entriesMap: Map<any, any>;
    records: IntersectionObserverEntry[];
    /**
     * Goes to the slide.
     * @param index
     * @param behavior
     * @param next
     */
    goToSlide(index: any, behavior?: string, next?: boolean): void;
    /**
     * Sets the active class on the currently targeted visual slide and removes it elsewhere.
     * @param {number} vIndex
     */
    setActiveVisualSlide(vIndex: number): void;
    /**
     * Syncs ARIA attributes on the carousel and slides.
     */
    syncAria(): void;
    /**
     * Clones the first and last items.
     */
    cloneFirstAndLastItems(): void;
    /**
     * Creates a sanitized loop clone that does not inherit transient render state
     * such as inline `visibility: hidden` from the source slide.
     * @param {HTMLElement} item
     * @returns {HTMLElement}
     */
    createLoopClone(item: HTMLElement): HTMLElement;
    /**
     * Removes loop clones so they can be rebuilt for the current configuration.
     */
    removeLoopClones(): void;
    /**
     * Returns how many slides should be cloned on each side when loop is enabled.
     * @param {number} totalSlides
     * @returns {number}
     */
    getLoopCloneCount(totalSlides?: number): number;
    /**
     * Scrolls the carousel to a visual slide index.
     * @param {number} vIndex
     * @param {string} behavior
     */
    scrollToVisualIndex(vIndex: number, behavior?: string): void;
    snapRestoreFrame: any;
    /**
     * Goes to the next slide.
     */
    removeActiveSlide(): void;
    /**
     * Goes to the next slide.
     */
    changePagination(): void;
    /**
     * Goes to the next slide.
     */
    changeThumbnails(): void;
    /**
     * Goes to the next slide.
     * @returns {Element}
     */
    createNextButton(): Element;
    /**
     * Goes to the next slide.
     * @returns {Element}
     */
    createPreviousButton(): Element;
    /**
     * Goes to the next slide.
     * @returns {Element}
     */
    createPagination(): Element;
    /**
     * Goes to the next slide.
     * @returns {Element}
     */
    createThumbnails(): Element;
    /**
     * Goes to the next slide.
     */
    nextSlide(): void;
    /**
     * Goes to the previous slide.
     */
    previousSlide(): void;
    /**
     * Goes to the slide.
     * @returns {Array}
     */
    getSlides(): any[];
    /**
     * Goes to the slide.
     * @returns {Array}
     */
    getSlidesWithClones(): any[];
    /** Maps logical index to visual index, including leading clones when loop is enabled. */
    getVisualIndexForLogical(index: any): any;
    /** Maps visual index to logical index, including edge clones when loop is enabled. */
    getLogicalIndexForVisual(vIndex: any): any;
    /**
     * Returns the maximum logical slide index that can still render a full viewport.
     * @param {number} totalSlides
     * @returns {number}
     */
    getMaxVisibleStartIndex(totalSlides?: number): number;
    /**
     * Normalizes a logical index for the active loop mode.
     * @param {number} index
     * @param {number} totalSlides
     * @returns {number}
     */
    normalizeLoopIndex(index: number, totalSlides?: number): number;
    /**
     * Returns how many logical positions are reachable for the current loop mode.
     * @param {number} totalSlides
     * @returns {number}
     */
    getLoopLogicalCount(totalSlides?: number): number;
    /**
     * Returns the pagination indexes for the current carousel mode.
     * @returns {number[]}
     */
    getPaginationIndexes(): number[];
    /**
     * Goes to the slide.
     * @returns {boolean}
     */
    canGoNext(): boolean;
    /**
     * Goes to the slide.
     * @returns {boolean}
     */
    canGoPrevious(): boolean;
}