import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
import { EnumOrString } from '../../../../types/src/index.ts';
import { CSSResultGroup } from 'lit';
import { animations } from './animations';

type AnimationNames = EnumOrString<keyof typeof animations | 'none'>;
type EasingTypes = EnumOrString<keyof typeof animations.easings>;
/**
 * @summary Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes.
 * Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
 *
 * @description To animate an element, wrap it in `<cx-animation>` and set an animation `name`.
 * The animation will not start until you add the `play` attribute.
 * Refer to the [properties table](#properties) for a list of all animation options.
 *
 * @event cx-cancel - Emitted when the animation is canceled.
 * @event cx-finish - Emitted when the animation finishes.
 * @event cx-start - Emitted when the animation starts or restarts.
 *
 * @event cx-cancel - Emitted when the animation is canceled.
 * @event cx-finish - Emitted when the animation finishes.
 * @event cx-start - Emitted when the animation starts or restarts.
 *
 * @slot (default) - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored.
 *                   To animate multiple elements, either wrap them in a single container or use multiple
 *                   "cx-animation" elements.
 */
export default class CxAnimation extends CortexElement {
    static readonly styles: CSSResultGroup;
    private animation?;
    private hasStarted;
    defaultSlot: Promise<HTMLSlotElement>;
    /** The name of the built-in animation to use. For custom animations, use the `keyframes` prop. */
    name: AnimationNames;
    /**
     * Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when
     * the animation finishes or gets canceled.
     */
    play: boolean;
    /** The number of milliseconds to delay the start of the animation. */
    delay: number;
    /**
     * Determines the direction of playback as well as the behavior when reaching the end of an iteration.
     * [Learn more](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction)
     */
    direction: PlaybackDirection;
    /** The number of milliseconds each iteration of the animation takes to complete. */
    duration: number;
    /**
     * The easing function to use for the animation. This can be a Shoelace easing function or a custom easing function
     * such as `cubic-bezier(0, 1, .76, 1.14)`.
     */
    easing: EasingTypes;
    /** The number of milliseconds to delay after the active period of an animation sequence. */
    endDelay: number;
    /** Sets how the animation applies styles to its target before and after its execution. */
    fill: FillMode;
    /** The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops. */
    iterations: number;
    /** The offset at which to start the animation, usually between 0 (start) and 1 (end). */
    iterationStart: number;
    /** The keyframes to use for the animation. If this is set, `name` will be ignored. */
    keyframes?: Keyframe[];
    /**
     * Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this
     * to `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This
     * value can be changed without causing the animation to restart.
     */
    playbackRate: number;
    /** Gets and sets the current animation time. */
    get currentTime(): CSSNumberish;
    set currentTime(time: number);
    constructor();
    connectedCallback(): void;
    disconnectedCallback(): void;
    private handleAnimationFinish;
    private handleAnimationCancel;
    private handleSlotChange;
    private createAnimation;
    private destroyAnimation;
    handleAnimationChange(): void;
    handlePlayChange(): boolean;
    handlePlaybackRateChange(): void;
    /** Clears all keyframe effects caused by this animation and aborts its playback. */
    cancel(): void;
    /** Sets the playback time to the end of the animation corresponding to the current playback direction. */
    finish(): void;
    render(): import('lit').TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-animation': CxAnimation;
    }
}
export {};
