import { r as registerInstance, h, g as getElement } from './index-c269755a.js';

const teliaHeroBannerCss = ".telia-hero-banner{background-color:#ffffff;display:flex;flex-wrap:wrap;position:relative}@media screen and (min-width: 0){.telia-hero-banner .telia-hero-banner__media-col--full-bg-sm{height:100%;left:0;position:absolute;width:100%}}@media screen and (min-width: 37.5em){.telia-hero-banner .telia-hero-banner__media-col--full-bg-md{height:100%;left:0;position:absolute;width:100%}}@media screen and (min-width: 64em){.telia-hero-banner .telia-hero-banner__media-col--full-bg-lg{height:100%;left:0;position:absolute;width:100%}}@media screen and (min-width: 64em){.telia-hero-banner{height:100%;min-height:calc(47rem * var(--voca-rem-multiplier))}}.telia-hero-banner *{box-sizing:border-box}.telia-hero-banner__media-col{flex-shrink:0;height:calc(18rem * var(--voca-rem-multiplier));overflow:visible;width:100%}@media screen and (min-width: 37.5em){.telia-hero-banner__media-col{height:calc(33rem * var(--voca-rem-multiplier))}}@media screen and (min-width: 64em){.telia-hero-banner__media-col{height:100%;left:calc(50% + calc(2.4rem * var(--voca-rem-multiplier)) / 2);order:2;position:absolute;width:calc(50% - calc(2.4rem * var(--voca-rem-multiplier)) / 2)}}.telia-hero-banner__content-wrapper{display:flex;flex-direction:column;height:100%;justify-content:center;z-index:20}@media screen and (min-width: 0){.telia-hero-banner__content-wrapper{padding:calc(2.4rem * var(--voca-rem-multiplier)) 0 calc(3.2rem * var(--voca-rem-multiplier)) 0}}.telia-hero-banner telia-grid{z-index:1}.telia-hero-banner telia-row,.telia-hero-banner telia-col{height:100%}.telia-hero-banner__video-container{height:100%;width:100%;}.telia-hero-banner__video-container slot{display:block;height:100%;overflow:hidden;position:relative;width:100%}.telia-hero-banner__video-container ::slotted(telia-video-player[type=vimeo]){height:100vh;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%);width:100vw}@media (min-aspect-ratio: 16/9){.telia-hero-banner__video-container ::slotted(telia-video-player[type=vimeo]){height:56.25vw}}@media (max-aspect-ratio: 16/9){.telia-hero-banner__video-container ::slotted(telia-video-player[type=vimeo]){width:177.78vh}}";

const TeliaHeroBanner = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /** 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 })));
  }
  get host() { return getElement(this); }
};
TeliaHeroBanner.style = teliaHeroBannerCss;

export { TeliaHeroBanner as telia_hero_banner };
