import { r as registerInstance, h, H as Host, c as getElement } from './core-1db051ba.js';

const RippleEffect = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        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 } });
    }
    get element() { return getElement(this); }
    static get style() { return ".sc-anj-ripple-effect-h {\n  background-color: var(--anj-highlight-overlay);\n  border-radius: 50%;\n  display: block;\n  height: 100%;\n  left: -50%;\n  opacity: 0;\n  padding: 100%;\n  position: absolute;\n}\n.anj-animate.sc-anj-ripple-effect-h {\n  -webkit-transition: opacity 0.1s ease-in, -webkit-transform 0.5s ease-out;\n  transition: opacity 0.1s ease-in, -webkit-transform 0.5s ease-out;\n  transition: opacity 0.1s ease-in, transform 0.5s ease-out;\n  transition: opacity 0.1s ease-in, transform 0.5s ease-out, -webkit-transform 0.5s ease-out;\n}\n.anj-active.sc-anj-ripple-effect-h {\n  opacity: 0.16;\n}"; }
};

export { RippleEffect as anj_ripple_effect };
