p-cf1fcf7a.entry.js 1.9 KB
Newer Older
1
import{r as t,e as n,w as e,h as a,c as o,H as i}from"./p-38dcedc4.js";import{g as r}from"./p-202e7480.js";const s=class{constructor(n){t(this,n),this.type="bounded"}async addRipple(t,a){return new Promise((o=>{n((()=>{const n=this.el.getBoundingClientRect(),i=n.width,r=n.height,s=Math.sqrt(i*i+r*r),f=Math.max(r,i),p=this.unbounded?f:s+l,d=Math.floor(f*m),u=p/d;let h=t-n.left,b=a-n.top;this.unbounded&&(h=.5*i,b=.5*r);const y=h-.5*d,g=b-.5*d,v=.5*i-h,w=.5*r-b;e((()=>{const t=document.createElement("div");t.classList.add("ripple-effect");const n=t.style;n.top=g+"px",n.left=y+"px",n.width=n.height=d+"px",n.setProperty("--final-scale",`${u}`),n.setProperty("--translate-end",`${v}px, ${w}px`),(this.el.shadowRoot||this.el).appendChild(t),setTimeout((()=>{o((()=>{c(t)}))}),325)}))}))}))}get unbounded(){return"unbounded"===this.type}render(){const t=r(this);return a(i,{role:"presentation",class:{[t]:!0,unbounded:this.unbounded}})}get el(){return o(this)}},c=t=>{t.classList.add("fade-out"),setTimeout((()=>{t.remove()}),200)},l=10,m=.5;s.style=":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;animation:225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;will-change:transform, opacity;pointer-events:none}.fade-out{transform:translate(var(--translate-end)) scale(var(--final-scale, 1));animation:150ms fadeOutAnimation forwards}@keyframes rippleAnimation{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:scale(1)}to{transform:translate(var(--translate-end)) scale(var(--final-scale, 1))}}@keyframes fadeInAnimation{from{animation-timing-function:linear;opacity:0}to{opacity:0.16}}@keyframes fadeOutAnimation{from{animation-timing-function:linear;opacity:0.16}to{opacity:0}}";export{s as ion_ripple_effect}