import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';

const mdsImgCss = ".fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    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 })));
  }
  static get style() { return mdsImgCss; }
}, [1, "mds-img", {
    "alt": [1],
    "aspectRatio": [1, "aspect-ratio"],
    "crossorigin": [1],
    "height": [1],
    "loading": [1],
    "referrerpolicy": [1],
    "sizes": [1],
    "src": [1],
    "srcset": [1],
    "width": [1]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["mds-img"];
  components.forEach(tagName => { switch (tagName) {
    case "mds-img":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, MdsImg);
      }
      break;
  } });
}
defineCustomElement();

export { MdsImg as M, defineCustomElement as d };
