import { r as registerInstance, c as createEvent, h, g as getElement } from './index-442cf464.js';

const imgCss = ":host{display:block;object-fit:contain}img{width:100%;height:100%;object-fit:inherit;object-position:inherit}";

const Img = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.luImgDidLoad = createEvent(this, "luImgDidLoad", 7);
  }
  srcChanged() {
    this.addIO();
  }
  componentDidLoad() {
    this.addIO();
  }
  addIO() {
    if (this.src === undefined) {
      return;
    }
    if ('IntersectionObserver' in window) {
      this.removeIO();
      this.io = new IntersectionObserver(data => {
        // because there will only ever be one instance
        // of the element we are observing
        // we can just use data[0]
        if (data[0].isIntersecting) {
          this.load();
          this.removeIO();
        }
      });
      this.io.observe(this.el);
    }
    else {
      // fall back to setTimeout for Safari and IE
      setTimeout(() => this.load(), 200);
    }
  }
  load() {
    this.loadSrc = this.src;
    this.luImgDidLoad.emit();
  }
  removeIO() {
    if (this.io) {
      this.io.disconnect();
      this.io = undefined;
    }
  }
  render() {
    return (h("img", { src: this.loadSrc, alt: this.alt, decoding: "async" }));
  }
  get el() { return getElement(this); }
  static get watchers() { return {
    "src": ["srcChanged"]
  }; }
};
Img.style = imgCss;

export { Img as lu_img };

//# sourceMappingURL=lu-img.entry.js.map