{"version":3,"names":["kdxHeroSlideItemCss","KdxHeroSlideItem","componentWillLoad","this","setImg","window","addEventListener","Boolean","mobileImg","bgImage","desktopImg","innerWidth","_BREAKPOINTS_","render","h","class","imageAlt"],"sources":["src/components/heroes/kdx-hero-slide-item/kdx-hero-slide-item.scss?tag=kdx-hero-slide-item","src/components/heroes/kdx-hero-slide-item/kdx-hero-slide-item.tsx"],"sourcesContent":["kdx-hero-slide-item { width: 100%; }\r\n.kdx-hero-slide-item {    \r\n    height: 100%;    \r\n    color: #FFF;\r\n    position: relative;\r\n    background-color: $heroCarouselOverlayMobile;\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: $heroCarouselOverlay;\r\n    }\r\n\r\n    .hero-content {\r\n        height: 100%;\r\n        width: 50%;\r\n        padding: 100px 20px 160px 0;\r\n        position: relative;\r\n        z-index: 3;\r\n    }\r\n    .heading {\r\n        color: $heroCarouselText;\r\n        margin: 0 0 16px 0;\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: $heroCarouselText;\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 { margin-left: 24px; }\r\n        }\r\n\r\n        .arrow-link, .arrow-link.white-link {\r\n            @include text-size(15);\r\n            color: $heroCarouselArrowLinkText !important;\r\n\r\n            &:hover, &:focus { color: $heroCarouselArrowLinkTextHover !important; }\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        width: auto;\r\n        height: 100%;\r\n        object-fit: cover;\r\n        object-position: 50% 20%;\r\n        padding-right: 80px;\r\n        max-width: 50%;\r\n    }    \r\n}\r\n\r\n@include media-breakpoint-down(md) {\r\n  .kdx-hero-slide-item {\r\n    .hero-img {\r\n      height: 320px;\r\n    }\r\n  }\r\n}\r\n\r\n@include media-breakpoint-down(lg) {\r\n    .kdx-hero-slide-item {\r\n        display: flex;\r\n        flex-direction: column-reverse;\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 left;\r\n        }\r\n        .hero-content {\r\n            width: 100%;\r\n            padding: 24px 0 100px 0;\r\n            margin-top: 340px;\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  @include media-breakpoint-down(xl) {\r\n    .kdx-hero-slide-item {\r\n      .hero-img {\r\n        padding-right: 0;\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-hero-slide-item',\r\n    styleUrl: 'kdx-hero-slide-item.scss'\r\n})\r\nexport class KdxHeroSlideItem {\r\n\r\n    @Element() root: HTMLElement;\r\n\r\n    @Prop() desktopImg: string;\r\n    @Prop() mobileImg: string;\r\n    @Prop() imageAlt: string;\r\n\r\n    @State() bgImage: string;    \r\n\r\n    componentWillLoad() {\r\n        this.setImg();\r\n\r\n        window.addEventListener('resize', () => {\r\n            this.setImg();\r\n        });\r\n    }\r\n\r\n    setImg() {\r\n        if (!Boolean(this.mobileImg) || this.mobileImg == '') {\r\n            this.bgImage = this.desktopImg;\r\n        } else if (window.innerWidth >= _BREAKPOINTS_['md']) {\r\n            this.bgImage = this.desktopImg;\r\n        } else {\r\n            this.bgImage = this.mobileImg;\r\n        }\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div class=\"kdx-hero-slide-item\">\r\n                <div class=\"hero-content\">\r\n                    <div class=\"container-fluid\">\r\n                        <div class=\"hero-content-block\">\r\n                            <slot/>                                \r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <kdx-lazy-img css-class=\"hero-img\" img-src={this.bgImage} img-alt={this.imageAlt}></kdx-lazy-img>                \r\n            </div>\r\n        );\r\n    }\r\n}\r\n"],"mappings":"sFAAA,MAAMA,EAAsB,2qF,MCOfC,EAAgB,M,2HAUzB,iBAAAC,GACIC,KAAKC,SAELC,OAAOC,iBAAiB,UAAU,KAC9BH,KAAKC,QAAQ,G,CAIrB,MAAAA,GACI,IAAKG,QAAQJ,KAAKK,YAAcL,KAAKK,WAAa,GAAI,CAClDL,KAAKM,QAAUN,KAAKO,U,MACjB,GAAIL,OAAOM,YAAcC,EAAc,MAAO,CACjDT,KAAKM,QAAUN,KAAKO,U,KACjB,CACHP,KAAKM,QAAUN,KAAKK,S,EAI5B,MAAAK,GACI,OACIC,EAAA,OAAKC,MAAM,uBACPD,EAAA,OAAKC,MAAM,gBACPD,EAAA,OAAKC,MAAM,mBACPD,EAAA,OAAKC,MAAM,sBACPD,EAAA,gBAIZA,EAAA,4BAAwB,WAAU,UAAUX,KAAKM,QAAO,UAAWN,KAAKa,W"}