{"version":3,"names":["kdxArticleDetailHeroCss","KdxArticleDetailHero","resizeHandler","this","setBG","setImgBG","componentWillLoad","bg","imgSrcMobile","window","innerWidth","_BREAKPOINTS_","imgSrc","imgBg","render","h","class","href","backBtnHref","backBtnAlt","icon","backBtnText","style","background"],"sources":["src/components/heroes/kdx-article-detail-hero/kdx-article-detail-hero.scss?tag=kdx-article-detail-hero","src/components/heroes/kdx-article-detail-hero/kdx-article-detail-hero.tsx"],"sourcesContent":[".kdx-article-detail-hero {\r\n background: $articleHeroBG;\r\n color: $articleHeroText;\r\n\r\n .back-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n color: $articleHeroBackBtn;\r\n margin: 24px 0 75px 0;\r\n @include text-size(15);\r\n @include line-height(20);\r\n font-weight: 600;\r\n text-decoration: none;\r\n position: relative;\r\n\r\n &.mobile { display: none; }\r\n svg {\r\n @include svg-format(14px, 14px, currentColor);\r\n margin-right: 5px;\r\n transition: transform .3s ease-in-out;\r\n // margin-bottom: 2px;\r\n }\r\n &:after {\r\n content: '';\r\n background: currentColor;\r\n height: 1px;\r\n width: 0px;\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n transition: width .3s ease-in-out;\r\n }\r\n &:hover, &:focus {\r\n outline: none;\r\n color: $articleHeroBackBtn;\r\n \r\n &:after { width: 100%; }\r\n svg { \r\n transform: translateX(-4px);\r\n }\r\n }\r\n }\r\n .heading { \r\n color: $articleHeroText; \r\n margin: 0 0 16px 0;\r\n }\r\n .tags {\r\n\t\tdisplay: flex;\r\n\t\talign-items: center;\r\n\t\tmargin-bottom: 16px;\r\n\t\twidth: 100%;\t\t\t\r\n\t\toverflow: hidden;\r\n\t\ttext-overflow: ellipsis;\t\t\t\r\n\r\n\t\t.tag {\r\n\t\t\tcolor: #606060;\r\n\t\t\t@include text-size(15);\r\n\t\t\t@include line-height(19);\r\n\t\t\tfont-family: $font-family-secondary;\r\n\t\t\tdisplay: inline-block;\r\n\t\t\tbackground: #FFF;\r\n\t\t\tborder-radius: 3px;\r\n\t\t\tborder: 1px solid $articleTagBorder;\r\n\t\t\tmargin-right: 5px;\r\n\t\t\tpadding: 3px;\r\n\t\t\ttext-decoration: none;\r\n\t\t\twhite-space: nowrap;\t\t\t\t\r\n\r\n\t\t\t&:nth-child(n+4) { \t\t\t\t\r\n\t\t\t\tdisplay: none;\r\n\t\t\t}\r\n\t\t\t&:nth-child(3):not(:last-child) {\r\n\t\t\t\tposition: relative; \t\t\t\t\r\n\t\r\n\t\t\t\t&::after {\r\n\t\t\t\t\tcontent: '...';\r\n\t\t\t\t\tposition: absolute;\r\n\t\t\t\t\tbottom: 5px;\r\n\t\t\t\t\tleft: 100%;\r\n\t\t\t\t\topacity: 1;\r\n\t\t\t\t\tmargin-left: 8px;\r\n\t\t\t\t\tcolor: #6E6E6E;\r\n\t\t\t\t\t@include text-size(25);\t\t\t\t\t\r\n\t\t\t\t}\r\n\t\t\t}\t\t\t\r\n\t\t\t&:last-child { margin-right: 0; }\r\n\t\t\t&:hover, &:focus {\r\n\t\t\t\tbackground: $articleTagHover;\r\n\t\t\t\tborder: 1px solid $articleTagHover;\r\n\t\t\t\tcolor: #000;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n .article-info {\r\n\r\n p { padding: 0 0 8px 0; }\r\n a { color: #fff; font-weight: 500; }\r\n }\r\n .kdx-share-icons {\r\n margin: 75px 0 55px 0;\r\n\r\n li {\r\n a {\r\n color: $articleHeroSocialIcons;\r\n @include line-height(22);\r\n\r\n &:hover, &:focus { color: $articleHeroSocialIconsHover; }\r\n\r\n }\r\n } \r\n }\r\n .photo {\r\n height: 100%;\r\n position: relative;\r\n\r\n img {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n object-position: top left;\r\n }\r\n }\r\n}\r\n\r\n\r\n@include media-breakpoint-down(lg) {\r\n .kdx-article-detail-hero {\r\n .photo {\r\n img {\r\n object-position: 50% 20%; \r\n }\r\n }\r\n }\r\n}\r\n\r\n\r\n\r\n@include media-breakpoint-down(md) {\r\n .kdx-article-detail-hero {\r\n background: $articleHeroBGMobile;\r\n\r\n .row { flex-direction: column-reverse; }\r\n .back-btn {\r\n margin-bottom: 16px;\r\n \r\n &.desktop { display: none; }\r\n &.mobile { display: inline-flex; }\r\n }\r\n .photo {\r\n margin-bottom: 16px;\r\n height: 238px;\r\n \r\n img {\r\n position: relative;\r\n }\r\n }\r\n .tags {\r\n\r\n .tag {\r\n @include text-size(10);\r\n @include line-height(13);\r\n }\r\n }\r\n .article-info {\r\n @include text-size(14);\r\n @include line-height(19);\r\n }\r\n .kdx-share-icons {\r\n margin-top: 24px;\r\n margin: 16px 0 32px 0;\r\n }\r\n }\r\n}\r\n","import { Component, h, Prop, State, Listen } from '@stencil/core';\r\nimport { _BREAKPOINTS_ } from 'utils';\r\n\r\n@Component({\r\n tag: 'kdx-article-detail-hero',\r\n styleUrl: 'kdx-article-detail-hero.scss'\r\n})\r\nexport class KdxArticleDetailHero {\r\n \r\n @Prop() backBtnHref: string;\r\n @Prop() backBtnText: string;\r\n @Prop() backBtnAlt: string; \r\n @Prop() imgSrc: string;\r\n @Prop() imgSrcMobile: string;\r\n @Prop() imgAlt: string;\r\n @Prop() imgBg: 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 this.setImgBG();\r\n }\r\n\r\n componentWillLoad() {\r\n this.setBG();\r\n this.setImgBG();\r\n }\r\n\r\n setBG() {\r\n this.bg = (!this.imgSrcMobile || window.innerWidth >= _BREAKPOINTS_['md']) ? this.imgSrc : this.imgSrcMobile; \r\n }\r\n\r\n setImgBG() {\r\n this.imgBg = 'background: url(\"' + this.imgSrc + '\"); '; \r\n }\r\n\r\n render() {\r\n return (\r\n
\r\n
\r\n
\r\n\r\n
\r\n \r\n \r\n {this.backBtnText}\r\n \r\n\r\n \r\n
\r\n
\r\n \r\n \r\n {this.backBtnText}\r\n \r\n {(this.bg) && (\r\n
\r\n
\r\n )}\r\n
\r\n
\r\n
\r\n
\r\n );\r\n }\r\n}\r\n"],"mappings":"+EAAA,MAAMA,EAA0B,4oI,MCOnBC,EAAoB,M,wNAa7B,aAAAC,GACIC,KAAKC,QACLD,KAAKE,U,CAGT,iBAAAC,GACIH,KAAKC,QACLD,KAAKE,U,CAGT,KAAAD,GACID,KAAKI,IAAOJ,KAAKK,cAAgBC,OAAOC,YAAcC,EAAc,MAASR,KAAKS,OAAST,KAAKK,Y,CAGpG,QAAAH,GACIF,KAAKU,MAAQ,oBAAsBV,KAAKS,OAAS,O,CAGrD,MAAAE,GACI,OACIC,EAAA,WAASC,MAAM,0BAAyB,aAAY,uBAChDD,EAAA,OAAKC,MAAM,mBACPD,EAAA,OAAKC,MAAM,OAEPD,EAAA,OAAKC,MAAM,YACPD,EAAA,KAAGE,KAAMd,KAAKe,YAAaF,MAAM,mBAAkB,aAAab,KAAKgB,YACjEJ,EAAA,YAAUK,KAAK,iBACdjB,KAAKkB,aAGVN,EAAA,cAEJA,EAAA,OAAKC,MAAM,YACPD,EAAA,KAAGE,KAAMd,KAAKe,YAAaF,MAAM,kBAAiB,aAAab,KAAKgB,YAChEJ,EAAA,YAAUK,KAAK,iBACdjB,KAAKkB,aAERlB,KAAO,IACLY,EAAA,OAAKC,MAAM,QAAQM,MAAO,CAAEC,WAAY,OAAOpB,KAAKS,yC"}