import { Host, h } from "@stencil/core";
import { DotLottie } from "@lottiefiles/dotlottie-web";
export class XAnimateLottie {
    constructor() {
        this.src = undefined;
        this.autoplay = true;
        this.loop = true;
        this.speed = 1;
        this.direction = 'forward';
        this.background = 'transparent';
        this.width = 'auto';
        this.height = 'auto';
    }
    ;
    /**
     * Watch loop changes
     */
    watchLoop(value) {
        this.lottie.setLoop(value);
    }
    /**
     * Watch speed changes
     */
    watchSpeed(value) {
        this.lottie.setSpeed(value);
    }
    /**
     * On component loaded action
     */
    componentDidLoad() {
        this.lottie = new DotLottie({
            canvas: this.el.querySelector('canvas'),
            autoplay: this.autoplay,
            loop: this.loop,
            src: this.src,
            speed: this.speed,
            mode: this.direction,
            backgroundColor: this.background,
        });
    }
    /**
     * Render component
     */
    render() {
        return h(Host, { key: 'f1e66be585d9038658799135db78ccddf10806b9' }, h("canvas", { key: 'e1bdc5c5916f66ab8f954c21d3ed9764bfde32a2', style: { width: this.width, height: this.height } }));
    }
    static get is() { return "x-animate-lottie"; }
    static get properties() {
        return {
            "src": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Lottie animation source"
                },
                "attribute": "src",
                "reflect": false
            },
            "autoplay": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Lottie animation autoplay"
                },
                "attribute": "autoplay",
                "reflect": false,
                "defaultValue": "true"
            },
            "loop": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Lottie animation loop"
                },
                "attribute": "loop",
                "reflect": false,
                "defaultValue": "true"
            },
            "speed": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Lottie animation speed"
                },
                "attribute": "speed",
                "reflect": false,
                "defaultValue": "1"
            },
            "direction": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "AnimateLottieDirecction",
                    "resolved": "\"bounce\" | \"forward\" | \"reverse\" | \"reverse-bounce\"",
                    "references": {
                        "AnimateLottieDirecction": {
                            "location": "local",
                            "path": "/opt/atlassian/pipelines/agent/build/src/components/x-animate/component-lottie.tsx",
                            "id": "src/components/x-animate/component-lottie.tsx::AnimateLottieDirecction"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Lottie animation direction"
                },
                "attribute": "direction",
                "reflect": false,
                "defaultValue": "'forward'"
            },
            "background": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Lottie animation background color"
                },
                "attribute": "background",
                "reflect": false,
                "defaultValue": "'transparent'"
            },
            "width": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Lottie animation width"
                },
                "attribute": "width",
                "reflect": false,
                "defaultValue": "'auto'"
            },
            "height": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Lottie animation height"
                },
                "attribute": "height",
                "reflect": false,
                "defaultValue": "'auto'"
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "loop",
                "methodName": "watchLoop"
            }, {
                "propName": "speed",
                "methodName": "watchSpeed"
            }];
    }
}
