'use strict';

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

const index = require('./index-3e5ae956.js');
const ionicGlobal = require('./ionic-global-81d6a4bb.js');
const helpers = require('./helpers-905b0d22.js');

const fallbackCss = "floodteam-fallback{font-family:var(\n    --floodteam-error-font-family,\n    var(--ion-font-family, Arial, Helvetica, sans-serif)\n  )}floodteam-fallback .fallback-wrapper ion-icon{display:block;margin:var(--floodteam-fallback-icon-margin, 0 auto);padding:var(--floodteam-fallback-icon-padding, 0);height:var(\n    --floodteam-fallback-icon-height,\n    var(--floodteam-fallback-icon-size, 150px)\n  );width:var(\n    --floodteam-fallback-icon-width,\n    var(--floodteam-fallback-icon-size, 150px)\n  );color:var(\n    --floodteam-fallback-icon-color,\n    var(--floodteam-fallback-color, #bdbdbd)\n  )}floodteam-fallback .fallback-wrapper p{display:block;padding:var(--floodteam-fallback-message-padding, 0);margin:var(--floodteam-fallback-message-margin, 0);font-size:var(--floodteam-fallback-message-font-size, 14px);color:var(\n    --floodteam-fallback-message-color,\n    var(--floodteam-fallback-color, #999)\n  );font-weight:var(--floodteam-fallback-message-font-weight, bold);text-align:var(--floodteam-fallback-message-text-align, center)}";

const Fallback = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.icon = undefined;
    this.message = undefined;
  }
  render() {
    return (index.h("div", { class: "fallback-wrapper" }, this.icon ? index.h("ion-icon", { name: this.icon }) : null, index.h("p", null, this.message)));
  }
};
Fallback.style = fallbackCss;

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

const Img = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.ionImgWillLoad = index.createEvent(this, "ionImgWillLoad", 7);
    this.ionImgDidLoad = index.createEvent(this, "ionImgDidLoad", 7);
    this.ionError = index.createEvent(this, "ionError", 7);
    this.inheritedAttributes = {};
    this.onLoad = () => {
      this.ionImgDidLoad.emit();
    };
    this.onError = () => {
      this.ionError.emit();
    };
  }
  srcChanged() {
    this.addIO();
  }
  componentWillLoad() {
    this.inheritedAttributes = helpers.inheritAttributes(this.el, ['draggable']);
  }
  componentDidLoad() {
    this.addIO();
  }
  addIO() {
    if (this.src === undefined) {
      return;
    }
    if (typeof window !== 'undefined' &&
      'IntersectionObserver' in window &&
      'IntersectionObserverEntry' in window &&
      'isIntersecting' in window.IntersectionObserverEntry.prototype) {
      this.removeIO();
      this.io = new IntersectionObserver((data) => {
        /**
         * On slower devices, it is possible for an intersection observer entry to contain multiple
         * objects in the array. This happens when quickly scrolling an image into view and then out of
         * view. In this case, the last object represents the current state of the component.
         */
        if (data[data.length - 1].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.loadError = this.onError;
    this.loadSrc = this.src;
    this.ionImgWillLoad.emit();
  }
  removeIO() {
    if (this.io) {
      this.io.disconnect();
      this.io = undefined;
    }
  }
  render() {
    const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
    const { draggable } = inheritedAttributes;
    return (index.h(index.Host, { class: ionicGlobal.getIonMode(this) }, index.h("img", { decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
  }
  get el() { return index.getElement(this); }
  static get watchers() { return {
    "src": ["srcChanged"]
  }; }
};
/**
 * Enumerated strings must be set as booleans
 * as Stencil will not render 'false' in the DOM.
 * The need to explicitly render draggable="true"
 * as only certain elements are draggable by default.
 * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable.
 */
const isDraggable = (draggable) => {
  switch (draggable) {
    case 'true':
      return true;
    case 'false':
      return false;
    default:
      return undefined;
  }
};
Img.style = imgCss;

exports.floodteam_fallback = Fallback;
exports.ion_img = Img;
