{"version":3,"names":["videoHeroCss","VideoHero","togglePlayPause","this","isPlaying","videoUrl","pause","play","componentDidLoad","autoplay","renderMedia","contentType","videoSrc","h","ref","el","class","preload","poster","playsinline","loop","muted","disableAutoplay","src","type","mobileImg","media","srcSet","desktopImg","alt","role","render","onClick","icon"],"sources":["./src/components/video-hero/video-hero.scss?tag=video-hero","./src/components/video-hero/video-hero.tsx"],"sourcesContent":[".video-hero {\r\n  \r\n    height: 481px;\r\n    width: 100%;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: flex-end;\r\n    position: relative;\r\n  \r\n    .video-holder {\r\n      width: 100vw;\r\n      position: relative;\r\n      z-index: 1;\r\n      height: 481px;\r\n  \r\n      &::after {\r\n        content: \"\";\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100vw;\r\n        height: 481px;\r\n        background: linear-gradient(180deg, rgba(0, 60, 113, 1) 10%, rgba(0, 60, 113, 0) 100%);\r\n        background-size: cover;\r\n        background-position: center;\r\n        z-index: 2;\r\n        pointer-events: none;\r\n      }\r\n\r\n      &::before {\r\n        position: absolute;\r\n        content: '';\r\n        height: 6px;\r\n        width: 100%;\r\n        background-color: #C6930A;\r\n        bottom: 0;\r\n        left: 0;\r\n        z-index: 3;\r\n      }\r\n  \r\n      video  {\r\n        position: absolute;\r\n        width: 100vw;\r\n        height: 481px;\r\n        object-fit: cover;\r\n        object-position: 50% 30%; \r\n      }\r\n      img {\r\n\r\n        &.bg-image {\r\n          background-repeat: no-repeat;\r\n          background-size: cover;\r\n          background-position: center;\r\n          position: absolute;\r\n          object-fit: cover;\r\n          object-position: 50% 30%; \r\n          top: 0;\r\n          left: 0;\r\n          height: 100%;\r\n          width: 100%;\r\n        }\r\n      }\r\n\r\n      .video-hero-media {\r\n        .custom-controls {\r\n\r\n          button.video-hero-toggle {\r\n            position: absolute;\r\n            bottom: 25px;\r\n            right: 85px;\r\n            border-radius: 50%;\r\n            border: none;\r\n            background: transparent;\r\n            z-index: 5;\r\n            padding: 0;\r\n\r\n            kdx-icon {\r\n              display: block;\r\n\r\n              &.play-icon { margin-right: -2px; }\r\n              \r\n              svg { @include svg-format(15px, 22px, $secondary); }\r\n            }\r\n    \r\n    \r\n            &::after {\r\n                content: '';\r\n                position: absolute;\r\n                bottom: -8px;\r\n                right: -13px;\r\n                border-radius: 50%;\r\n                background-color: #FFFFFF;\r\n                width: 40px;\r\n                height: 40px;\r\n                z-index: -1;\r\n                box-shadow: 0px 3px 6px #00000080;\r\n            }\r\n            &:hover, &:focus {\r\n\r\n              svg { fill: #FFFFFF; }\r\n\r\n              &::after { background-color: $secondary; }\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  \r\n   \r\n\r\n    .video-hero-content-wrapper {\r\n      position: absolute;\r\n      top: 50%;\r\n      z-index: 1;\r\n      left: 50%;\r\n      width: auto;\r\n      transform: translate(-50%, -50%);\r\n    }\r\n  \r\n  \r\n    &-content {\r\n      width: 100%;\r\n      padding: 16px 0;\r\n\r\n      h1 {\r\n        color: #FFFFFF;\r\n        text-align: center;\r\n        font-weight: 900;\r\n      }\r\n  \r\n      p {\r\n        margin-top: 16px;\r\n        @include text-size(24);\r\n        @include line-height(36);\r\n        font-weight: 700;\r\n        color: #FFFFFF;\r\n        text-align: center;\r\n      }\r\n    }\r\n  \r\n    &-ctas {\r\n      display: flex;\r\n      align-items: flex-start;\r\n      justify-content: center;\r\n  \r\n      a {\r\n        flex-direction: column;\r\n        text-align: center;\r\n        margin: 0 10px;\r\n  \r\n        &.btn {\r\n            font-weight: 700;\r\n            \r\n            &.btn-secondary {\r\n                color: #FFFFFF;\r\n            \r\n                svg { fill: #FFFFFF; }\r\n            }\r\n       }\r\n  \r\n        img {\r\n          max-height: 46px;\r\n          max-width: 46px;\r\n          margin-bottom: 8px;\r\n        }\r\n      }\r\n    }\r\n  \r\n    @include media-breakpoint-down(lg) {\r\n  \r\n      a {\r\n        > img {\r\n          margin-right: auto;\r\n          margin-left: auto;\r\n        }\r\n      }\r\n      .video-holder {\r\n        .video-hero-media {\r\n          .custom-controls {\r\n            button.video-hero-toggle {\r\n              bottom: 75px;\r\n            }\r\n          }\r\n        }\r\n      }\r\n      .video-hero-content {\r\n        h1 {\r\n          @include text-size(32);\r\n          @include line-height(40);\r\n        }\r\n\r\n        p {\r\n          @include text-size(19);\r\n          @include line-height(28);\r\n      }\r\n      }\r\n    }\r\n  \r\n    @include media-breakpoint-down(md) {\r\n      height: 100%;\r\n      width: 100%;\r\n      margin: 0;\r\n  \r\n      .video-holder {\r\n        transform: none;\r\n\r\n        button.video-hero-toggle {\r\n            bottom: 113px;\r\n            right: 50px;\r\n        }\r\n      }\r\n\r\n      .video-hero-content-wrapper {\r\n        width: 100%;\r\n\r\n        .video-hero-content {\r\n  \r\n          .video-hero-ctas {\r\n              display: flex;\r\n              flex-direction: column;\r\n              align-items: center;\r\n\r\n              a {\r\n                  &.btn {\r\n                      margin-bottom: 30px;\r\n                      margin-right: 0;\r\n                      margin-left: 0;\r\n                  }\r\n              }\r\n          }\r\n        }\r\n      }\r\n  \r\n    }\r\n  }","import { Component, h, Prop, State } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'video-hero',\r\n  styleUrl: 'video-hero.scss',\r\n  shadow: false,\r\n})\r\nexport class VideoHero {\r\n  @Prop() contentType: 'video' | 'image' = 'video';\r\n  @Prop() videoSrc: string = '';\r\n  @Prop() desktopImg: string;\r\n  @Prop() mobileImg: string;\r\n  @Prop() poster: string;\r\n  @Prop() disableAutoplay: boolean = false;\r\n\r\n  @State() isPlaying: boolean = false;\r\n  private videoUrl: HTMLVideoElement;\r\n\r\n  togglePlayPause() {\r\n    if (this.isPlaying) {\r\n      this.videoUrl.pause();\r\n    } else {\r\n      this.videoUrl.play();\r\n    }\r\n    this.isPlaying = !this.isPlaying;\r\n  }\r\n\r\n  componentDidLoad() {\r\n      if(this.videoUrl?.autoplay) {\r\n        this.isPlaying = true;\r\n      }\r\n  }\r\n\r\n  renderMedia() {\r\n    if (this.contentType === 'video' && this.videoSrc !== '') {\r\n      return (\r\n        <video ref={(el) => (this.videoUrl = el as HTMLVideoElement)} class=\"lazy-load-bg\" preload=\"auto\" poster={this.poster} playsinline loop muted autoplay={!this.disableAutoplay}>\r\n          <source src={this.videoSrc} type=\"video/mp4\" />\r\n          Your browser does not support the video tag.\r\n        </video>\r\n      );\r\n    } else if (this.contentType === 'image') {\r\n      return (\r\n        <picture>\r\n           {this.mobileImg ? (\r\n              <source media=\"(max-width: 991px)\" srcSet={this.mobileImg} />\r\n            ) : null}\r\n          <img\r\n            src={this.desktopImg}\r\n            alt=\"\"\r\n            role=\"presentation\"\r\n            class=\"bg-image\"\r\n          />\r\n        </picture>\r\n      );\r\n    } else {\r\n      return null; // Render nothing if contentType is neither 'video' nor 'image' or if the necessary props are not provided\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class='video-hero-media'>\r\n        {this.renderMedia()}\r\n        {this.contentType === 'video' && this.videoSrc !== '' ? (\r\n          <div class=\"custom-controls\">\r\n            <button \r\n              class=\"video-hero-toggle\" \r\n              onClick={() => this.togglePlayPause()} \r\n              aria-label={this.isPlaying ? 'click here to pause video' : 'click here to play video'}>\r\n              {this.isPlaying ? <kdx-icon icon=\"pause\" class=\"pause-icon\"></kdx-icon> : <kdx-icon icon=\"play\" class=\"play-icon\"></kdx-icon>}\r\n            </button>\r\n          </div>\r\n        ) : null}\r\n        <slot />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\n"],"mappings":"2CAAA,MAAMA,EAAe,2+L,MCORC,EAAS,M,0CACqB,Q,cACd,G,8FAIQ,M,eAEL,K,CAG9BC,kBACE,GAAIC,KAAKC,UAAW,CAClBD,KAAKE,SAASC,O,KACT,CACLH,KAAKE,SAASE,M,CAEhBJ,KAAKC,WAAaD,KAAKC,S,CAGzBI,mBACI,GAAGL,KAAKE,UAAUI,SAAU,CAC1BN,KAAKC,UAAY,I,EAIvBM,cACE,GAAIP,KAAKQ,cAAgB,SAAWR,KAAKS,WAAa,GAAI,CACxD,OACEC,EAAA,SAAOC,IAAMC,GAAQZ,KAAKE,SAAWU,EAAyBC,MAAM,eAAeC,QAAQ,OAAOC,OAAQf,KAAKe,OAAQC,YAAW,KAACC,KAAI,KAACC,MAAK,KAACZ,UAAWN,KAAKmB,iBAC5JT,EAAA,UAAQU,IAAKpB,KAAKS,SAAUY,KAAK,cAAc,+C,MAI9C,GAAIrB,KAAKQ,cAAgB,QAAS,CACvC,OACEE,EAAA,eACIV,KAAKsB,UACHZ,EAAA,UAAQa,MAAM,qBAAqBC,OAAQxB,KAAKsB,YAC9C,KACNZ,EAAA,OACEU,IAAKpB,KAAKyB,WACVC,IAAI,GACJC,KAAK,eACLd,MAAM,a,KAIP,CACL,OAAO,I,EAIXe,SACE,OACElB,EAAA,OAAKG,MAAM,oBACRb,KAAKO,cACLP,KAAKQ,cAAgB,SAAWR,KAAKS,WAAa,GACjDC,EAAA,OAAKG,MAAM,mBACTH,EAAA,UACEG,MAAM,oBACNgB,QAAS,IAAM7B,KAAKD,kBAAiB,aACzBC,KAAKC,UAAY,4BAA8B,4BAC1DD,KAAKC,UAAYS,EAAA,YAAUoB,KAAK,QAAQjB,MAAM,eAA2BH,EAAA,YAAUoB,KAAK,OAAOjB,MAAM,gBAGxG,KACJH,EAAA,a"}