import { Host, h } from "@stencil/core";
export class RippleEffect {
    constructor() {
        this.clickListener = () => this.ripple();
        this.active = false;
        this.ready = false;
        /**
         * The end magnification by percent
         */
        this.end = 2;
        /**
         * The start by percent
         */
        this.start = 1;
    }
    connectedCallback() {
        this.element.parentElement.addEventListener('click', this.clickListener);
        this.setScale();
    }
    disconnectedCallback() {
        this.element.parentElement.removeEventListener('click', this.clickListener);
        this.active = false;
        if (this.timer) {
            window.clearTimeout(this.timer);
            this.timer = undefined;
        }
    }
    async ripple() {
        this.ready = true;
        return new Promise((resolve) => {
            this.active = true;
            window.setTimeout(() => {
                this.setScale(this.end);
                resolve(this.onEnd());
            });
        });
    }
    async onEnd() {
        return new Promise(resolve => {
            this.timer = window.setTimeout(() => {
                this.active = false;
                this.setScale();
                this.timer = undefined;
                resolve();
            }, 500);
        });
    }
    setScale(scale) {
        this.element.style.transform = `scale(${scale ? scale : this.start})`;
    }
    render() {
        return h(Host, { role: "presentation", class: { 'anj-active': this.active, 'anj-animate': this.ready } });
    }
    static get is() { return "anj-ripple-effect"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() { return {
        "$": ["ripple-effect.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["ripple-effect.css"]
    }; }
    static get properties() { return {
        "end": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The end magnification by percent"
            },
            "attribute": "end",
            "reflect": false,
            "defaultValue": "2"
        },
        "start": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The start by percent"
            },
            "attribute": "start",
            "reflect": false,
            "defaultValue": "1"
        }
    }; }
    static get states() { return {
        "active": {},
        "ready": {}
    }; }
    static get methods() { return {
        "ripple": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "element"; }
}
