import { r as registerInstance, h } from './index-c269755a.js';
import { H as HTag } from './HTag-1f86a384.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 = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /** 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)))));
  }
};
TeliaContentBanner.style = teliaContentBannerCss;

export { TeliaContentBanner as telia_content_banner };
