import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { d as defineCustomElement$1 } from './telia-vst2.js';

const largeScreen = 1024;
const mediumScreen = 600;

const teliaImageCss = ".telia-image{display:block;max-height:100%;max-width:100%}.telia-image img{max-height:100%;max-width:100%}.telia-image--source{max-width:inherit}.telia-image--img{max-width:inherit}.telia-image--scalable img,.telia-image--scalable{height:100%;width:100%}.telia-image--scalable.telia-image--object-fit-contain img{object-fit:contain}.telia-image--scalable.telia-image--object-fit-cover img{object-fit:cover}";

const TeliaImage = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    /** Controls the 'object-fit' of the image. Use to crop image (fill
     * container) or scale image to fill contaoner but not crop it on any side.
     */
    this.imageCrop = 'cover';
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-image';
    this.mediumSize = mediumScreen - 1;
    this.largeSize = largeScreen - 1;
    this.baseClass = 'telia-image';
  }
  render() {
    const classes = {
      [this.baseClass]: true,
      [`${this.baseClass}--${this.variant}`]: !!this.variant,
      [`${this.baseClass}--object-fit-${this.imageCrop}`]: true,
    };
    return (h("picture", { class: classes }, this.smallSet && (h("source", { media: '(max-width:' + this.mediumSize + 'px)', srcSet: this.smallSet })), this.mediumSet && (h("source", { media: '(max-width:' + this.largeSize + 'px)', srcSet: this.mediumSet })), h("img", { src: this.src, alt: this.alt }), h("telia-vst", { dataTrackingId: this.dataTrackingId })));
  }
  static get style() { return teliaImageCss; }
}, [0, "telia-image", {
    "dataTestid": [1, "data-testid"],
    "alt": [1],
    "src": [1],
    "smallSet": [1, "small-set"],
    "mediumSet": [1, "medium-set"],
    "variant": [1],
    "imageCrop": [1, "image-crop"]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["telia-image", "telia-vst"];
  components.forEach(tagName => { switch (tagName) {
    case "telia-image":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, TeliaImage);
      }
      break;
    case "telia-vst":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}
defineCustomElement();

export { TeliaImage as T, defineCustomElement as d };
