import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { H as HTag, d as defineCustomElement$7 } from './telia-heading2.js';
import { d as defineCustomElement$6 } from './telia-image2.js';
import { d as defineCustomElement$5 } from './telia-link2.js';
import { d as defineCustomElement$4 } from './telia-style-link2.js';
import { d as defineCustomElement$3 } from './telia-text-spacing2.js';
import { d as defineCustomElement$2 } from './telia-vst2.js';

const teliaContentBannerCss = ".telia-content-banner{height:100%}.telia-content-banner:hover img{transform:scale(1.05)}.telia-content-banner__image{padding-bottom:calc(1.6rem * var(--voca-rem-multiplier))}@media screen and (min-width: 37.5em){.telia-content-banner__image{padding-bottom:calc(2.4rem * var(--voca-rem-multiplier))}}.telia-content-banner__image picture{border-radius:calc(0.8rem * var(--voca-rem-multiplier));height:calc(18rem * var(--voca-rem-multiplier));overflow:hidden;width:100%}@media screen and (min-width: 37.5em){.telia-content-banner__image picture{height:calc(20rem * var(--voca-rem-multiplier))}}@media screen and (min-width: 64em){.telia-content-banner__image picture{height:calc(36rem * var(--voca-rem-multiplier))}}.telia-content-banner__image img{transition:transform 0.25s cubic-bezier(0.45, 0, 0.52, 0.98)}.telia-content-banner__content{color:#222222;max-width:calc(64rem * var(--voca-rem-multiplier))}.telia-content-banner__heading{display:flex}";

const TeliaContentBanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    /** html tag for heading */
    this.headingTag = HTag.H2;
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-content-banner';
  }
  render() {
    const componentClass = 'telia-content-banner';
    return (h("telia-link", { silent: true, href: this.href, "data-testid": this.dataTestid }, h("telia-vst", { dataTrackingId: this.dataTrackingId }), h("article", { class: componentClass }, !!this.imgSrc && (h("div", { class: componentClass + '__image' }, h("telia-image", { src: this.imgSrc, "small-set": this.smallSet, "medium-set": this.mediumSet, alt: this.imgAlt, variant: 'scalable' }))), h("div", { class: componentClass + '__content' }, h("telia-text-spacing", null, h("telia-heading", { tag: 'h2', variant: 'title-400' }, h("span", { class: componentClass + '__heading' }, this.bannerHeading))), h("slot", null)))));
  }
  static get style() { return teliaContentBannerCss; }
}, [1, "telia-content-banner", {
    "dataTestid": [1, "data-testid"],
    "smallSet": [1, "small-set"],
    "mediumSet": [1, "medium-set"],
    "imgSrc": [1, "img-src"],
    "imgAlt": [1, "img-alt"],
    "href": [1],
    "bannerHeading": [1, "banner-heading"],
    "headingTag": [1, "heading-tag"]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["telia-content-banner", "telia-heading", "telia-image", "telia-link", "telia-style-link", "telia-text-spacing", "telia-vst"];
  components.forEach(tagName => { switch (tagName) {
    case "telia-content-banner":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, TeliaContentBanner$1);
      }
      break;
    case "telia-heading":
      if (!customElements.get(tagName)) {
        defineCustomElement$7();
      }
      break;
    case "telia-image":
      if (!customElements.get(tagName)) {
        defineCustomElement$6();
      }
      break;
    case "telia-link":
      if (!customElements.get(tagName)) {
        defineCustomElement$5();
      }
      break;
    case "telia-style-link":
      if (!customElements.get(tagName)) {
        defineCustomElement$4();
      }
      break;
    case "telia-text-spacing":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "telia-vst":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}
defineCustomElement$1();

const TeliaContentBanner = TeliaContentBanner$1;
const defineCustomElement = defineCustomElement$1;

export { TeliaContentBanner, defineCustomElement };
