import { r as registerInstance, h, H as Host, a as getElement } from './index-419dc51e.js';

const Image = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.w = 12;
    this.maxWidth = 100;
    this.lazy = false;
    this.onIntersection = async (entries) => {
      for (const entry of entries) {
        if (entry.isIntersecting) {
          if (this.observer) {
            this.observer.disconnect();
          }
          if (entry.target.getAttribute("data-src")) {
            entry.target.setAttribute("src", entry.target.getAttribute("data-src"));
            entry.target.removeAttribute("data-src");
          }
        }
      }
    };
    this._relevantProps = ["w", "maxWidth", "h", "maxH", "fit", "rounded"];
  }
  componentDidLoad() {
    if ( this.lazy)
      this.setupObserver();
  }
  async componentWillLoad() {
    await this.computeStyles();
  }
  async computeStyles() {
    const hash = await (await import('./style-d0c60150.js').then(function (n) { return n.s; })).calculateStyles(this);
    this.hash = hash;
  }
  setupObserver() {
    const img = this.el.shadowRoot.querySelector("img");
    if (img) {
      this.observer = new IntersectionObserver(this.onIntersection);
      this.observer.observe(img);
    }
  }
  render() {
    const srcProps = {};
    this.lazy ? (srcProps["data-src"] = this.src) : (srcProps["src"] = this.src);
    return (h(Host, { as: "image", alt: this.alt }, h("img", Object.assign({}, srcProps, { alt: this.alt, class: this.hash }))));
  }
  get el() { return getElement(this); }
};

export { Image as corejam_image };
