import { r as i, h as n, g as a } from "./index-b7bbd57e-BBUBsGhp.js";
const o = ":host{display:block}.Hidden{opacity:0;transition:opacity 0.5s ease-in-out}.Visible{opacity:1;transition:opacity 0.5s ease-in-out}", r = o, h = class {
  constructor(e) {
    i(this, e), this.src = void 0, this.width = void 0, this.height = void 0, this.alt = void 0, this.imgClass = "", this.styles = void 0, this.detectDistance = "200px", this.imgLoaded = !1, this.shouldLoad = !1;
  }
  handleSrc() {
    if (!this.shouldLoad)
      return;
    const e = new Image();
    e.src = this.src, e.onload = () => {
      this.image && (this.image.src = this.src, this.imgLoaded = !0, this.el.dispatchEvent(new CustomEvent("load", { bubbles: !0 })));
    };
  }
  componentDidLoad() {
    "IntersectionObserver" in window ? (this.el.__uxComponent = this, window.EMUxObserver || (window.EMUxObserver = new IntersectionObserver((e) => {
      e.forEach((t) => {
        if (t.isIntersecting) {
          const s = t.target.__uxComponent;
          s && (s.shouldLoad = !0, s.handleSrc()), window.EMUxObserver.unobserve(t.target);
        }
      });
    }, { rootMargin: this.detectDistance })), window.EMUxObserver.observe(this.el)) : (this.shouldLoad = !0, this.handleSrc());
  }
  render() {
    return n("img", { key: "2bb4dc391fc2f753514103e91c0abf065de3236a", ref: (e) => this.image = e, style: this.styles, class: `${this.imgClass} ${this.imgLoaded ? "Visible" : "Hidden"}`, alt: this.alt, width: this.width, height: this.height, loading: "lazy" });
  }
  get el() {
    return a(this);
  }
  static get watchers() {
    return {
      src: ["handleSrc"]
    };
  }
};
h.style = r;
export {
  h as U
};
