@nent/core/dist/nent/n-content-reveal.entry.js

Functional elements to add routing, data-binding, dynamic HTML, declarative actions, audio, video, and so much more. Supercharge static HTML files into web apps without script or builds.

/*!
 * NENT 2022
 */
import{r as t,h as i,a as s}from"./index-916ca544.js";const a=class{constructor(i){t(this,i),this.direction="up",this.delay=0,this.duration=500,this.animationDistance="30%",this.triggerDistance="33%"}componentDidLoad(){this.addIntersectionObserver(),this.subject.style.setProperty("--distance","right"===this.direction||"down"===this.direction?"-"+this.animationDistance:this.animationDistance)}addIntersectionObserver(){this.io=new window.IntersectionObserver((t=>{t[0].isIntersecting&&(this.subject.classList.add(`slide-${this.direction}`),this.removeIntersectionObserver())}),{threshold:parseFloat(this.triggerDistance)/100}),this.io.observe(this.subject)}removeIntersectionObserver(){var t;null===(t=this.io)||void 0===t||t.disconnect()}render(){return i("div",{ref:t=>this.subject=t,class:"n-reveal",style:{animationDuration:`${this.duration}ms`,animationDelay:`${this.delay}ms`}},i("slot",null))}disconnectedCallback(){this.removeIntersectionObserver()}get el(){return s(this)}};a.style=":host{display:block}@keyframes slide-up{0%{transform:translateY(var(--distance))}100%{opacity:1}}@keyframes slide-down{0%{transform:translateY(var(--distance))}100%{opacity:1}}@keyframes slide-right{0%{transform:translateX(var(--distance))}100%{opacity:1}}@keyframes slide-left{0%{transform:translateX(var(--distance))}100%{opacity:1}}.n-reveal{opacity:0;animation-fill-mode:forwards;animation-timing-function:ease;animation-duration:500ms}.slide-up{animation-name:slide-up}.slide-down{animation-name:slide-down}.slide-right{animation-name:slide-right}.slide-left{animation-name:slide-right}";export{a as n_content_reveal}