import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
import { CSSResultGroup } from 'lit';
import { default as CxIcon } from '../icon/icon';

/**
 * @summary A component for displaying animated GIFs and WEBPs that play and pause on interaction.
 *
 * @event cx-load - Emitted when the image loads successfully.
 * @event cx-error - Emitted when the image fails to load.
 *
 * @slot play-icon - Optional play icon to use instead of the default. Works best with `<cx-icon>`.
 * @slot pause-icon - Optional pause icon to use instead of the default. Works best with `<cx-icon>`.
 *
 * @part control-box - The container that surrounds the pause/play icons and provides their background.
 *
 * @cssproperty --control-box-size - The size of the icon box.
 * @cssproperty --icon-size - The size of the play/pause icons.
 */
export default class CxAnimatedImage extends CortexElement {
    static styles: CSSResultGroup;
    static dependencies: {
        'cx-icon': typeof CxIcon;
    };
    animatedImage: HTMLImageElement;
    frozenFrame: string;
    isLoaded: boolean;
    /** The path to the image to load. */
    src: string;
    /** A description of the image used by assistive devices. */
    alt: string;
    /** Plays the animation. When this attribute is remove, the animation will pause. */
    play: boolean;
    private handleClick;
    private handleLoad;
    private handleError;
    handlePlayChange(): void;
    handleSrcChange(): void;
    render(): import('lit').TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-animated-image': CxAnimatedImage;
    }
}
