import { LitElement, html } from 'lit';
import { registerComponent } from '../common/definitions/register.js';
import { styles } from './ripple.material.css.js';
const rippleFrames = [
    { opacity: 0.5, transform: 'scale(.3)' },
    { opacity: 0, transform: 'scale(2)' },
];
const rippleAnimation = {
    duration: 600,
    fill: 'forwards',
    easing: 'linear',
};
let rippleElement;
function getRippleElement() {
    if (!rippleElement) {
        rippleElement = document.createElement('span');
    }
    return rippleElement.cloneNode();
}
class IgcRippleComponent extends LitElement {
    static register() {
        registerComponent(IgcRippleComponent);
    }
    constructor() {
        super();
        this.handler = ({ clientX, clientY }) => {
            const element = getRippleElement();
            const { radius, top, left } = this.getDimensions(clientX, clientY);
            const styles = {
                position: 'absolute',
                display: 'block',
                pointerEvents: 'none',
                transformOrigin: 'center',
                transform: 'translate3d(0, 0, 0) scale(0)',
                willChange: 'opacity, transform',
                margin: '0 !important',
                border: 'none !important',
                width: `${radius}px`,
                height: `${radius}px`,
                borderRadius: '50%',
                top: `${top}px`,
                left: `${left}px`,
                background: 'var(--color, var(--ig-gray-800))',
            };
            Object.assign(element.style, styles);
            this.renderRoot.appendChild(element);
            element
                .animate(rippleFrames, rippleAnimation)
                .finished.then(() => element.remove());
        };
        this.addEventListener('pointerdown', this.handler);
    }
    getDimensions(x, y) {
        const rect = this.getBoundingClientRect();
        const radius = Math.max(rect.width, rect.height);
        const halfRadius = radius / 2;
        return {
            radius,
            top: Math.round(y - rect.top - halfRadius),
            left: Math.round(x - rect.left - halfRadius),
        };
    }
    render() {
        return html ``;
    }
}
IgcRippleComponent.tagName = 'igc-ripple';
IgcRippleComponent.styles = styles;
export default IgcRippleComponent;
//# sourceMappingURL=ripple.js.map