-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy path5966.b85d6652bcae61a4.js
2 lines (2 loc) · 3.1 KB
/
5966.b85d6652bcae61a4.js
1
2
"use strict";(self.webpackChunkapp=self.webpackChunkapp||[]).push([[5966],{5966:(D,d,i)=>{i.r(d),i.d(d,{ion_ripple_effect:()=>u});var b=i(3918),n=i(3426),h=i(5194);const u=class{constructor(t){(0,n.r)(this,t),this.type="bounded"}addRipple(t,k){var a=this;return(0,b.Z)(function*(){return new Promise(v=>{(0,n.e)(()=>{const r=a.el.getBoundingClientRect(),o=r.width,s=r.height,A=Math.sqrt(o*o+s*s),p=Math.max(s,o),E=a.unbounded?p:A+y,l=Math.floor(p*g),I=E/l;let m=t-r.left,f=k-r.top;a.unbounded&&(m=.5*o,f=.5*s);const O=m-.5*l,C=f-.5*l,P=.5*o-m,R=.5*s-f;(0,n.w)(()=>{const c=document.createElement("div");c.classList.add("ripple-effect");const e=c.style;e.top=C+"px",e.left=O+"px",e.width=e.height=l+"px",e.setProperty("--final-scale",`${I}`),e.setProperty("--translate-end",`${P}px, ${R}px`),(a.el.shadowRoot||a.el).appendChild(c),setTimeout(()=>{v(()=>{w(c)})},325)})})})})()}get unbounded(){return"unbounded"===this.type}render(){const t=(0,h.b)(this);return(0,n.h)(n.H,{role:"presentation",class:{[t]:!0,unbounded:this.unbounded}})}get el(){return(0,n.f)(this)}},w=t=>{t.classList.add("fade-out"),setTimeout(()=>{t.remove()},200)},y=10,g=.5;u.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;-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}}"}}]);
//# sourceMappingURL=5966.b85d6652bcae61a4.js.map