@exadel/esl

import { ESLBaseElement } from '../../esl-base-element/core'; import { ESLMediaRuleList } from '../../esl-media-query/core'; import { ESLCarouselRenderer } from './esl-carousel.renderer'; import type { ESLCarouselState, ESLCarouselSlideTarget, ESLCarouselStaticState, ESLCarouselConfig, ESLCarouselActionParams } from './esl-carousel.types'; /** * ESLCarousel component * @author Julia Murashko, Alexey Stsefanovich (ala'n) * * ESLCarousel - a slideshow component for cycling through slides. */ export declare class ESLCarousel extends ESLBaseElement { static is: string; static observedAttributes: string[]; /** Media query pattern used for {@link ESLMediaRuleList} of `type`, `loop` and `count` (default: `all`) */ media: string; /** Renderer type name (`multi` by default). Supports {@link ESLMediaRuleList} syntax */ type: string; /** Marker to enable loop mode for a carousel (`true` by default). Supports {@link ESLMediaRuleList} syntax */ loop: string | boolean; /** Count of slides to show on the screen (`1` by default). Supports {@link ESLMediaRuleList} syntax */ count: string | number; /** Orientation of the carousel (`horizontal` by default). Supports {@link ESLMediaRuleList} syntax */ vertical: string | boolean; /** Duration of the single slide transition */ stepDuration: string; /** Container selector (supports traversing query). Carousel itself by default */ container: string; /** CSS class to add on the container when carousel is empty */ containerEmptyClass: string; /** CSS class to add on the container when carousel is incomplete */ containerIncompleteClass: string; /** true if carousel is in process of animating */ animating: boolean; /** true if carousel is empty */ empty: boolean; /** true if carousel has only one item */ singleSlide: boolean; /** true if carousel is incomplete (total slides count is less or equal to visible slides count) */ incomplete: boolean; /** Marker/mixin attribute to define slide element */ get slideAttrName(): string; /** Renderer type {@link ESLMediaRuleList} instance */ get typeRule(): ESLMediaRuleList<string>; /** Loop marker {@link ESLMediaRuleList} instance */ get loopRule(): ESLMediaRuleList<boolean>; /** Count of visible slides {@link ESLMediaRuleList} instance */ get countRule(): ESLMediaRuleList<number>; /** Orientation of the carousel {@link ESLMediaRuleList} instance */ get verticalRule(): ESLMediaRuleList<boolean>; /** Duration of the single slide transition {@link ESLMediaRuleList} instance */ get stepDurationRule(): ESLMediaRuleList<number>; /** Returns observed media rules */ get observedRules(): ESLMediaRuleList[]; /** Carousel instance current {@link ESLCarouselStaticState} */ get config(): ESLCarouselStaticState; /** Carousel instance configured {@link ESLCarouselStaticState} */ get configCurrent(): ESLCarouselConfig; /** Carousel instance current {@link ESLCarouselState} */ get state(): ESLCarouselState; /** @returns currently active renderer */ get renderer(): ESLCarouselRenderer; protected connectedCallback(): void; protected attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void; protected disconnectedCallback(): void; /** Updates the config and the state that is associated with */ update(): void; protected updateStateMarkers(): void; /** Appends slide instance to the current carousel */ addSlide(slide: HTMLElement): void; /** Remove slide instance from the current carousel */ removeSlide(slide: HTMLElement): void; protected updateA11y(): void; protected _onRuleUpdate(): void; protected _onRegistryUpdate(): void; protected _onResize(): void; protected onShowRequest(e: CustomEvent): void; /** @returns slides that are processed by the current carousel. */ get $slides(): HTMLElement[]; /** * @returns carousel container */ get $container(): Element | null; /** @returns carousel slides area */ get $slidesArea(): HTMLElement; /** @returns first active slide */ get $activeSlide(): HTMLElement | undefined; /** @returns list of active slides. */ get $activeSlides(): HTMLElement[]; /** @returns count of slides. */ get size(): number; /** @returns index of first (the most left in the loop) active slide */ get activeIndex(): number; /** @returns list of active slide indexes. */ get activeIndexes(): number[]; /** Goes to the target according to passed params */ goTo(target: HTMLElement | ESLCarouselSlideTarget, params?: Partial<ESLCarouselActionParams>): Promise<void>; /** Moves slides by the passed offset */ move(offset: number, from?: number, params?: Partial<ESLCarouselActionParams>): void; /** Commits slides to the nearest stable position */ commit(offset: number, from?: number, params?: Partial<ESLCarouselActionParams>): Promise<void>; /** Merges request params with default params */ protected mergeParams(params: Partial<ESLCarouselActionParams>): ESLCarouselActionParams; /** @returns slide by index (supports not normalized indexes) */ slideAt(index: number): HTMLElement; /** @returns index of the passed slide */ indexOf(slide: HTMLElement): number; /** @returns if the passed slide target can be reached */ canNavigate(target: ESLCarouselSlideTarget): boolean; /** @returns if the passed element (or slide on a passed index) is an active slide */ isActive(el: number | HTMLElement): boolean; /** @returns if the passed element (or slide on a passed index) is a slide in pre-active state */ isPreActive(el: number | HTMLElement): boolean; /** @returns if the passed element (or slide on a passed index) is a next slide */ isNext(el: number | HTMLElement): boolean; /** @returns if the passed element (or slide on a passed index) is a prev slide */ isPrev(el: number | HTMLElement): boolean; /** * Registers component in the {@link customElements} registry * @param tagName - custom tag name to register custom element */ static register(tagName?: string): void; } declare global { export interface ESLCarouselNS { } export interface ESLLibrary { Carousel: typeof ESLCarousel & ESLCarouselNS; } export interface HTMLElementTagNameMap { 'esl-carousel': ESLCarousel; } }