import { r as registerInstance, h } from './index-c269755a.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 = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /** 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 })));
  }
};
TeliaImage.style = teliaImageCss;

export { TeliaImage as telia_image };
