{"version":3,"names":["kdxBasicHeroCss","StBasicHero","guid","render","h","class","this","componentScope","headerStyle","id","ariaLabel","imgSrc","role","style","backgroundImage","btnHref","href","isSpeedbump","target","btnTarget","btnAlt","btnText"],"sources":["src/components/heroes/kdx-basic-hero/kdx-basic-hero.scss?tag=kdx-basic-hero","src/components/heroes/kdx-basic-hero/kdx-basic-hero.tsx"],"sourcesContent":[".kdx-basic-hero {\r\n\tposition: relative;\t\r\n\twidth: 100%;\r\n\tbackground: $basicHeroBG;  \r\n\tcolor: $basicHeroText;\r\n\tpadding: 30px 0;\r\n\r\n\th1, h2, h3, h4, h5, h6,\r\n\t.h1, .h2, .h3, .h4, .h5, .h6 {\r\n\t\tcolor: $basicHeroText;\r\n\t}\r\n\t.row {\r\n\t\tjustify-content: space-between;\r\n\t\talign-items: center;\r\n\t}\r\n\t.bg-image {\r\n\t\tbackground-repeat: no-repeat;\r\n\t\tbackground-size: 100%;\r\n\t\tbackground-position: top left;\r\n\t\tposition: absolute;\r\n\t\ttop: 0;\r\n\t\tleft: 0;\r\n\t\theight: 100%;\r\n\t\twidth: 100%;\r\n\t}\r\n\th1 { margin: 0 0 8px 0; }\r\n\t.subheading {\r\n\t\t@include text-size(24);\r\n\t\t@include line-height(33);\r\n\t\tmargin: 0;\r\n\t}\r\n\t\r\n\t// team bio hero\r\n\t&.team-bio-hero {\r\n\t\tbackground: $teamBioHeroBG;\r\n\t\tcolor: $teamBioHeroText;\r\n\t\tdisplay: flex;\r\n\t\tpadding: 48px 0;\r\n\t\t\t\t\r\n\t\t.contact-box {\r\n\t\t\tbackground: $teamBioHeroContactBox;\r\n\t\t\tbox-shadow: 0 3px 6px rgba(0, 0, 0, .16);\r\n\t\t\tpadding: 24px;\r\n\t\t\tmargin-right: 85px;\r\n\t\t\t@include line-height(30);\r\n\r\n\t\t\tp { padding-bottom: 5px; }\r\n\t\t\ta {\r\n\t\t\t\tcolor: $teamBioHeroContactText;\r\n\t\t\t\ttext-decoration: none;\t\t\t\t\r\n\r\n\t\t\t\t&:hover, &:focus {\r\n\t\t\t\t\ttext-decoration: underline;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n@include media-breakpoint-down(lg) {\r\n\t.kdx-basic-hero {\r\n\t\t\r\n\t\t&.team-bio-hero {\r\n\t\t\tpadding: 40px 0;\r\n\r\n\t\t\t.contact-box {\r\n\t\t\t\ttext-align: center;\r\n\t\t\t\tmargin-top: 16px;\r\n\t\t\t\t@include text-size(12);\r\n\t\t\t\t@include line-height(24);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n\r\n\r\n@include media-breakpoint-down(md) {\r\n\t.kdx-basic-hero {\r\n\t\ttext-align: center;\r\n\t\tpadding: 24px 0;\r\n\t\tbackground: $basicHeroBGMobile;\r\n\t\t\r\n\t\t.cta { margin-top: 16px; }\r\n\t\t&.team-bio-hero {\r\n\r\n\t\t\t.contact-box {\r\n\t\t\t\ttext-align: left;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n\r\n\r\n\r\n@include media-breakpoint-down(sm) {\r\n\t.kdx-basic-hero {\r\n\t\t\r\n\t\t.cta { \r\n\t\t\t\r\n\t\t\t.btn { min-width: 80%; }\r\n\t\t}\r\n\t}\r\n}","import { Component, h, ComponentInterface, State, Prop } from '@stencil/core';\r\nimport { guid } from 'utils';\r\n\r\n@Component({\r\n\ttag: 'kdx-basic-hero',\r\n\tstyleUrl: 'kdx-basic-hero.scss',\r\n\tshadow: false\r\n})\r\nexport class StBasicHero implements ComponentInterface {\r\n  \r\n\t@State() guid: string = guid();\r\n\r\n\t@Prop() ariaLabel: string = 'A default label';\r\n\t@Prop() imgSrc: string;\r\n\t@Prop() imgAlt: string;\r\n\t@Prop() componentScope: string = \"kdx\";\r\n\t@Prop() headerStyle: string;\r\n\t@Prop() btnText: string;\r\n\t@Prop() btnHref: string;\r\n\t@Prop() btnAlt: string;\r\n\t@Prop() btnTarget: string;\r\n\t@Prop() isSpeedbump: boolean;\r\n\t\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t<section class={`kdx-basic-hero${this.componentScope ? ` ${this.componentScope}-basic-hero`: ''} ${this.headerStyle ? this.headerStyle : \"\"}`} id={`kdx-basic-hero-${this.guid}`} aria-label={this.ariaLabel}>\r\n\t\t\t\t{this.imgSrc &&\r\n\t\t\t\t\t<div class=\"bg-image\" role=\"presentation\" style={{backgroundImage: `url(${this.imgSrc}`}}></div>\r\n\t\t\t\t}\r\n\t\t\t\t<div class=\"container-fluid\">\r\n\t\t\t\t\t<div class=\"row\">\r\n\t\t\t\t\t\t<div class={`${this.btnHref ? \"col-md-9\" : \"col-12\"}`}>\r\n\t\t\t\t\t\t\t<slot />\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t{this.btnHref && this.btnHref != \"\" &&\r\n\t\t\t\t\t\t\t<div class=\"col-md-3\">\r\n\t\t\t\t\t\t\t\t<div class=\"cta\">\r\n\t\t\t\t\t\t\t\t\t<a \r\n\t\t\t\t\t\t\t\t\thref={this.btnHref} \r\n\t\t\t\t\t\t\t\t\tclass={`btn btn-secondary ${this.isSpeedbump ? \"speedbump-link\" : \"\"}`} \r\n\t\t\t\t\t\t\t\t\ttarget={this.btnTarget ? this.btnTarget : \"_self\"} \r\n\t\t\t\t\t\t\t\t\taria-label={this.btnAlt}\r\n\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t{this.btnText}\r\n\t\t\t\t\t\t\t\t\t</a>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</section>\r\n\t\t);\r\n\t}\r\n}"],"mappings":"+EAAA,MAAMA,EAAkB,iyE,MCQXC,EAAW,M,mCAECC,I,eAEI,kB,gEAGK,M,mJAQjC,MAAAC,GACC,OACCC,EAAA,WAASC,MAAO,iBAAiBC,KAAKC,eAAiB,IAAID,KAAKC,4BAA6B,MAAMD,KAAKE,YAAcF,KAAKE,YAAc,KAAMC,GAAI,kBAAkBH,KAAKJ,OAAM,aAAcI,KAAKI,WACjMJ,KAAKK,QACLP,EAAA,OAAKC,MAAM,WAAWO,KAAK,eAAeC,MAAO,CAACC,gBAAiB,OAAOR,KAAKK,YAEhFP,EAAA,OAAKC,MAAM,mBACVD,EAAA,OAAKC,MAAM,OACVD,EAAA,OAAKC,MAAO,GAAGC,KAAKS,QAAU,WAAa,YAC1CX,EAAA,cAEAE,KAAKS,SAAWT,KAAKS,SAAW,IAChCX,EAAA,OAAKC,MAAM,YACVD,EAAA,OAAKC,MAAM,OACVD,EAAA,KACAY,KAAMV,KAAKS,QACXV,MAAO,qBAAqBC,KAAKW,YAAc,iBAAmB,KAClEC,OAAQZ,KAAKa,UAAYb,KAAKa,UAAY,QAAO,aACrCb,KAAKc,QAEfd,KAAKe,a"}