@nent/core/dist/components/n-content-reveal.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 { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';

const contentRevealCss = ":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}";

const ContentReveal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    /**
     * Direction the element moves when animating in
     */
    this.direction = 'up';
    /**
     * How long to delay the animation (ms)
     */
    this.delay = 0;
    /**
     * How long the animation runs (ms)
     */
    this.duration = 500;
    /**
     * How far the element moves in the animation (% of element width/height)
     */
    this.animationDistance = '30%';
    /**
     * How much of the element must be visible before it animates (% of element height)
     */
    this.triggerDistance = '33%';
  }
  componentDidLoad() {
    this.addIntersectionObserver();
    const animationDistance = this.direction === 'right' || this.direction === 'down'
      ? '-' + this.animationDistance
      : this.animationDistance;
    this.subject.style.setProperty('--distance', animationDistance);
  }
  /* istanbul ignore next */
  addIntersectionObserver() {
    this.io = new window.IntersectionObserver((data) => {
      if (data[0].isIntersecting) {
        this.subject.classList.add(`slide-${this.direction}`);
        this.removeIntersectionObserver();
      }
    }, {
      threshold: parseFloat(this.triggerDistance) / 100,
    });
    this.io.observe(this.subject);
  }
  removeIntersectionObserver() {
    var _a;
    (_a = this.io) === null || _a === void 0 ? void 0 : _a.disconnect();
  }
  render() {
    return (h("div", { ref: el => (this.subject = el), class: 'n-reveal', style: {
        animationDuration: `${this.duration}ms`,
        animationDelay: `${this.delay}ms`,
      } }, h("slot", null)));
  }
  disconnectedCallback() {
    this.removeIntersectionObserver();
  }
  get el() { return this; }
  static get style() { return contentRevealCss; }
}, [1, "n-content-reveal", {
    "direction": [1],
    "delay": [2],
    "duration": [2],
    "animationDistance": [1, "animation-distance"],
    "triggerDistance": [1, "trigger-distance"]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["n-content-reveal"];
  components.forEach(tagName => { switch (tagName) {
    case "n-content-reveal":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, ContentReveal);
      }
      break;
  } });
}

const NContentReveal = ContentReveal;
const defineCustomElement = defineCustomElement$1;

export { NContentReveal, defineCustomElement };