import { Component, h, Prop } from '@stencil/core';
import { mediumScreen, largeScreen } from '../../utils/breakpoints';
export class TeliaImage {
  constructor() {
    /** 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 is() { return "telia-image"; }
  static get originalStyleUrls() { return {
    "$": ["telia-image.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["telia-image.css"]
  }; }
  static get properties() { return {
    "dataTestid": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Test id set for web component host"
      },
      "attribute": "data-testid",
      "reflect": false
    },
    "alt": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Alternative text for image"
      },
      "attribute": "alt",
      "reflect": false
    },
    "src": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": true,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Specifies the path to the image that will be served to larger medias (above 1024 px)\nand as a fallback for legacy browsers"
      },
      "attribute": "src",
      "reflect": false
    },
    "smallSet": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Specifies the path to the image served to small medias (below 600 px)"
      },
      "attribute": "small-set",
      "reflect": false
    },
    "mediumSet": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Specifies the path to the image served to medium sized medias (between 600 and 1024 px)"
      },
      "attribute": "medium-set",
      "reflect": false
    },
    "variant": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "ImageVariant",
        "resolved": "\"default\" | \"scalable\"",
        "references": {
          "ImageVariant": {
            "location": "import",
            "path": "../../types/ImageVariant"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Adds variant of the image"
      },
      "attribute": "variant",
      "reflect": false
    },
    "imageCrop": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'cover' | 'contain'",
        "resolved": "\"contain\" | \"cover\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Controls the 'object-fit' of the image. Use to crop image (fill\ncontainer) or scale image to fill contaoner but not crop it on any side."
      },
      "attribute": "image-crop",
      "reflect": false,
      "defaultValue": "'cover'"
    }
  }; }
}
