@zoff-tech/zt-bottom-drawer/dist/zt-bottom-drawer/p-a20a3a29.entry.js

Bottom Drawer / Web Component

import{r as t,i as n,w as o,h as e,e as i,H as s}from"./p-f6c816ce.js";import{g as a}from"./p-0b9b2444.js";const r=":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}}";const c=class{constructor(n){t(this,n);this.type="bounded"}async addRipple(t,e){return new Promise((i=>{n((()=>{const n=this.el.getBoundingClientRect();const s=n.width;const a=n.height;const r=Math.sqrt(s*s+a*a);const c=Math.max(a,s);const p=this.unbounded?c:r+f;const u=Math.floor(c*m);const d=p/u;let h=t-n.left;let b=e-n.top;if(this.unbounded){h=s*.5;b=a*.5}const y=h-u*.5;const g=b-u*.5;const v=s*.5-h;const w=a*.5-b;o((()=>{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=u+"px";n.setProperty("--final-scale",`${d}`);n.setProperty("--translate-end",`${v}px, ${w}px`);const o=this.el.shadowRoot||this.el;o.appendChild(t);setTimeout((()=>{i((()=>{l(t)}))}),225+100)}))}))}))}get unbounded(){return this.type==="unbounded"}render(){const t=a(this);return e(s,{role:"presentation",class:{[t]:true,unbounded:this.unbounded}})}get el(){return i(this)}};const l=t=>{t.classList.add("fade-out");setTimeout((()=>{t.remove()}),200)};const f=10;const m=.5;c.style=r;export{c as ion_ripple_effect};
//# sourceMappingURL=p-a20a3a29.entry.js.map