UNPKG

@ionic/core

Version:
4 lines • 3.45 kB
/*! * (C) Ionic http://ionicframework.com - MIT License */ import{d as t,H as n,k as i,w as a,h as e,t as o,f as r}from"./p-Ct2aBEue.js";import{b as s}from"./p-HthJZjZ6.js";const m=t(class extends n{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.type="bounded"}async addRipple(t,n){return new Promise((e=>{i((()=>{const i=this.el.getBoundingClientRect(),o=i.width,r=i.height,s=Math.sqrt(o*o+r*r),m=Math.max(r,o),u=this.unbounded?m:s+f,p=Math.floor(m*l),d=u/p;let b=t-i.left,k=n-i.top;this.unbounded&&(b=.5*o,k=.5*r);const w=b-.5*p,y=k-.5*p,h=.5*o-b,g=.5*r-k;a((()=>{const t=document.createElement("div");t.classList.add("ripple-effect");const n=t.style;n.top=y+"px",n.left=w+"px",n.width=n.height=p+"px",n.setProperty("--final-scale",`${d}`),n.setProperty("--translate-end",`${h}px, ${g}px`),(this.el.shadowRoot||this.el).appendChild(t),setTimeout((()=>{e((()=>{c(t)}))}),325)}))}))}))}get unbounded(){return"unbounded"===this.type}render(){const t=s(this);return e(r,{key:"371350cb76e98338ef7467191aaaf817b1298b3f",role:"presentation",class:{[t]:!0,unbounded:this.unbounded}})}get el(){return this}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:225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;animation:225ms rippleAnimation forwards, 75ms fadeInAnimation 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:150ms fadeOutAnimation forwards;animation:150ms fadeOutAnimation forwards}@-webkit-keyframes rippleAnimation{from{-webkit-animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);animation-timing-function:cubic-bezier(0.4, 0, 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{from{-webkit-animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);animation-timing-function:cubic-bezier(0.4, 0, 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{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:0.16}}@keyframes fadeInAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:0.16}}@-webkit-keyframes fadeOutAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0.16}to{opacity:0}}@keyframes fadeOutAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0.16}to{opacity:0}}"}},[1,"ion-ripple-effect",{type:[1],addRipple:[64]}]),c=t=>{t.classList.add("fade-out"),setTimeout((()=>{t.remove()}),200)},f=10,l=.5;function u(){"undefined"!=typeof customElements&&["ion-ripple-effect"].forEach((t=>{"ion-ripple-effect"===t&&(customElements.get(o(t))||customElements.define(o(t),m))}))}export{m as R,u as d}