'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-a48c06e5.js');

const Image = class {
  constructor(hostRef) {
    index.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 Promise.resolve().then(function () { return require('./style-955ebe54.js'); }).then(function (n) { return n.style; })).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 (index.h(index.Host, { as: "image", alt: this.alt }, index.h("img", Object.assign({}, srcProps, { alt: this.alt, class: this.hash }))));
  }
  get el() { return index.getElement(this); }
};

exports.corejam_image = Image;
