@exadel/esl
Version:
Exadel Smart Library (ESL) is the lightweight custom elements library that provide a set of super-flexible components
29 lines (28 loc) • 1.42 kB
TypeScript
import { ESLCarouselAutoplayStateMixin } from './esl-carousel.autoplay.state.mixin';
interface ESLCarouselAutoplayProgressSnapshot {
active: boolean;
duration: number;
remaining: number;
progress: number;
}
/**
* A mixin (custom attribute) element that manages the progress animation for the autoplay functionality
* of an ESL Carousel. It extends the autoplay state mixin and adds progress/animation markers.
* Uses an exclusive autoplay state marker to represent autoplay progress:
* - `animate` attribute - appears on each cycle of active autoplay;
* drops one frame before the next cycle to activate CSS animation
* - `autoplay-state` attribute - indicates the current autoplay runtime state
* - `--esl-autoplay-timeout` CSS variable - indicates the remaining autoplay cycle duration
* - `--esl-autoplay-duration` CSS variable - indicates the full autoplay cycle duration
* - `--esl-autoplay-progress` CSS variable - indicates completed progress ratio (0..1)
*/
export declare class ESLCarouselAutoplayProgressMixin extends ESLCarouselAutoplayStateMixin {
static is: string;
/** Attribute to start animation representing autoplay cycle */
animate: boolean;
disconnectedCallback(): void;
protected isBlockedProgress(baseRemaining: number): boolean;
protected getProgressSnapshot(): ESLCarouselAutoplayProgressSnapshot;
protected syncState(): void;
}
export {};