{"version":3,"names":["kdxOverlayHeroCss","KdxOverlayHero","resizeHandler","this","setBG","componentWillLoad","bg","mobileImg","window","innerWidth","_BREAKPOINTS_","desktopImg","render","h","class","src","alt","imgAlt"],"sources":["src/components/heroes/kdx-overlay-hero/kdx-overlay-hero.scss?tag=kdx-overlay-hero","src/components/heroes/kdx-overlay-hero/kdx-overlay-hero.tsx"],"sourcesContent":[".kdx-overlay-hero {\r\n  color: $overlayHero_Text;\r\n  position: relative;\r\n  background-color: $overlayHero_BGMobile;\r\n\r\n  &::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 50%;\r\n    height: 100%;\r\n    z-index: 2;\r\n    background: $overlayHero_BG;\r\n  }\r\n\r\n  .hero-content {\r\n    height: 100%;\r\n    width: 50%;\r\n    padding: 90px 20px 90px 0;\r\n    position: relative;\r\n    z-index: 3;\r\n  }\r\n\r\n  .heading {\r\n    color: $overlayHero_Text;\r\n    margin: 0 0 16px 0;\r\n  }\r\n\r\n  .subheading {\r\n    @include text-size(24);\r\n    @include line-height(33);\r\n    margin: 0 0 24px 0;\r\n    color: $overlayHero_Text;\r\n  }\r\n\r\n  .hero-ctas {\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    .btn + kdx-arrow-link {\r\n      .arrow-link {\r\n        margin-left: 24px;\r\n      }\r\n    }\r\n\r\n    .arrow-link {\r\n      @include text-size(15);\r\n    }\r\n  }\r\n\r\n  .hero-img {\r\n    position: absolute;\r\n    z-index: 1;\r\n    top: 0;\r\n    right: 0;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    object-position: top center;\r\n    padding-right: 80px;\r\n    max-width: 50%;\r\n  }\r\n}\r\n\r\n@include media-breakpoint-down(xl) {\r\n  .kdx-overlay-hero {\r\n    .hero-img {\r\n      padding-right: 0;\r\n    }\r\n  }\r\n}\r\n\r\n@include media-breakpoint-down(lg) {\r\n    .kdx-overlay-hero {\r\n        .hero-img {\r\n            object-position: 50% 20%;\r\n        }\r\n    }\r\n}\r\n\r\n\r\n\r\n@include media-breakpoint-down(md) {\r\n    .kdx-overlay-hero {\r\n        display: flex;\r\n        flex-direction: column-reverse;\r\n        background: $overlayHero_BGMobile;\r\n\r\n        &::before { display: none; }\r\n        .hero-img {            \r\n            width: 100%;\r\n            max-width: 100%;\r\n            height: 320px;\r\n            object-position: top center;\r\n        }\r\n        .hero-content {\r\n            width: 100%;\r\n            padding: 340px 0 48px 0;            \r\n            text-align: center;\r\n        }\r\n        .subheading {\r\n            @include text-size(16);\r\n            @include line-height(24);\r\n        }\r\n        .hero-ctas {\r\n            flex-direction: column;\r\n\r\n            .btn { \r\n                margin-bottom: 24px; \r\n                width: 80%;\r\n            }\r\n            .btn + kdx-arrow-link {\r\n                .arrow-link { margin-left: 0; }\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\n\r\n\r\n\r\n@include media-breakpoint-down(sm) {\r\n    .kdx-overlay-hero {\r\n\r\n        .hero-content { padding: 237px 0 48px 0; }\r\n        .hero-img {            \r\n            height: 230px;\r\n        }\r\n        .cta {\r\n            a { min-width: 80%;}\r\n        }\r\n    }\r\n}\r\n","import { Component, h, Prop, Element, Listen, State } from '@stencil/core';\r\nimport { _BREAKPOINTS_ } from 'utils';\r\n\r\n@Component({\r\n    tag: 'kdx-overlay-hero',\r\n    styleUrl: 'kdx-overlay-hero.scss'\r\n})\r\nexport class KdxOverlayHero {\r\n\r\n    @Element() root: HTMLElement;\r\n\r\n    @Prop() desktopImg: string;\r\n    @Prop() mobileImg: string;\r\n    @Prop() imgAlt: string;\r\n\r\n    @State() bg: string; \r\n\r\n    @Listen('resize', {target: \"window\"})\r\n    resizeHandler() {\r\n        this.setBG();\r\n    }\r\n\r\n    componentWillLoad() {\r\n        this.setBG();\r\n    }\r\n\r\n    setBG() {\r\n        this.bg = (!this.mobileImg || window.innerWidth >= _BREAKPOINTS_['md']) ? this.desktopImg : this.mobileImg;\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <section class=\"kdx-overlay-hero\" aria-label=\"page banner with overlay\">\r\n                <div class=\"container-fluid\">\r\n                    <slot />\r\n                </div>\r\n                \r\n                <img src={this.bg} class=\"hero-img\" alt={this.imgAlt} />\r\n                \r\n            </section>\r\n        );\r\n    }\r\n}\r\n"],"mappings":"sFAAA,MAAMA,EAAoB,y6E,MCObC,EAAc,M,oHAWvB,aAAAC,GACIC,KAAKC,O,CAGT,iBAAAC,GACIF,KAAKC,O,CAGT,KAAAA,GACID,KAAKG,IAAOH,KAAKI,WAAaC,OAAOC,YAAcC,EAAc,MAASP,KAAKQ,WAAaR,KAAKI,S,CAGrG,MAAAK,GACI,OACIC,EAAA,WAASC,MAAM,mBAAkB,aAAY,4BACzCD,EAAA,OAAKC,MAAM,mBACPD,EAAA,cAGJA,EAAA,OAAKE,IAAKZ,KAAKG,GAAIQ,MAAM,WAAWE,IAAKb,KAAKc,S"}