{"version":3,"names":["kdxOverlayCtaCss","KdxOverlayCta","setImg","Boolean","this","mobileImg","bgImage","desktopImg","useMobileImg","window","innerWidth","componentWillLoad","componentDidLoad","addEventListener","render","h","class","overlayStyle","media","srcSet","src","alt","role"],"sources":["./src/components/kdx-overlay-img-banner/kdx-overlay-cta.scss?tag=kdx-overlay-cta","./src/components/kdx-overlay-img-banner/kdx-overlay-cta.tsx"],"sourcesContent":[".kdx-overlay-cta {\r\n    min-height: 322px;\r\n    position: relative;\r\n    width: 100%;\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    &.light  {\r\n        .overlay {\r\n            position: absolute;\r\n            content: '';\r\n            width: 100%;\r\n            height: 100%;\r\n            background: linear-gradient(90deg, rgba(0, 61, 113, 0.7), rgba(0, 60, 113, 0));\r\n            z-index: 1;\r\n\r\n        }\r\n        .cta-container {\r\n            .cta-content {\r\n                h2 { font-weight: 800; }\r\n            }\r\n        }\r\n    }\r\n    &.dark {\r\n        .overlay {\r\n            position: absolute;\r\n            content: '';\r\n            width: 100%;\r\n            height: 100%;\r\n            background: linear-gradient(90deg, $primary, #00000078);\r\n            z-index: 1;\r\n        }\r\n        .cta-container {\r\n            .cta-content {\r\n                h2, .h2 { \r\n                    margin-bottom: 1rem; \r\n                    font-weight: 700;\r\n                }\r\n            }\r\n        }\r\n    }\r\n    \r\n    picture {\r\n        background-repeat: no-repeat;\r\n        background-size: cover;\r\n        background-position: center;\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        height: 100%;\r\n        width: 100%;\r\n        display: block;\r\n    }\r\n    \r\n    picture img {\r\n        display: block;\r\n        width: 100%;\r\n        height: 100%;\r\n        background-repeat: no-repeat;\r\n        background-size: cover;\r\n        background-position: center;\r\n        object-fit: cover;\r\n    }\r\n\r\n    .cta-container {\r\n        z-index: 2;\r\n\r\n        .cta-content {\r\n            max-width: 50%;\r\n            position: relative;\r\n            padding: 48px 0 54px;\r\n            z-index: 2;\r\n    \r\n            h2, .h2 {\r\n                color: #FFFFFF;\r\n            }\r\n\r\n            p {\r\n                color: #FFFFFF;\r\n            }\r\n    \r\n            .ctas {\r\n                display: flex;\r\n                flex-direction: row;\r\n                align-items: center;\r\n                > a {\r\n                    margin-right: 1.5rem;\r\n\r\n                }\r\n                .btn-primary, .btn-secondary { \r\n                    color: #FFFFFF; \r\n                    font-weight: 700;\r\n                    display: flex;\r\n\r\n                    svg { fill: #FFFFFF; }\r\n                }\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\n@include media-breakpoint-down(lg) {\r\n    .kdx-overlay-cta {\r\n        padding: 0;\r\n\r\n        &.light {\r\n            min-height: 41rem;\r\n\r\n            .overlay{\r\n                min-height: 41rem; \r\n                padding: 0;\r\n                top: 0;\r\n                left: 0;\r\n                background: linear-gradient(180deg, rgba(0, 61, 113, 0.7), rgba(0, 60, 113, 0));\r\n                min-height: 41rem;\r\n            }\r\n\r\n        }\r\n            &.dark {\r\n                min-height: 22rem;\r\n\r\n                .overlay {\r\n                    max-height: 22rem; \r\n                    padding: 0;\r\n                    top: 0;\r\n                    left: 0;\r\n                    background: linear-gradient(180deg, $primary, #00000078);\r\n                    min-height: 22rem;\r\n                }\r\n                .cta-container {\r\n                    top: 50%;\r\n                    left: 50%;\r\n                    transform: translate(-50%, -50%);\r\n\r\n                    .cta-content { text-align: center; }\r\n\r\n                    .ctas { justify-content: center; }\r\n                }\r\n            }\r\n\r\n        .bg-image {\r\n            position: relative;\r\n            \r\n            &-mobile {\r\n                &.light {\r\n                    display: block;\r\n                    min-height: 41rem; //656px\r\n                }\r\n                &.dark {\r\n                    min-height: 22rem; //353px\r\n                    display: block;\r\n                }\r\n            }\r\n        }\r\n\r\n        .cta-container {\r\n            position: absolute; //offsetting the content\r\n            max-width: 100%;\r\n            padding: 0 30px;\r\n            margin-left: 0;\r\n            top: 0;\r\n    \r\n            .cta-content {\r\n                padding-bottom: 0.625rem;\r\n                max-width: 100%;\r\n                margin-left: 0;\r\n\r\n                h2, .h2 { \r\n                    font-weight: 800;\r\n                    margin-bottom: 1.5rem; \r\n                }\r\n\r\n                p {\r\n                    padding-bottom: 2.5rem;\r\n                    @include text-size(16);\r\n                    @include line-height(24);\r\n                }\r\n                .ctas {\r\n                    a { margin-right: 0; }\r\n                }\r\n            }\r\n        }\r\n    }\r\n}\r\n@include media-breakpoint-down(md) {\r\n    .kdx-overlay-cta {\r\n        .cta-container {\r\n            text-align: center;\r\n\r\n            .cta-content {\r\n                p {\r\n                    @include text-size(14);\r\n                    @include line-height(22);\r\n                }\r\n                .ctas {\r\n                    flex-direction: column;\r\n        \r\n                    a { margin-bottom: 28px; }\r\n                }\r\n               \r\n            }\r\n        }\r\n    }\r\n}","import { Component, h, Prop, State, Element } from '@stencil/core';\r\nimport { _BREAKPOINTS_ } from 'utils';\r\n\r\n@Component({\r\n    tag: 'kdx-overlay-cta',\r\n    styleUrl: 'kdx-overlay-cta.scss',\r\n    shadow: false\r\n})\r\nexport class KdxOverlayCta {\r\n    @Element() root: HTMLElement;\r\n\r\n    @Prop() desktopImg: string;\r\n    @Prop() mobileImg: string;\r\n    @Prop() overlayStyle: 'dark' | 'light' = 'dark';\r\n\r\n    @State() bgImage: string;\r\n    @State() useMobileImg: boolean = false;\r\n\r\n    setImg() {\r\n        if (!Boolean(this.mobileImg) || this.mobileImg == '') {\r\n            this.bgImage = this.desktopImg;\r\n            this.useMobileImg = false;\r\n        } else if (window.innerWidth >= 992) {\r\n            this.bgImage = this.desktopImg;\r\n            this.useMobileImg = false;\r\n        } else {\r\n            this.bgImage = this.mobileImg;\r\n            this.useMobileImg = true;\r\n        }\r\n    }\r\n\r\n    componentWillLoad() {\r\n        this.setImg();\r\n    }\r\n\r\n    componentDidLoad() {\r\n        this.setImg();\r\n\r\n        window.addEventListener('resize', () => {\r\n            this.setImg();\r\n        });\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div class={`kdx-overlay-cta ${this.overlayStyle}`}>\r\n                <div class=\"overlay\"></div>\r\n                <picture>\r\n                    <source media=\"(max-width: 991px)\" srcSet={this.mobileImg} />\r\n                    <img\r\n                        src={this.desktopImg}\r\n                        alt=\"Background\"\r\n                        class={`bg-image${this.useMobileImg ? \" bg-image-mobile\" : \"\"}`}\r\n                        role=\"presentation\"\r\n                    />\r\n                </picture>\r\n                <div class=\"container cta-container\">\r\n                    <div class=\"cta-content\">\r\n                        <slot/>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n}"],"mappings":"kDAAA,MAAMA,EAAmB,qpL,MCQZC,EAAa,M,8FAKmB,O,yCAGR,K,CAEjCC,SACI,IAAKC,QAAQC,KAAKC,YAAcD,KAAKC,WAAa,GAAI,CAClDD,KAAKE,QAAUF,KAAKG,WACpBH,KAAKI,aAAe,K,MACjB,GAAIC,OAAOC,YAAc,IAAK,CACjCN,KAAKE,QAAUF,KAAKG,WACpBH,KAAKI,aAAe,K,KACjB,CACHJ,KAAKE,QAAUF,KAAKC,UACpBD,KAAKI,aAAe,I,EAI5BG,oBACIP,KAAKF,Q,CAGTU,mBACIR,KAAKF,SAELO,OAAOI,iBAAiB,UAAU,KAC9BT,KAAKF,QAAQ,G,CAIrBY,SACI,OACIC,EAAA,OAAKC,MAAO,mBAAmBZ,KAAKa,gBAChCF,EAAA,OAAKC,MAAM,YACXD,EAAA,eACIA,EAAA,UAAQG,MAAM,qBAAqBC,OAAQf,KAAKC,YAChDU,EAAA,OACIK,IAAKhB,KAAKG,WACVc,IAAI,aACJL,MAAO,WAAWZ,KAAKI,aAAe,mBAAqB,KAC3Dc,KAAK,kBAGbP,EAAA,OAAKC,MAAM,2BACPD,EAAA,OAAKC,MAAM,eACPD,EAAA,e"}