import { Component, h, Prop, Element } from '@stencil/core';
export class TeliaBannerBillboard {
  constructor() {
    /** Alternative text for background image */
    this.imgAlt = ' ';
    this.dataTrackingId = 'telia-banner-billboard';
  }
  render() {
    const componentClass = 'telia-banner-billboard';
    const heroClasses = {
      [componentClass]: true,
      [componentClass + `--dark`]: this.dark,
    };
    return (h("div", { class: componentClass + `__wrapper` },
      !!this.logotypeSrc && (h("div", { class: componentClass + '__logotype' },
        h("telia-image", { alt: " ", src: this.logotypeSrc }))),
      h("div", { class: heroClasses },
        h("div", { class: componentClass + '__row' },
          h("div", { class: componentClass + '__media-col' },
            h("div", { class: componentClass + '__media-container' }, 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 })))),
          h("div", { class: componentClass + '__content-col' },
            h("div", { class: componentClass + '__content-container' },
              h("slot", null)),
            !!this.legalText && (h("telia-p", { class: componentClass + '__legal', variant: 'additional-100' }, this.legalText)))),
        h("telia-vst", { dataTrackingId: this.dataTrackingId }))));
  }
  static get is() { return "telia-banner-billboard"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["telia-banner-billboard.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["telia-banner-billboard.css"]
  }; }
  static get properties() { return {
    "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 background image"
      },
      "attribute": "img-alt",
      "reflect": false,
      "defaultValue": "' '"
    },
    "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
    },
    "dark": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Toggle dark mode on billboard"
      },
      "attribute": "dark",
      "reflect": false
    },
    "legalText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Legal text shown in bottom right corner"
      },
      "attribute": "legal-text",
      "reflect": false
    },
    "logotypeSrc": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Image src for logotype"
      },
      "attribute": "logotype-src",
      "reflect": false
    },
    "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"; }
}
