import {
  __decorateClass
} from "../../chunks/chunk.QU3DSPNU.js";
import { html } from "lit";
import { query } from "lit/decorators.js";
import { GdsElement } from "../../gds-element.js";
import { gdsCustomElement } from "../../scoping.js";
import { tokens } from "../../tokens.style.js";
import RippleStyles from "./ripple.styles.js";
let GdsRipple = class extends GdsElement {
  constructor() {
    super(...arguments);
    this.onmousedown = (e) => {
      this.triggerRipple(e.clientX, e.clientY);
    };
  }
  render() {
    return html`<div></div>`;
  }
  triggerRipple(x, y) {
    const rippleEl = this._rippleEl;
    const rect = this.getBoundingClientRect();
    const rippleX = x !== void 0 ? x - rect.left : rect.width / 2;
    const rippleY = y !== void 0 ? y - rect.top : rect.height / 2;
    if (rippleEl) {
      rippleEl.classList.remove("gds-ripple-effect");
      this.style.setProperty("--gds-ripple-top", `${rippleY}px`);
      this.style.setProperty("--gds-ripple-left", `${rippleX}px`);
      setTimeout(() => {
        rippleEl.classList.add("gds-ripple-effect");
      }, 20);
    }
  }
};
GdsRipple.styles = [tokens, RippleStyles];
__decorateClass([
  query("div")
], GdsRipple.prototype, "_rippleEl", 2);
GdsRipple = __decorateClass([
  gdsCustomElement("gds-ripple")
], GdsRipple);
export {
  GdsRipple
};
