import { h } from "@stencil/core";
import { getKeyFramesByAnimation } from "./animations";
import { AnimationManager, clearPropsWithOptions, getElementToAnimate } from "./utils";
export class XAnimate {
    constructor() {
        /**
         * Animation manager for Animatable
         */
        this.manager = null;
        this.name = undefined;
        this.keyFrames = undefined;
        this.keyFramesData = undefined;
        this.options = undefined;
        this.optionsData = undefined;
        this.animateId = undefined;
        this.delay = undefined;
        this.endDelay = undefined;
        this.duration = 300;
        this.direction = undefined;
        this.composite = undefined;
        this.easing = undefined;
        this.fill = undefined;
        this.iterations = undefined;
        this.iterationStart = undefined;
        this.iterationComposite = undefined;
        this.autoPlay = false;
        this.fromClassName = undefined;
        this.toClassName = undefined;
        this.currentTime = undefined;
        this.startTime = undefined;
        this.playbackRate = undefined;
    }
    get element() {
        return getElementToAnimate(this.el);
    }
    animationDidChangeHandler(animation) {
        this.keyFrames = getKeyFramesByAnimation(animation);
    }
    /**
     * Get keyFrames of the animation from string data.
     * @param text - The string with the keyFrames of the animation.
     */
    keyFramesDidChangeHandler(text) {
        if (text !== undefined)
            this.keyFrames = JSON.parse(text);
    }
    /**
     * Get options of the animation from string data.
     * @param text - The string with the options of the animation.
     */
    optionsDidChangeHandler(options) {
        clearPropsWithOptions(this, options);
    }
    /**
     * Get options of the animation from string data.
     * @param text - The string with the options of the animation.
     */
    optionsDataDidChangeHandler(text) {
        if (text !== undefined)
            this.options = JSON.parse(text);
    }
    setCurrenTime(newValue) {
        this.manager.currentAnimation.currentTime = newValue;
    }
    /**
     * Returns the current time value of the animation in milliseconds, whether running or paused.
     */
    async getCurrentTime() {
        return Promise.resolve(this.manager.currentAnimation.currentTime);
    }
    setStartTime(newValue) {
        this.manager.currentAnimation.startTime = newValue;
    }
    /**
     * Returns the scheduled time when an animation's playback should begin.
     */
    async getStartTime() {
        return Promise.resolve(this.manager.currentAnimation.startTime);
    }
    /**
     * Indicates whether the animation is currently waiting
     * for an asynchronous operation such as initiating playback
     * or pausing a running animation.
     */
    async getPending() {
        return Promise.resolve(this.manager.currentAnimation.pending);
    }
    setPlaybackRate(newValue) {
        this.manager.currentAnimation.playbackRate = newValue;
    }
    /**
     * Returns the playback rate of the animation.
     */
    async getPlaybackRate() {
        return Promise.resolve(this.manager.currentAnimation.playbackRate);
    }
    /**
     * Returns an enumerated value describing the playback state of an animation.
     */
    async getPlayState() {
        return Promise.resolve(this.manager.currentAnimation.playState);
    }
    /**
     * Clears all `KeyframeEffects` caused by this animation and aborts its playback.
     */
    async cancel() {
        this.manager.currentAnimation.cancel();
    }
    /**
     * Sets the current playback time to the end of the animation
     * corresponding to the current playback direction.
     */
    async finish() {
        this.manager.currentAnimation.finish();
    }
    /**
     * Suspends playback of the animation.
     */
    async pause() {
        this.manager.currentAnimation.pause();
    }
    /**
     * Starts or resumes playing of an animation.
     */
    async play() {
        this.manager.playAnimation();
    }
    /**
     * Reverses the playback direction, meaning the animation ends at its beginning.
     */
    async reverse() {
        this.manager.currentAnimation.reverse();
    }
    /**
     * Clear the current animation
     */
    async clear() {
        this.manager.clearAnimation();
    }
    /**
     * Destroy the current animation
     */
    async destroy() {
        if (this.manager !== null) {
            this.manager.destroyAnimation();
        }
    }
    /**
     * Initialize manager
     */
    connectedCallback() {
        this.manager = new AnimationManager(this);
        this.manager.setState(this.element, this);
    }
    componentDidLoad() {
        this.manager.savedState();
    }
    componentShouldUpdate() {
        this.manager.setState(this.element, this);
    }
    componentDidUpdate() {
        this.manager.savedState();
    }
    disconnectedCallback() {
        this.destroy();
    }
    render() {
        return h("slot", { key: 'b6083f17ecc6ce9ed2600dabb215b24461aebe67' });
    }
    static get is() { return "x-animate"; }
    static get originalStyleUrls() {
        return {
            "$": ["./style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["style.css"]
        };
    }
    static get properties() {
        return {
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "AnimationsType",
                    "resolved": "\"none\" | \"ping\" | \"rotate\" | \"rotate-left\" | \"rotate-right\" | \"fade-in-left\" | \"bounce\" | \"flash\" | \"jello\" | \"pulse\" | \"shake\" | \"swing\" | \"rubberBand\" | \"tada\" | \"wobble\" | \"heartBeat\" | \"bounceIn\" | \"bounceInUp\" | \"bounceInDown\" | \"bounceOut\" | \"bounceOutUp\" | \"bounceOutDown\" | \"bounceOutRight\" | \"bounceOutLeft\" | \"fadeIn\" | \"fadeInUp\" | \"fadeInUpBig\" | \"fadeInDown\" | \"fadeInDownBig\" | \"fadeInRightBig\" | \"fadeInLeftBig\" | \"fadeOut\" | \"fadeOutUp\" | \"fadeOutUpBig\" | \"fadeOutDown\" | \"fadeOutDownBig\" | \"fadeOutRight\" | \"fadeOutRightBig\" | \"fadeOutLeft\" | \"fadeOutLeftBig\" | \"flip\" | \"flipInX\" | \"flipInY\" | \"flipOutX\" | \"flipOutY\" | \"lightSpeedIn\" | \"lightSpeedOut\" | \"rotateIn\" | \"rotateInClockwise\" | \"rotateInDownLeft\" | \"rotateInDownRight\" | \"rotateInUpLeft\" | \"rotateInUpRight\" | \"rotateOut\" | \"rotateOutClockwise\" | \"rotateOutDownLeft\" | \"rotateOutDownRight\" | \"rotateOutUpLeft\" | \"rotateOutUpRight\" | \"slideInUp\" | \"slideInDown\" | \"slideOutUp\" | \"slideOutDown\" | \"slideOutLeft\" | \"slideOutRight\" | \"zoomIn\" | \"zoomInUp\" | \"zoomInDown\" | \"zoomInLeft\" | \"zoomInRight\" | \"zoomOut\" | \"zoomOutUp\" | \"zoomOutDown\" | \"zoomOutLeft\" | \"zoomOutRight\" | \"hinge\" | \"jackInTheBox\" | \"rollIn\" | \"rollOut\" | \"scale-up-center\" | \"scale-up-top\" | \"scale-up-tr\" | \"scale-up-right\" | \"scale-up-br\" | \"scale-up-bottom\" | \"scale-up-bl\" | \"scale-up-left\" | \"scale-up-tl\" | \"scale-up-hor-center\" | \"scale-up-hor-left\" | \"scale-up-hor-right\" | \"scale-up-ver-center\" | \"scale-up-ver-top\" | \"scale-up-ver-bottom\" | \"scale-down-center\" | \"scale-down-top\" | \"scale-down-tr\" | \"scale-down-right\" | \"scale-down-br\" | \"scale-down-bottom\" | \"scale-down-bl\" | \"scale-down-left\" | \"scale-down-tl\" | \"scale-down-hor-center\" | \"scale-down-hor-left\" | \"scale-down-hor-right\" | \"scale-down-ver-center\" | \"scale-down-ver-top\" | \"scale-down-ver-bottom\" | \"rotate-center\" | \"rotate-top\" | \"rotate-tr\" | \"rotate-br\" | \"rotate-bottom\" | \"rotate-bl\" | \"rotate-tl\" | \"rotate-hor-center\" | \"rotate-hor-top\" | \"rotate-hor-bottom\" | \"rotate-vert-center\" | \"rotate-vert-left\" | \"rotate-vert-right\" | \"rotate-diagonal-1\" | \"rotate-diagonal-2\" | \"rotate-diagonal-tr\" | \"rotate-diagonal-br\" | \"rotate-diagonal-bl\" | \"rotate-diagonal-tl\" | \"rotate-scale-up\" | \"rotate-scale-down\" | \"rotate-scale-up-hor\" | \"rotate-scale-down-hor\" | \"rotate-scale-up-ver\" | \"rotate-scale-down-ver\" | \"rotate-scale-up-diag-1\" | \"rotate-scale-down-diag-1\" | \"rotate-scale-up-diag-2\" | \"rotate-scale-down-diag-2\" | \"rotate-90-cw\" | \"rotate-90-ccw\" | \"rotate-90-top-cw\" | \"rotate-90-top-ccw\" | \"rotate-90-tr-cw\" | \"rotate-90-tr-ccw\" | \"rotate-90-right-cw\" | \"rotate-90-right-ccw\" | \"rotate-90-br-cw\" | \"rotate-90-br-ccw\" | \"rotate-90-bottom-cw\" | \"rotate-90-bottom-ccw\" | \"rotate-90-bl-cw\" | \"rotate-90-bl-ccw\" | \"rotate-90-left-cw\" | \"rotate-90-left-ccw\" | \"rotate-90-tl-cw\" | \"rotate-90-tl-ccw\" | \"rotate-90-horizontal-fwd\" | \"rotate-90-horizontal-bck\" | \"rotate-90-vertical-fwd\" | \"rotate-90-vertical-bck\" | \"flip-horizontal-bottom\" | \"flip-horizontal-top\" | \"flip-horizontal-bck\" | \"flip-horizontal-fwd\" | \"flip-vertical-right\" | \"flip-vertical-left\" | \"flip-vertical-bck\" | \"flip-vertical-fwd\" | \"flip-diagonal-1-tr\" | \"flip-diagonal-1-bl\" | \"flip-diagonal-1-bck\" | \"flip-diagonal-1-fwd\" | \"flip-diagonal-2-br\" | \"flip-diagonal-2-tl\" | \"flip-diagonal-2-bck\" | \"flip-diagonal-2-fwd\" | \"flip-2-hor-top-1\" | \"flip-2-hor-top-2\" | \"flip-2-hor-top-bck\" | \"flip-2-hor-top-fwd\" | \"flip-2-ver-right-1\" | \"flip-2-ver-right-2\" | \"flip-2-ver-right-bck\" | \"flip-2-ver-right-fwd\" | \"flip-2-hor-bottom-1\" | \"flip-2-hor-bottom-2\" | \"flip-2-hor-bottom-bck\" | \"flip-2-hor-bottom-fwd\" | \"flip-2-ver-left-1\" | \"flip-2-ver-left-2\" | \"flip-2-ver-left-bck\" | \"flip-2-ver-left-fwd\" | \"flip-scale-up-hor\" | \"flip-scale-down-hor\" | \"flip-scale-up-ver\" | \"flip-scale-down-ver\" | \"flip-scale-up-diag-1\" | \"flip-scale-down-diag-1\" | \"flip-scale-up-diag-2\" | \"flip-scale-down-diag-2\" | \"flip-scale-2-hor-top\" | \"flip-scale-2-ver-right\" | \"flip-scale-2-hor-bottom\" | \"flip-scale-2-ver-left\" | \"swing-top-fwd\" | \"swing-top-bck\" | \"swing-top-right-fwd\" | \"swing-top-right-bck\" | \"swing-right-fwd\" | \"swing-right-bck\" | \"swing-bottom-right-fwd\" | \"swing-bottom-right-bck\" | \"swing-bottom-fwd\" | \"swing-bottom-bck\" | \"swing-bottom-left-fwd\" | \"swing-bottom-left-bck\" | \"swing-left-fwd\" | \"swing-left-bck\" | \"swing-top-left-fwd\" | \"swing-top-left-bck\" | \"slide-top\" | \"slide-tr\" | \"slide-right\" | \"slide-br\" | \"slide-bottom\" | \"slide-bl\" | \"slide-left\" | \"slide-tl\" | \"slide-bck-center\" | \"slide-bck-top\" | \"slide-bck-tr\" | \"slide-bck-right\" | \"slide-bck-br\" | \"slide-bck-bottom\" | \"slide-bck-bl\" | \"slide-bck-left\" | \"slide-bck-tl\" | \"slide-fwd-center\" | \"slide-fwd-top\" | \"slide-fwd-tr\" | \"slide-fwd-right\" | \"slide-fwd-br\" | \"slide-fwd-bottom\" | \"slide-fwd-bl\" | \"slide-fwd-left\" | \"slide-fwd-tl\" | \"slide-rotate-hor-top\" | \"slide-rotate-hor-t-bck\" | \"slide-rotate-hor-t-fwd\" | \"slide-rotate-ver-right\" | \"slide-rotate-ver-r-bck\" | \"slide-rotate-ver-r-fwd\" | \"slide-rotate-hor-bottom\" | \"slide-rotate-hor-b-bck\" | \"slide-rotate-hor-b-fwd\" | \"slide-rotate-ver-left\" | \"slide-rotate-ver-l-bck\" | \"slide-rotate-ver-l-fwd\" | \"shadow-drop-center\" | \"shadow-drop-top\" | \"shadow-drop-right\" | \"shadow-drop-bottom\" | \"shadow-drop-left\" | \"shadow-drop-lr\" | \"shadow-drop-tb\" | \"shadow-drop-tr\" | \"shadow-drop-br\" | \"shadow-drop-bl\" | \"shadow-drop-tl\" | \"shadow-drop-2-center\" | \"shadow-drop-2-top\" | \"shadow-drop-2-right\" | \"shadow-drop-2-bottom\" | \"shadow-drop-2-left\" | \"shadow-drop-2-lr\" | \"shadow-drop-2-tb\" | \"shadow-drop-2-tr\" | \"shadow-drop-2-br\" | \"shadow-drop-2-bl\" | \"shadow-drop-2-tl\" | \"shadow-pop-tr\" | \"shadow-pop-br\" | \"shadow-pop-bl\" | \"shadow-pop-tl\" | \"shadow-inset-center\" | \"shadow-inset-top\" | \"shadow-inset-right\" | \"shadow-inset-bottom\" | \"shadow-inset-left\" | \"shadow-inset-lr\" | \"shadow-inset-tb\" | \"shadow-inset-tr\" | \"shadow-inset-br\" | \"shadow-inset-bl\" | \"shadow-inset-tl\" | \"scale-in-center\" | \"scale-in-top\" | \"scale-in-tr\" | \"scale-in-right\" | \"scale-in-br\" | \"scale-in-bottom\" | \"scale-in-bl\" | \"scale-in-left\" | \"scale-in-tl\" | \"scale-in-hor-center\" | \"scale-in-hor-left\" | \"scale-in-hor-right\" | \"scale-in-ver-center\" | \"scale-in-ver-top\" | \"scale-in-ver-bottom\" | \"rotate-in-center\" | \"rotate-in-top\" | \"rotate-in-tr\" | \"rotate-in-right\" | \"rotate-in-br\" | \"rotate-in-bottom\" | \"rotate-in-bl\" | \"rotate-in-left\" | \"rotate-in-tl\" | \"rotate-in-hor\" | \"rotate-in-ver\" | \"rotate-in-diag-1\" | \"rotate-in-diag-2\" | \"rotate-in-2-cw\" | \"rotate-in-2-ccw\" | \"rotate-in-2-fwd-cw\" | \"rotate-in-2-fwd-ccw\" | \"rotate-in-2-bck-cw\" | \"rotate-in-2-bck-ccw\" | \"rotate-in-2-tr-cw\" | \"rotate-in-2-tr-ccw\" | \"rotate-in-2-br-cw\" | \"rotate-in-2-br-ccw\" | \"rotate-in-2-bl-cw\" | \"rotate-in-2-bl-ccw\" | \"rotate-in-2-tl-cw\" | \"rotate-in-2-tl-ccw\" | \"swirl-in-fwd\" | \"swirl-in-bck\" | \"swirl-in-top-fwd\" | \"swirl-in-top-bck\" | \"swirl-in-tr-fwd\" | \"swirl-in-tr-bck\" | \"swirl-in-right-fwd\" | \"swirl-in-right-bck\" | \"swirl-in-br-fwd\" | \"swirl-in-br-bck\" | \"swirl-in-bottom-fwd\" | \"swirl-in-bottom-bck\" | \"swirl-in-bl-fwd\" | \"swirl-in-bl-bck\" | \"swirl-in-left-fwd\" | \"swirl-in-left-bck\" | \"swirl-in-tl-fwd\" | \"swirl-in-tl-bck\" | \"flip-in-hor-bottom\" | \"flip-in-hor-top\" | \"flip-in-ver-right\" | \"flip-in-ver-left\" | \"flip-in-diag-1-tr\" | \"flip-in-diag-1-bl\" | \"flip-in-diag-2-tl\" | \"flip-in-diag-2-br\" | \"slit-in-vertical\" | \"slit-in-horizontal\" | \"slit-in-diagonal-1\" | \"slit-in-diagonal-2\" | \"slide-in-top\" | \"slide-in-tr\" | \"slide-in-right\" | \"slide-in-br\" | \"slide-in-bottom\" | \"slide-in-bl\" | \"slide-in-left\" | \"slide-in-tl\" | \"slide-in-fwd-center\" | \"slide-in-fwd-top\" | \"slide-in-fwd-tr\" | \"slide-in-fwd-right\" | \"slide-in-fwd-br\" | \"slide-in-fwd-bottom\" | \"slide-in-fwd-bl\" | \"slide-in-fwd-left\" | \"slide-in-fwd-tl\" | \"slide-in-bck-center\" | \"slide-in-bck-top\" | \"slide-in-bck-tr\" | \"slide-in-bck-right\" | \"slide-in-bck-br\" | \"slide-in-bck-bottom\" | \"slide-in-bck-bl\" | \"slide-in-bck-left\" | \"slide-in-bck-tl\" | \"slide-in-blurred-top\" | \"slide-in-blurred-tr\" | \"slide-in-blurred-right\" | \"slide-in-blurred-br\" | \"slide-in-blurred-bottom\" | \"slide-in-blurred-bl\" | \"slide-in-blurred-left\" | \"slide-in-blurred-tl\" | \"slide-in-elliptic-top-fwd\" | \"slide-in-elliptic-top-bck\" | \"slide-in-elliptic-right-fwd\" | \"slide-in-elliptic-right-bck\" | \"slide-in-elliptic-bottom-fwd\" | \"slide-in-elliptic-bottom-bck\" | \"slide-in-elliptic-left-fwd\" | \"slide-in-elliptic-left-bck\" | \"bounce-in-top\" | \"bounce-in-right\" | \"bounce-in-bottom\" | \"bounce-in-left\" | \"bounce-in-fwd\" | \"bounce-in-bck\" | \"roll-in-left\" | \"roll-in-top\" | \"roll-in-right\" | \"roll-in-bottom\" | \"roll-in-blurred-left\" | \"roll-in-blurred-top\" | \"roll-in-blurred-right\" | \"roll-in-blurred-bottom\" | \"tilt-in-top-1\" | \"tilt-in-top-2\" | \"tilt-in-tr\" | \"tilt-in-right-1\" | \"tilt-in-right-2\" | \"tilt-in-br\" | \"tilt-in-bottom-1\" | \"tilt-in-bottom-2\" | \"tilt-in-bl\" | \"tilt-in-left-1\" | \"tilt-in-left-2\" | \"tilt-in-tl\" | \"tilt-in-fwd-tr\" | \"tilt-in-fwd-br\" | \"tilt-in-fwd-bl\" | \"tilt-in-fwd-tl\" | \"swing-in-top-fwd\" | \"swing-in-top-bck\" | \"swing-in-right-fwd\" | \"swing-in-right-bck\" | \"swing-in-bottom-fwd\" | \"swing-in-bottom-bck\" | \"swing-in-left-fwd\" | \"swing-in-left-bck\" | \"fade-in-fwd\" | \"fade-in-bck\" | \"fade-in-top\" | \"fade-in-tr\" | \"fade-in-right\" | \"fade-in-br\" | \"fade-in-bottom\" | \"fade-in-bl\" | \"fade-in-tl\" | \"puff-in-center\" | \"puff-in-top\" | \"puff-in-tr\" | \"puff-in-right\" | \"puff-in-br\" | \"puff-in-bottom\" | \"puff-in-bl\" | \"puff-in-left\" | \"puff-in-tl\" | \"puff-in-hor\" | \"puff-in-ver\" | \"flicker-in-1\" | \"flicker-in-2\" | \"tracking-in-expand\" | \"tracking-in-expand-fwd\" | \"tracking-in-expand-fwd-top\" | \"tracking-in-expand-fwd-bottom\" | \"tracking-in-contract\" | \"tracking-in-contract-bck\" | \"tracking-in-contract-bck-top\" | \"tracking-in-contract-bck-bottom\" | \"text-focus-in\" | \"focus-in-expand\" | \"focus-in-expand-fwd\" | \"focus-in-contract\" | \"focus-in-contract-bck\" | \"text-shadow-drop-center\" | \"text-shadow-drop-top\" | \"text-shadow-drop-tr\" | \"text-shadow-drop-right\" | \"text-shadow-drop-br\" | \"text-shadow-drop-bottom\" | \"text-shadow-drop-bl\" | \"text-shadow-drop-left\" | \"text-shadow-drop-tl\" | \"text-shadow-pop-top\" | \"text-shadow-pop-tr\" | \"text-shadow-pop-right\" | \"text-shadow-pop-br\" | \"text-shadow-pop-bottom\" | \"text-shadow-pop-bl\" | \"text-shadow-pop-left\" | \"text-shadow-pop-tl\" | \"text-pop-up-top\" | \"text-pop-up-tr\" | \"text-pop-up-right\" | \"text-pop-up-br\" | \"text-pop-up-bottom\" | \"text-pop-up-bl\" | \"text-pop-up-left\" | \"text-pop-up-tl\" | \"vibrate-1\" | \"vibrate-2\" | \"shake-horizontal\" | \"shake-vertical\" | \"shake-lr\" | \"shake-top\" | \"shake-tr\" | \"shake-right\" | \"shake-br\" | \"shake-bottom\" | \"shake-bl\" | \"shake-left\" | \"shake-tl\" | \"jello-horizontal\" | \"jello-vertical\" | \"jello-diagonal-1\" | \"jello-diagonal-2\" | \"wobble-hor-bottom\" | \"wobble-hor-top\" | \"wobble-ver-left\" | \"wobble-ver-right\" | \"bounce-top\" | \"bounce-bottom\" | \"bounce-left\" | \"bounce-right\" | \"pulsate-bck\" | \"pulsate-fwd\" | \"ken-burns-top\" | \"ken-burns-top-right\" | \"ken-burns-right\" | \"ken-burns-bottom-right\" | \"ken-burns-bottom\" | \"ken-burns-bottom-left\" | \"ken-burns-left\" | \"ken-burns-top-left\" | \"bg-pan-left\" | \"bg-pan-right\" | \"bg-pan-top\" | \"bg-pan-bottom\" | \"bg-pan-tr\" | \"bg-pan-br\" | \"bg-pan-bl\" | \"bg-pan-tl\"",
                    "references": {
                        "AnimationsType": {
                            "location": "import",
                            "path": "./animations",
                            "id": "src/components/x-animate/animations/index.ts::AnimationsType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Name of the animation to get the keyFrames"
                },
                "attribute": "name",
                "reflect": false
            },
            "keyFrames": {
                "type": "unknown",
                "mutable": true,
                "complexType": {
                    "original": "Keyframe[]",
                    "resolved": "Keyframe[]",
                    "references": {
                        "Keyframe": {
                            "location": "global",
                            "id": "global::Keyframe"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Keyframes of the animation."
                }
            },
            "keyFramesData": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Keyframes of the animation in string format."
                },
                "attribute": "key-frames-data",
                "reflect": false
            },
            "options": {
                "type": "unknown",
                "mutable": true,
                "complexType": {
                    "original": "KeyframeAnimationOptions",
                    "resolved": "KeyframeAnimationOptions",
                    "references": {
                        "KeyframeAnimationOptions": {
                            "location": "global",
                            "id": "global::KeyframeAnimationOptions"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Default options of the animation."
                }
            },
            "optionsData": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Default options of the animation in string format."
                },
                "attribute": "options-data",
                "reflect": false
            },
            "animateId": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "A DOMString with which to reference the animation."
                },
                "attribute": "animate-id",
                "reflect": false
            },
            "delay": {
                "type": "number",
                "mutable": true,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The number of milliseconds to delay the start of the animation.\nDefaults to 0."
                },
                "attribute": "delay",
                "reflect": false
            },
            "endDelay": {
                "type": "number",
                "mutable": true,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The number of milliseconds to delay after the end of an animation."
                },
                "attribute": "end-delay",
                "reflect": false
            },
            "duration": {
                "type": "number",
                "mutable": true,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The number of milliseconds each iteration of the animation takes to complete.\nDefaults to 300."
                },
                "attribute": "duration",
                "reflect": false,
                "defaultValue": "300"
            },
            "direction": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "PlaybackDirection",
                    "resolved": "\"alternate\" | \"alternate-reverse\" | \"normal\" | \"reverse\"",
                    "references": {
                        "PlaybackDirection": {
                            "location": "global",
                            "id": "global::PlaybackDirection"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Direction of the animation."
                },
                "attribute": "direction",
                "reflect": false
            },
            "composite": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "CompositeOperation",
                    "resolved": "\"accumulate\" | \"add\" | \"replace\"",
                    "references": {
                        "CompositeOperation": {
                            "location": "global",
                            "id": "global::CompositeOperation"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Determines how values are combined between this animation and other,\nseparate animations that do not specify their own specific composite operation.\nDefaults to `replace`."
                },
                "attribute": "composite",
                "reflect": false
            },
            "easing": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The rate of the animation's change over time."
                },
                "attribute": "easing",
                "reflect": false
            },
            "fill": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "FillMode",
                    "resolved": "\"auto\" | \"backwards\" | \"both\" | \"forwards\" | \"none\"",
                    "references": {
                        "FillMode": {
                            "location": "global",
                            "id": "global::FillMode"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Dictates whether the animation's effects should be reflected\nby the element(s) prior to playing (\"backwards\"), retained after the animation\nhas completed playing (\"forwards\"), or both. Defaults to \"none\"."
                },
                "attribute": "fill",
                "reflect": false
            },
            "iterations": {
                "type": "number",
                "mutable": true,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The number of times the animation should repeat.\nDefaults to `1`, and can also take a value of `Infinity` to make it repeat for as long as the element exists."
                },
                "attribute": "iterations",
                "reflect": false
            },
            "iterationStart": {
                "type": "number",
                "mutable": true,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Describes at what point in the iteration the animation should start."
                },
                "attribute": "iteration-start",
                "reflect": false
            },
            "iterationComposite": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "IterationCompositeOperation",
                    "resolved": "\"accumulate\" | \"replace\"",
                    "references": {
                        "IterationCompositeOperation": {
                            "location": "global",
                            "id": "global::IterationCompositeOperation"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Determines how values build from iteration to iteration in this animation."
                },
                "attribute": "iteration-composite",
                "reflect": false
            },
            "autoPlay": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Start the animation when the component is mounted."
                },
                "attribute": "autoplay",
                "reflect": true,
                "defaultValue": "false"
            },
            "fromClassName": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The class name to be applied when the animation starts"
                },
                "attribute": "from-class-name",
                "reflect": false
            },
            "toClassName": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The class name to be applied when the animation ends"
                },
                "attribute": "to-class-name",
                "reflect": false
            },
            "currentTime": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Sets the current time value of the animation in milliseconds, whether running or paused."
                },
                "attribute": "current-time",
                "reflect": false
            },
            "startTime": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Sets the scheduled time when an animation's playback should begin."
                },
                "attribute": "start-time",
                "reflect": false
            },
            "playbackRate": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Sets the playback rate of the animation."
                },
                "attribute": "playback-rate",
                "reflect": false
            }
        };
    }
    static get events() {
        return [{
                "method": "onStarted",
                "name": "started",
                "bubbles": false,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "This event is sent when the animation is going to play."
                },
                "complexType": {
                    "original": "HTMLElement",
                    "resolved": "HTMLElement",
                    "references": {
                        "HTMLElement": {
                            "location": "global",
                            "id": "global::HTMLElement"
                        }
                    }
                }
            }, {
                "method": "onFinish",
                "name": "finish",
                "bubbles": false,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "This event is sent when the animation finishes playing."
                },
                "complexType": {
                    "original": "HTMLElement",
                    "resolved": "HTMLElement",
                    "references": {
                        "HTMLElement": {
                            "location": "global",
                            "id": "global::HTMLElement"
                        }
                    }
                }
            }, {
                "method": "onCancel",
                "name": "cancel",
                "bubbles": false,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "This event is sent when the animation is cancelled."
                },
                "complexType": {
                    "original": "HTMLElement",
                    "resolved": "HTMLElement",
                    "references": {
                        "HTMLElement": {
                            "location": "global",
                            "id": "global::HTMLElement"
                        }
                    }
                }
            }];
    }
    static get methods() {
        return {
            "getCurrentTime": {
                "complexType": {
                    "signature": "() => Promise<number | CSSNumberish>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "CSSNumberish": {
                            "location": "global",
                            "id": "global::CSSNumberish"
                        }
                    },
                    "return": "Promise<CSSNumberish>"
                },
                "docs": {
                    "text": "Returns the current time value of the animation in milliseconds, whether running or paused.",
                    "tags": []
                }
            },
            "getStartTime": {
                "complexType": {
                    "signature": "() => Promise<number | CSSNumberish>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "CSSNumberish": {
                            "location": "global",
                            "id": "global::CSSNumberish"
                        }
                    },
                    "return": "Promise<CSSNumberish>"
                },
                "docs": {
                    "text": "Returns the scheduled time when an animation's playback should begin.",
                    "tags": []
                }
            },
            "getPending": {
                "complexType": {
                    "signature": "() => Promise<boolean>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<boolean>"
                },
                "docs": {
                    "text": "Indicates whether the animation is currently waiting\nfor an asynchronous operation such as initiating playback\nor pausing a running animation.",
                    "tags": []
                }
            },
            "getPlaybackRate": {
                "complexType": {
                    "signature": "() => Promise<number>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<number>"
                },
                "docs": {
                    "text": "Returns the playback rate of the animation.",
                    "tags": []
                }
            },
            "getPlayState": {
                "complexType": {
                    "signature": "() => Promise<AnimationPlayState>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "AnimationPlayState": {
                            "location": "global",
                            "id": "global::AnimationPlayState"
                        }
                    },
                    "return": "Promise<AnimationPlayState>"
                },
                "docs": {
                    "text": "Returns an enumerated value describing the playback state of an animation.",
                    "tags": []
                }
            },
            "cancel": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Clears all `KeyframeEffects` caused by this animation and aborts its playback.",
                    "tags": []
                }
            },
            "finish": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Sets the current playback time to the end of the animation\ncorresponding to the current playback direction.",
                    "tags": []
                }
            },
            "pause": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Suspends playback of the animation.",
                    "tags": []
                }
            },
            "play": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Starts or resumes playing of an animation.",
                    "tags": []
                }
            },
            "reverse": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Reverses the playback direction, meaning the animation ends at its beginning.",
                    "tags": []
                }
            },
            "clear": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Clear the current animation",
                    "tags": []
                }
            },
            "destroy": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Destroy the current animation",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "name",
                "methodName": "animationDidChangeHandler"
            }, {
                "propName": "keyFramesData",
                "methodName": "keyFramesDidChangeHandler"
            }, {
                "propName": "options",
                "methodName": "optionsDidChangeHandler"
            }, {
                "propName": "optionsData",
                "methodName": "optionsDataDidChangeHandler"
            }, {
                "propName": "currentTime",
                "methodName": "setCurrenTime"
            }, {
                "propName": "startTime",
                "methodName": "setStartTime"
            }, {
                "propName": "playbackRate",
                "methodName": "setPlaybackRate"
            }];
    }
}
