@proyecto26/animatable-component/dist/animatable-component/p-7870dd50.entry.js

Animate once, use Everywhere! 💫

import{r as a,c as t,h as i,g as n,H as e}from"./p-1d82498a.js";import{K as r,a as s,g as o}from"./p-a5cafa8b.js";function c(a,t){for(const i in t)t.hasOwnProperty(i)&&("id"===i?a.animateId=void 0:a[i]=void 0)}class l{constructor(a){this.animation=null,this.onStartAnimation=()=>{this.state.onStart.emit(this.element),void 0!==this.state.fromClassName&&(this.className=this.element.className,this.element.className=this.state.fromClassName)},this.onCancelAnimation=()=>{this.state.onCancel.emit(this.element),void 0!==this.state.fromClassName&&void 0!==this.className&&(this.element.className=this.className)},this.onFinishAnimation=()=>{const{element:a,state:t}=this;t.onFinish.emit(a),void 0!==t.toClassName&&(a.className=t.toClassName)},this.state=a}get currentAnimation(){return this.animation||this.loadAnimation()}set currentAnimation(a){this.animation=a}loadAnimation(){const{element:a,state:t}=this,i=function(a,t){const i=t.keyFrames||t.animation&&r[t.animation]||t.keyFramesData&&JSON.parse(t.keyFramesData)||[],n=function(a){const t=a.options||a.optionsData&&JSON.parse(a.optionsData)||{};void 0!==a.delay&&(t.delay=a.delay),void 0!==a.duration&&(t.duration=a.duration),void 0!==a.direction&&(t.direction=a.direction),void 0!==a.composite&&(t.composite=a.composite);const i=a.easing||t.easing;return t.easing=s[i]||i,void 0!==a.endDelay&&(t.endDelay=a.endDelay),void 0!==a.fill&&(t.fill=a.fill),void 0!==a.animateId&&(t.id=a.animateId),void 0!==a.iterations&&(t.iterations=a.iterations),void 0!==a.iterationStart&&(t.iterationStart=a.iterationStart),void 0!==a.iterationComposite&&(t.iterationComposite=a.iterationComposite),t}(t),e=a.animate(i,n);return e.pause(),void 0!==t.currentTime&&(e.currentTime=t.currentTime),void 0!==t.startTime&&(e.startTime=t.startTime),e}(a,t);return i.addEventListener("finish",this.onFinishAnimation),i.addEventListener("cancel",this.onCancelAnimation),this.animation=i}clearAnimation(){null!==this.animation&&(this.animation.removeEventListener("finish",this.onFinishAnimation),this.animation.removeEventListener("cancel",this.onCancelAnimation),this.animation=null)}destroyAnimation(){if(null===this.animation)return;const a=this.animation;this.clearAnimation(),a.cancel()}playAnimation(){("running"!==this.currentAnimation.playState||this.isUpdatingState)&&(this.isUpdatingState&&this.destroyAnimation(),this.currentAnimation.play(),this.onStartAnimation())}setState(a,t){this.isUpdatingState=!0,this.element=a,this.state=t}savedState(){this.state.autoPlay&&this.playAnimation(),this.isUpdatingState=!1}}const h=class{constructor(i){a(this,i),this.onStart=t(this,"start",3),this.onFinish=t(this,"finish",3),this.onCancel=t(this,"cancel",3),this.manager=null,this.autoPlay=!1}get element(){return null!==(a=this.el).shadowRoot?a:a.firstElementChild||a.children.length&&a.children[0]||a;var a}animationDidChangeHandler(a){this.keyFrames=o(a)}keyFramesDidChangeHandler(a){void 0!==a&&(this.keyFrames=JSON.parse(a))}optionsDidChangeHandler(a){c(this,a)}optionsDataDidChangeHandler(a){void 0!==a&&(this.options=JSON.parse(a))}setCurrenTime(a){this.manager.currentAnimation.currentTime=a}async getCurrentTime(){return Promise.resolve(this.manager.currentAnimation.currentTime)}setStartTime(a){this.manager.currentAnimation.startTime=a}async getStartTime(){return Promise.resolve(this.manager.currentAnimation.startTime)}async getPending(){return Promise.resolve(this.manager.currentAnimation.pending)}setPlaybackRate(a){this.manager.currentAnimation.playbackRate=a}async getPlaybackRate(){return Promise.resolve(this.manager.currentAnimation.playbackRate)}async getPlayState(){return Promise.resolve(this.manager.currentAnimation.playState)}async cancel(){this.manager.currentAnimation.cancel()}async finish(){this.manager.currentAnimation.finish()}async pause(){this.manager.currentAnimation.pause()}async play(){this.manager.playAnimation()}async reverse(){this.manager.currentAnimation.reverse()}async clear(){this.manager.clearAnimation()}async destroy(){null!==this.manager&&this.manager.destroyAnimation()}connectedCallback(){this.manager=new l(this),this.manager.setState(this.element,this)}componentDidLoad(){this.manager.savedState()}componentShouldUpdate(){this.manager.setState(this.element,this)}componentDidUpdate(){this.manager.savedState()}disconnectedCallback(){this.destroy()}render(){return i("slot",null)}get el(){return n(this)}static get watchers(){return{animation:["animationDidChangeHandler"],keyFramesData:["keyFramesDidChangeHandler"],options:["optionsDidChangeHandler"],optionsData:["optionsDataDidChangeHandler"],currentTime:["setCurrenTime"],startTime:["setStartTime"],playbackRate:["setPlaybackRate"]}}},d=class{constructor(i){a(this,i),this.onStart=t(this,"start",3),this.onFinish=t(this,"finish",3),this.onCancel=t(this,"cancel",3),this.manager=null,this.autoPlay=!1}get element(){return this.el.shadowRoot.querySelector(":host > div")}animationDidChangeHandler(a){this.keyFrames=o(a)}keyFramesDidChangeHandler(a){void 0!==a&&(this.keyFrames=JSON.parse(a))}optionsDidChangeHandler(a){c(this,a)}optionsDataDidChangeHandler(a){void 0!==a&&(this.options=JSON.parse(a))}setCurrenTime(a){this.manager.currentAnimation.currentTime=a}async getCurrentTime(){return Promise.resolve(this.manager.currentAnimation.currentTime)}setStartTime(a){this.manager.currentAnimation.startTime=a}async getStartTime(){return Promise.resolve(this.manager.currentAnimation.startTime)}async getPending(){return Promise.resolve(this.manager.currentAnimation.pending)}setPlaybackRate(a){this.manager.currentAnimation.playbackRate=a}async getPlaybackRate(){return Promise.resolve(this.manager.currentAnimation.playbackRate)}async getPlayState(){return Promise.resolve(this.manager.currentAnimation.playState)}async cancel(){this.manager.currentAnimation.cancel()}async finish(){this.manager.currentAnimation.finish()}async pause(){this.manager.currentAnimation.pause()}async play(){this.manager.playAnimation()}async reverse(){this.manager.currentAnimation.reverse()}async clear(){this.manager.clearAnimation()}async destroy(){null!==this.manager&&this.manager.destroyAnimation()}connectedCallback(){this.manager=new l(this)}componentDidLoad(){this.manager.setState(this.element,this),this.manager.savedState()}componentShouldUpdate(){this.manager.setState(this.element,this)}componentDidUpdate(){this.manager.savedState()}disconnectedCallback(){this.destroy()}render(){return i(e,null,i("div",null,i("div",{class:"front face"},i("slot",{name:"front-face"})),i("div",{class:"back face"},i("slot",{name:"back-face"})),i("div",{class:"right face"},i("slot",{name:"right-face"})),i("div",{class:"left face"},i("slot",{name:"left-face"})),i("div",{class:"top face"},i("slot",{name:"top-face"})),i("div",{class:"bottom face"},i("slot",{name:"bottom-face"})),i("slot",null)))}get el(){return n(this)}static get watchers(){return{animation:["animationDidChangeHandler"],keyFramesData:["keyFramesDidChangeHandler"],options:["optionsDidChangeHandler"],optionsData:["optionsDataDidChangeHandler"],currentTime:["setCurrenTime"],startTime:["setStartTime"],playbackRate:["setPlaybackRate"]}}};d.style=":host{--size:var(--animatable-cube-size, var(--animatable-cube-width, var(--animatable-cube-height, 100px)));--perspective:var(--animatable-cube-perspective, 1000px);--perspective-origin:var(--animatable-cube-perspective-origin, 50% 50%);--display:var(--animatable-cube-display, flex);--transition-property:var(--animatable-cube-transition-property, (width, height));--transition-duration:var(--animatable-cube-transition-duration, 0);--transition-delay:var(--animatable-cube-transition-delay, 0);--transition-timing-function:var(--animatable-cube-transition-timing-function, initial);--align-items:var(--animatable-cube-align-items, center);--justify-content:var(--animatable-cube-justify-content, center);--margin:var(--animatable-cube-margin, 0);--padding:var(--animatable-cube-padding, 0);--face-border:var(--animatable-cube-face-border, none);--face-background:var(--animatable-cube-face-background, white);--face-background-size:var(--animatable-cube-face-background-size, 100% 100%);--face-animation:var(\n    --animatable-cube-face-animation,\n    backgroundAnimation\n    var(--animatable-cube-face-animation-duration, 0s)\n    var(--animatable-cube-face-animation-timing-function, initial)\n    var(--animatable-cube-face-animation-delay, 0s)\n    var(--animatable-cube-face-animation-iteration-count, infinite)\n    var(--animatable-cube-face-animation-direction, alternate)\n  );--face-size:calc(var(--size)/2);--face-transform-origin:var(--animatable-cube-face-transform-origin, center center);perspective:var(--perspective);perspective-origin:var(--perspective-origin);padding:var(--padding);margin:var(--margin);display:var(--display);align-items:var(--align-items);justify-content:var(--justify-content);width:var(--size);height:var(--size);transition-property:var(--transition-property);transition-duration:var(--transition-duration);transition-delay:var(--transition-delay);transition-timing-function:var(--transition-timing-function)}:host>div{display:block;height:100%;width:100%;max-width:100%;position:relative;background:transparent;transform-style:preserve-3d;transform:var(--animatable-cube-transform, translateZ(-var(--face-size)));transform-origin:var(--animatable-cube-transform-origin, initial);transition:transform var(--transition-duration)}.face{background:var(--animatable-cube-face-background, var(--face-background));position:absolute;height:100%;width:100%;border:var(--face-border);transition:transform var(--transition-duration);transform-origin:var(--face-transform-origin)}.front{transform:rotateY(0deg)\n    translateZ(var(--face-size));will-change:transform;background:var(--animatable-cube-front-face-background, var(--face-background));background-size:var(--animatable-cube-front-face-background-size, var(--face-background-size));animation:var(--animatable-cube-front-face-animation, var(--face-animation))}.back{transform:rotateY(180deg)\n    translateZ(var(--face-size));will-change:transform;background:var(--animatable-cube-back-face-background, var(--face-background));background-size:var(--animatable-cube-back-face-background-size, var(--face-background-size));animation:var(--animatable-cube-back-face-animation, var(--face-animation))}.right{transform:rotateY(90deg)\n    translateZ(var(--face-size));will-change:transform;background:var(--animatable-cube-right-face-background, var(--face-background));background-size:var(--animatable-cube-right-face-background-size, var(--face-background-size));animation:var(--animatable-cube-right-face-animation, var(--face-animation))}.left{transform:rotateY(-90deg)\n    translateZ(var(--face-size));will-change:transform;background:var(--animatable-cube-left-face-background, var(--face-background));background-size:var(--animatable-cube-left-face-background-size, var(--face-background-size));animation:var(--animatable-cube-left-face-animation, var(--face-animation))}.top{transform:rotateX(90deg)\n    translateZ(var(--face-size));will-change:transform;background:var(--animatable-cube-top-face-background, var(--face-background));background-size:var(--animatable-cube-top-face-background-size, var(--face-background-size));animation:var(--animatable-cube-top-face-animation, var(--face-animation))}.bottom{transform:rotateX(-90deg)\n    translateZ(var(--face-size));will-change:transform;background:var(--animatable-cube-bottom-face-background, var(--face-background));background-size:var(--animatable-cube-bottom-face-background-size, var(--face-background-size));animation:var(--animatable-cube-bottom-face-animation, var(--face-animation))}@keyframes backgroundAnimation{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}";export{h as animatable_component,d as animatable_cube}