import { r as registerInstance, e as createEvent, h, f as Host } from './index-ee578edf.js';

const mdsImgCss = ".border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{display:flex;overflow:hidden;background-size:cover;background-position:center;background-repeat:no-repeat}img{width:100%}";

const MdsImg = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.loadError = createEvent(this, "loadError", 7);
    this.loadSuccess = createEvent(this, "loadSuccess", 7);
    this.aspectRatioModern = false;
    /**
     * Allow images from third-party sites that allow
     * cross-origin access to be used with canvas
     */
    this.crossorigin = 'use-credentials';
    /**
     * Specifies whether a browser should load an image immediately
     * or to defer loading of images until some conditions are met.
     */
    this.loading = 'lazy';
    /**
     * Specifies which referrer information to use when fetching an image.
     */
    this.referrerpolicy = 'no-referrer-when-downgrade';
    this.onError = (ev) => {
      const image = ev.target;
      this.loadError.emit(image);
    };
    this.onSuccess = (ev) => {
      const image = ev.target;
      this.loadSuccess.emit(image);
    };
  }
  aspectRatioPaddingTop() {
    const ratioBase = parseInt(this.aspectRatio.split('/')[1]);
    const ratioDivisor = parseInt(this.aspectRatio.split('/')[0]);
    return `${(ratioBase / ratioDivisor * 100).toFixed(2)}%`;
  }
  aspectRatioSanitized() {
    return `${this.aspectRatio.split('/')[0]} / ${this.aspectRatio.split('/')[1]}`;
  }
  getAspectRatio() {
    if (this.aspectRatioModern) {
      return { aspectRatio: this.aspectRatioSanitized() };
    }
    return { paddingTop: this.aspectRatioPaddingTop() };
  }
  render() {
    if (this.aspectRatio !== undefined) {
      return (h(Host, { style: Object.assign(Object.assign({}, this.getAspectRatio()), { backgroundImage: `url(${this.src})` }) }));
    }
    return (h(Host, null, h("img", { alt: this.alt,
      // crossorigin={this.crossorigin}
      height: this.height, loading: this.loading,
      // referrerpolicy={this.referrerpolicy}
      onError: this.onError, onLoad: this.onSuccess, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
  }
};
MdsImg.style = mdsImgCss;

export { MdsImg as mds_img };
