text: 'use strict';
  
  Object.defineProperty(exports, '__esModule', { value: true });
  
  const __chunk_1 = require('./chunk-8de9033d.js');
  require('./chunk-d8847c1c.js');
  
  class RippleEffect {
      constructor(hostRef) {
          __chunk_1.registerInstance(this, hostRef);
          /**
           * Sets the type of ripple-effect:
           *
           * - `bounded`: the ripple effect expands from the user's click position
           * - `unbounded`: the ripple effect expands from the center of the button and overflows the container.
           *
           * NOTE: Surfaces for bounded ripples should have the overflow property set to hidden,
           * while surfaces for unbounded ripples should have it set to visible.
           */
          this.type = 'bounded';
      }
      /**
       * Adds the ripple effect to the parent element.
       *
       * @param x The horizontal coordinate of where the ripple should start.
       * @param y The vertical coordinate of where the ripple should start.
       */
      async addRipple(x, y) {
          return new Promise(resolve => {
              __chunk_1.readTask(() => {
                  const rect = this.el.getBoundingClientRect();
                  const width = rect.width;
                  const height = rect.height;
                  const hypotenuse = Math.sqrt(width * width + height * height);
                  const maxDim = Math.max(height, width);
                  const maxRadius = this.unbounded ? maxDim : hypotenuse + PADDING;
                  const initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE);
                  const finalScale = maxRadius / initialSize;
                  let posX = x - rect.left;
                  let posY = y - rect.top;
                  if (this.unbounded) {
                      posX = width * 0.5;
                      posY = height * 0.5;
                  }
                  const styleX = posX - initialSize * 0.5;
                  const styleY = posY - initialSize * 0.5;
                  const moveX = width * 0.5 - posX;
                  const moveY = height * 0.5 - posY;
                  __chunk_1.writeTask(() => {
                      const div = document.createElement('div');
                      div.classList.add('ripple-effect');
                      const style = div.style;
                      style.top = styleY + 'px';
                      style.left = styleX + 'px';
                      style.width = style.height = initialSize + 'px';
                      style.setProperty('--final-scale', `${finalScale}`);
                      style.setProperty('--translate-end', `${moveX}px, ${moveY}px`);
                      const container = this.el.shadowRoot || this.el;
                      container.appendChild(div);
                      setTimeout(() => {
                          resolve(() => {
                              removeRipple(div);
                          });
                      }, 225 + 100);
                  });
              });
          });
      }
      get unbounded() {
          return this.type === 'unbounded';
      }
      hostData() {
          const mode = __chunk_1.getIonMode(this);
          return {
              role: 'presentation',
              class: {
                  [mode]: true,
                  'unbounded': this.unbounded
              }
          };
      }
      get el() { return __chunk_1.getElement(this); }
      render() { return __chunk_1.h(__chunk_1.Host, this.hostData()); }
      static get style() { return ":host{left:0;right:0;top:0;bottom:0;position:absolute;contain:strict;pointer-events:none}:host(.unbounded){contain:layout size style}.ripple-effect{border-radius:50%;position:absolute;background-color:currentColor;color:inherit;contain:strict;opacity:0;-webkit-animation:rippleAnimation 225ms forwards,fadeInAnimation 75ms forwards;animation:rippleAnimation 225ms forwards,fadeInAnimation 75ms forwards;will-change:transform,opacity;pointer-events:none}.fade-out{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale,1));transform:translate(var(--translate-end)) scale(var(--final-scale,1));-webkit-animation:fadeOutAnimation .15s forwards;animation:fadeOutAnimation .15s forwards}\@-webkit-keyframes rippleAnimation{0%{-webkit-animation-timing-function:cubic-bezier(.4,0,.2,1);animation-timing-function:cubic-bezier(.4,0,.2,1);-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale,1));transform:translate(var(--translate-end)) scale(var(--final-scale,1))}}\@keyframes rippleAnimation{0%{-webkit-animation-timing-function:cubic-bezier(.4,0,.2,1);animation-timing-function:cubic-bezier(.4,0,.2,1);-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale,1));transform:translate(var(--translate-end)) scale(var(--final-scale,1))}}\@-webkit-keyframes fadeInAnimation{0%{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:.16}}\@keyframes fadeInAnimation{0%{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:.16}}\@-webkit-keyframes fadeOutAnimation{0%{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:.16}to{opacity:0}}\@keyframes fadeOutAnimation{0%{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:.16}to{opacity:0}}"; }
  }
  function removeRipple(ripple) {
      ripple.classList.add('fade-out');
      setTimeout(() => {
          ripple.remove();
      }, 200);
  }
  const PADDING = 10;
  const INITIAL_ORIGIN_SCALE = 0.5;
  
  exports.ion_ripple_effect = RippleEffect;
  