UNPKG

@ionic/core

Version:
4 lines 3.95 kB
import{__awaiter,__generator}from"tslib"; /*! * (C) Ionic http://ionicframework.com - MIT License */import{r as registerInstance,d as readTask,w as writeTask,h,f as getElement,e as Host}from"./index-527b9e34.js";import{b as getIonMode}from"./ionic-global-ca86cf32.js";var rippleEffectCss=":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}}";var IonRippleEffectStyle0=rippleEffectCss;var RippleEffect=function(){function t(t){registerInstance(this,t);this.type="bounded"}t.prototype.addRipple=function(t,n){return __awaiter(this,void 0,void 0,(function(){var a=this;return __generator(this,(function(i){return[2,new Promise((function(i){readTask((function(){var e=a.el.getBoundingClientRect();var r=e.width;var o=e.height;var s=Math.sqrt(r*r+o*o);var f=Math.max(o,r);var c=a.unbounded?f:s+PADDING;var l=Math.floor(f*INITIAL_ORIGIN_SCALE);var m=c/l;var u=t-e.left;var p=n-e.top;if(a.unbounded){u=r*.5;p=o*.5}var v=u-l*.5;var d=p-l*.5;var b=r*.5-u;var w=o*.5-p;writeTask((function(){var t=document.createElement("div");t.classList.add("ripple-effect");var n=t.style;n.top=d+"px";n.left=v+"px";n.width=n.height=l+"px";n.setProperty("--final-scale","".concat(m));n.setProperty("--translate-end","".concat(b,"px, ").concat(w,"px"));var e=a.el.shadowRoot||a.el;e.appendChild(t);setTimeout((function(){i((function(){removeRipple(t)}))}),225+100)}))}))}))]}))}))};Object.defineProperty(t.prototype,"unbounded",{get:function(){return this.type==="unbounded"},enumerable:false,configurable:true});t.prototype.render=function(){var t;var n=getIonMode(this);return h(Host,{key:"40c7f73e7f5f67e29f83e1236a61c6e1c9943c42",role:"presentation",class:(t={},t[n]=true,t.unbounded=this.unbounded,t)})};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();var removeRipple=function(t){t.classList.add("fade-out");setTimeout((function(){t.remove()}),200)};var PADDING=10;var INITIAL_ORIGIN_SCALE=.5;RippleEffect.style=IonRippleEffectStyle0;export{RippleEffect as ion_ripple_effect};