import { Component, h, Prop, Element } from '@stencil/core';
export class TeliaHeroBanner {
  constructor() {
    /** Controls how the image is scaled in the image container. If image should not be cropped,
     * set to 'contain'.  */
    this.backgroundCrop = 'cover';
    /** Enable video */
    this.dataTrackingId = 'telia-hero-banner';
  }
  render() {
    const componentClass = 'telia-hero-banner';
    const mediaColClasses = {
      'telia-hero-banner__media-col': true,
      [`telia-hero-banner__media-col--full-bg-${this.backgroundImageFrom}`]: !!this.backgroundImageFrom,
    };
    return (h("div", { class: "telia-hero-banner", style: this.backgroundColor
        ? { backgroundColor: this.backgroundColor }
        : null },
      h("div", { class: mediaColClasses }, this.enableVideo ? (h("div", { class: componentClass + '__video-container ' },
        h("slot", { name: "video" }))) : (h("telia-image", { dataTestid: this.imgDataTestId, src: this.imgSrc, alt: this.imgAlt, "small-set": this.imgSmallSet, variant: 'scalable', "medium-set": this.imgMediumSet, imageCrop: this.backgroundCrop }))),
      h("telia-grid", null,
        h("telia-row", null,
          h("telia-col", { width: 12, widthMd: 12, widthLg: ['sm', 'md', 'lg'].includes(this.backgroundImageFrom) ? 12 : 6 },
            h("div", { class: "telia-hero-banner__content-wrapper" },
              h("slot", null))))),
      h("telia-vst", { dataTrackingId: this.dataTrackingId })));
  }
  static get is() { return "telia-hero-banner"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["telia-hero-banner.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["telia-hero-banner.css"]
  }; }
  static get properties() { return {
    "backgroundImageFrom": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'sm' | 'md' | 'lg'",
        "resolved": "\"lg\" | \"md\" | \"sm\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Controls from which breakpoint the provided image covers the\nwhole background of the banner."
      },
      "attribute": "background-image-from",
      "reflect": false
    },
    "backgroundColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Sets the background color for the whole banner. Provide a valid\nCSS definition like '#aabbcc' or 'rgb(123,123,123)'"
      },
      "attribute": "background-color",
      "reflect": false
    },
    "imgDataTestId": {
      "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": "img-data-test-id",
      "reflect": false
    },
    "imgAlt": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Alternative text for image"
      },
      "attribute": "img-alt",
      "reflect": false
    },
    "imgSrc": {
      "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": "img-src",
      "reflect": false
    },
    "imgSmallSet": {
      "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": "img-small-set",
      "reflect": false
    },
    "imgMediumSet": {
      "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": "img-medium-set",
      "reflect": false
    },
    "backgroundCrop": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'cover' | 'contain'",
        "resolved": "\"contain\" | \"cover\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Controls how the image is scaled in the image container. If image should not be cropped,\nset to 'contain'."
      },
      "attribute": "background-crop",
      "reflect": false,
      "defaultValue": "'cover'"
    },
    "enableVideo": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Enable video"
      },
      "attribute": "enable-video",
      "reflect": false
    }
  }; }
  static get elementRef() { return "host"; }
}
