@itcenteratunihelsinki/huds-lib 0.8.60 → 0.8.61

package/dist/huds-lib/hy-hero.entry.js

@@ -1,2 +1,2 @@
-import{r as e,h,H as i,g as t}from"./index-f84f2a7d.js";import{j as r}from"./globalScript-5a4b7abf.js";import{H as o,a,b as n,c as d,d as s}from"./utils-7438924c.js";const y=':root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-hero{position:relative;padding-bottom:0}@media (min-width: 60rem){.hy-hero{margin-top:32px}}@media (min-width: 60rem){.hy-hero:not(.has-shortcuts){margin-bottom:32px}}@media (min-width: 75.0625rem){.without-sidebar .hy-hero{max-width:1216px;margin-right:auto;margin-left:auto}}@media (min-width: 75.0625rem){.with-sidebar .hy-hero{padding-left:32px;padding-right:32px}}@media (min-width: 1601px){.with-sidebar .hy-hero{padding-right:0;padding-left:0;max-width:1216px;margin-right:auto;margin-left:auto}}@media (min-width: 60rem){.hy-hero--white{margin-top:0}}@media (min-width: 60rem){.hy-hero--white:not(.has-shortcuts){padding-bottom:48px}}.hy-hero--white:not(.has-shortcuts):after{width:100%;background-color:var(--grayscale-medium-dark);height:1px;content:"";margin:0 auto;display:block}@media (min-width: 60rem){.hy-hero--white:not(.has-shortcuts):after{position:absolute;left:0;right:0;bottom:0}}.hy-hero--white:not(.hy-hero--front_page):after{max-width:1216px}.hy-hero__container{position:relative}@media (min-width: 60rem){.hy-hero__container{display:grid;position:relative}}@media (min-width: 60rem){.hy-hero--small .hy-hero__container{grid-template-columns:60% 1fr}}@media (min-width: 60rem){.hy-hero--large .hy-hero__container{grid-template-columns:repeat(2, 1fr)}}.hy-hero__content-container{padding:24px 1rem 40px;margin:0 auto;width:100%}@media (min-width: 30rem){.hy-hero__content-container{padding:40px 2rem}}@media (min-width: 75.0625rem){.hy-hero__content-container{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;padding:40px 24px}}@media (min-width: 1601px){.hy-hero__content-container{max-width:1216px}}.hy-hero--black .hy-hero__content-container{background-color:var(--grayscale-black)}.hy-hero--blue .hy-hero__content-container{background-color:var(--brand-main)}.hy-hero--white .hy-hero__content-container{background-color:var(--grayscale-white)}@media (min-width: 75.0625rem){.hy-hero--white .hy-hero__content-container{padding:40px 24px 40px 0}}.hy-hero__content{position:relative}h2.hy-hero__title{-ms-hyphens:auto;hyphens:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;max-width:100%;width:auto}.hy-hero--blue h2.hy-hero__title{color:var(--grayscale-white) !important}.hy-hero--black h2.hy-hero__title{color:var(--grayscale-white) !important}.hy-hero--white h2.hy-hero__title{color:var(--grayscale-black) !important}h2.hy-hero__title.hy-heading__hero{font-size:2.25rem;line-height:33px;font-weight:700;color:var(--grayscale-black);font-family:var(--main-font-family);letter-spacing:-0.8px;margin-bottom:0;text-transform:none}@media (min-width: 1024px){h2.hy-hero__title.hy-heading__hero{font-size:2.25rem;line-height:40px;letter-spacing:-1.15px}}@media (min-width: 1601px){h2.hy-hero__title.hy-heading__hero{font-size:2.375rem;line-height:48px;letter-spacing:-1.3px}}.hy-hero__description{font-size:1rem;line-height:24px;font-family:var(--main-font-family);margin:16px 0 0 0;padding:0;position:relative}@media (min-width: 1601px){.hy-hero__description{font-size:1.0625rem;line-height:26px}}.hy-hero--black .hy-hero__description{color:var(--grayscale-white)}.hy-hero--blue .hy-hero__description{color:var(--grayscale-white)}.hy-hero--white .hy-hero__description{color:var(--grayscale-black)}.hy-hero__actions{margin-top:24px}.hy-hero__image-container{margin:0;padding:0;position:relative}.hy-hero__image-container figure{margin:0}@media (min-width: 60rem){.hy-hero__image-container{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;padding:8px 0}}@media (min-width: 60rem){.hy-hero--front_page .hy-hero__image-container{padding:0}}.hy-image__image{display:block;height:100%;min-height:205px;-o-object-fit:contain;object-fit:contain;width:100%}.has-cover .hy-image__image{-o-object-fit:cover;object-fit:cover}.hy-hero.hy-hero--group_landing.hy-hero--generic_site_group h2.hy-hero__title.hy-heading__hero,.hy-hero.hy-hero--research_group h2.hy-hero__title.hy-heading__hero{font-size:2rem;line-height:38px;font-weight:700;color:var(--grayscale-black);font-family:var(--main-font-family);letter-spacing:-0.8px;margin-bottom:0;text-transform:uppercase}@media (min-width: 1024px){.hy-hero.hy-hero--group_landing.hy-hero--generic_site_group h2.hy-hero__title.hy-heading__hero,.hy-hero.hy-hero--research_group h2.hy-hero__title.hy-heading__hero{font-size:2.875rem;line-height:54px;letter-spacing:-1.15px}}@media (min-width: 1601px){.hy-hero.hy-hero--group_landing.hy-hero--generic_site_group h2.hy-hero__title.hy-heading__hero,.hy-hero.hy-hero--research_group h2.hy-hero__title.hy-heading__hero{font-size:3.25rem;line-height:60px;letter-spacing:-1.3px}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--white{padding-top:40px;margin-top:0}}.hy-hero.hy-hero--front_page h2.hy-hero__title.hy-heading__hero{font-size:2rem;line-height:38px;font-weight:700;color:var(--grayscale-black);font-family:var(--main-font-family);letter-spacing:-0.8px;margin-bottom:0;text-transform:uppercase}@media (min-width: 1024px){.hy-hero.hy-hero--front_page h2.hy-hero__title.hy-heading__hero{font-size:2.875rem;line-height:54px;letter-spacing:-1.15px}}@media (min-width: 1601px){.hy-hero.hy-hero--front_page h2.hy-hero__title.hy-heading__hero{font-size:3.25rem;line-height:60px;letter-spacing:-1.3px}}@media (min-width: 75.0625rem){.hy-hero.hy-hero--front_page{margin-left:-32px;margin-right:-32px;max-width:none}}.hy-hero.hy-hero--front_page .hy-hero__container{position:relative}@media (min-width: 60rem){.hy-hero.hy-hero--front_page .hy-hero__container{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}}.hy-hero.hy-hero--front_page .hy-hero__content-container{padding:24px 1rem 40px;margin:0 auto;width:100%}.hy-hero--black .hy-hero.hy-hero--front_page .hy-hero__content-container{background-color:var(--grayscale-black)}.hy-hero--blue .hy-hero.hy-hero--front_page .hy-hero__content-container{background-color:var(--brand-main)}.hy-hero--white .hy-hero.hy-hero--front_page .hy-hero__content-container{background-color:var(--grayscale-white)}@media (min-width: 30rem){.hy-hero.hy-hero--front_page .hy-hero__content-container{padding:24px 2rem 40px}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page .hy-hero__content-container{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;min-height:330px;padding:56px 2rem}}@media (min-width: 1060px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:373px}}@media (min-width: 1160px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:480px}}@media (min-width: 75.0625rem){.hy-hero.hy-hero--front_page .hy-hero__content-container{padding-left:32px;padding-right:8px}}@media (min-width: 1260px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:443px}}@media (min-width: 1280px){.hy-hero.hy-hero--front_page .hy-hero__content-container{max-width:1216px;padding-left:0}}@media (min-width: 1360px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:478px}}@media (min-width: 1460px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:513px}}@media (min-width: 1560px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:548px}}@media (min-width: 1601px){.hy-hero.hy-hero--front_page .hy-hero__content-container{padding-left:0}}@media (min-width: 1660px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:583px}}@media (min-width: 1760px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:619px}}@media (min-width: 1860px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:654px}}@media (min-width: 1920px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:675px}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--small .hy-hero__image-container{width:40%}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--small .hy-hero__content{max-width:60%}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--large .hy-hero__image-container{width:50%}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--large .hy-hero__content{max-width:50%}}.hy-hero.hy-hero--front_page .hy-hero__image-container{background-position:50% 50%;background-size:cover;background:transparent;margin:0;padding:0;position:relative}.hy-hero.hy-hero--front_page .hy-hero__image-container figure{margin:0}@media (min-width: 60rem){.hy-hero.hy-hero--front_page .hy-hero__image-container{background-color:var(--grayscale-white);bottom:0;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;padding:8px 0;position:absolute;right:0;top:0}}.hy-hero.hy-hero--front_page .hy-hero__content{position:relative}@media (min-width: 60rem){.hy-hero.hy-hero--front_page .hy-hero__content{padding-right:24px}}.hy-hero.hy-hero--front_page .hy-image__image{display:block;height:100%;min-height:205px;-o-object-fit:cover;object-fit:cover;width:100%}.hy-hero__spacer-box{display:none}@media (min-width: 60rem){.hy-hero__spacer-box{display:block;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;position:absolute;inset:0}}@media (min-width: 60rem){.hy-hero--small .hy-hero__spacer-box{width:60%}}@media (min-width: 60rem){.hy-hero--large .hy-hero__spacer-box{width:50%}}.hy-hero--black .hy-hero__spacer-box{background-color:var(--grayscale-black)}.hy-hero--blue .hy-hero__spacer-box{background-color:var(--brand-main)}.hy-hero--white .hy-hero__spacer-box{background-color:var(--grayscale-white)}';let l=null;let m=250;const c=class{constructor(h){e(this,h);this.heroType=o.landing;this.heroGroupType=a.default;this.colorVariant=n.blue;this.sizeVariant=d.large;this.image=undefined;this.imageHeight=null;this.imageWidth=null;this.imageAltText="";this.disableLazy=false;this.hasShortcuts=false;this.heading=undefined;this.description=undefined;this.url=undefined;this.urlTitle=undefined;this.scLabel=undefined;this.isExternal=false;this.sourceSet=undefined}async componentWillLoad(){this._sourceSet=await r(this.sourceSet)}handleHeroImageObjectFitValue(e,h){const i=h.getElementsByClassName("hy-hero__content-container")[0];if(e==="small"){if(i.offsetHeight>=300){h.classList.add("has-cover")}else{h.classList.remove("has-cover")}}if(e==="large"){if(i.offsetHeight>=344){h.classList.add("has-cover")}else{h.classList.remove("has-cover")}}}render(){let e=s.heroWhite;let t=this.colorVariant;let r=this.heroType;if(this.heroType==="minor_landing"){t=n.white;r=o.landing}if(t===n.blue){e=s.heroBlue}if(t===n.black){e=s.heroBlack}if(!t||t==="fp_white"){t=n.white}const a=["hy-hero",`hy-hero--${r}`,`hy-hero--${this.heroGroupType}`,`hy-hero--${t}`,`hy-hero--${this.sizeVariant}`];const d=["hy-hero__title","hy-heading__hero"].join(" ");if(this.hasShortcuts){a.push("has-shortcuts")}const y=16;const c=10;const g=c/y*100;const _={"--aspectRatio":`${g}%`};window.onload=()=>{const e=document.getElementsByClassName("hy-hero")[0];this.handleHeroImageObjectFitValue(this.sizeVariant,e);window.addEventListener("resize",(()=>{clearTimeout(l);l=setTimeout((()=>this.handleHeroImageObjectFitValue(this.sizeVariant,e)),m)}))};if(r==="front_page"){return h(i,null,h("div",{class:a.join(" ")},h("div",{class:`hy-hero__container`},h("div",{class:`hy-hero__image-container`,style:_},this.image&&(this._sourceSet?h("picture",null,this._sourceSet.map((e=>h("source",{srcSet:e.src,media:e.media,type:e.type,sizes:e.sizes?e.sizes:""}))),h("img",{loading:this.disableLazy?"eager":"lazy",alt:this.imageAltText,class:`hy-image__image`,src:this.image,height:this.imageHeight,width:this.imageWidth})):h("img",{loading:this.disableLazy?"eager":"lazy",alt:this.imageAltText,class:`hy-image__image`,src:this.image,height:this.imageHeight,width:this.imageWidth}))),h("div",{class:`hy-hero__spacer-box`}),h("div",{class:`hy-hero__content-container`},h("div",{class:`hy-hero__content`},h("div",{class:`hy-hero__title-container`},h("h2",{innerHTML:this.heading,class:d})),this.description&&h("p",{class:`hy-hero__description`},this.description),this.url&&h("div",{class:`hy-hero__actions`},h("hy-cta-button",{"link-content":this.urlTitle,"sc-label":this.scLabel,url:this.url,"is-external":this.isExternal,variant:e})))))),h("hy-box",{mb:"2, 2, 1, 1"}))}return h(i,null,h("div",{class:a.join(" ")},h("div",{class:`hy-hero__container`},h("div",{class:`hy-hero__image-container`,style:_},this.image&&(this._sourceSet?h("picture",null,this._sourceSet.map((e=>h("source",{srcSet:e.src,media:e.media,type:e.type,sizes:e.sizes?e.sizes:""}))),h("img",{loading:this.disableLazy?"eager":"lazy",alt:this.imageAltText,class:`hy-image__image`,src:this.image,height:this.imageHeight,width:this.imageWidth})):h("img",{loading:this.disableLazy?"eager":"lazy",alt:this.imageAltText,class:`hy-image__image`,src:this.image,height:this.imageHeight,width:this.imageWidth}))),h("div",{class:`hy-hero__content-container`},h("div",{class:`hy-hero__content`},h("div",{class:`hy-hero__title-container`},h("h2",{innerHTML:this.heading,class:d})),this.description&&h("p",{class:`hy-hero__description`},this.description),this.url&&h("div",{class:`hy-hero__actions`},h("hy-cta-button",{"link-content":this.urlTitle,"sc-label":this.scLabel,url:this.url,"is-external":this.isExternal,variant:e})))))),h("hy-box",{mb:"2, 2, 1, 1"}))}get el(){return t(this)}};c.style=y;export{c as hy_hero};
+import{r as e,h,H as i,g as t}from"./index-f84f2a7d.js";import{j as r}from"./globalScript-5a4b7abf.js";import{H as o,a,b as n,c as d,d as s}from"./utils-7438924c.js";const y=':root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-hero{position:relative;padding-bottom:0}@media (min-width: 60rem){.hy-hero{margin-top:32px}}@media (min-width: 60rem){.hy-hero:not(.has-shortcuts){margin-bottom:32px}}@media (min-width: 75.0625rem){.without-sidebar .hy-hero{max-width:1216px;margin-right:auto;margin-left:auto}}@media (min-width: 75.0625rem){.with-sidebar .hy-hero{padding-left:32px;padding-right:32px}}@media (min-width: 1601px){.with-sidebar .hy-hero{padding-right:0;padding-left:0;max-width:1216px;margin-right:auto;margin-left:auto}}@media (min-width: 60rem){.hy-hero--white{margin-top:0}}@media (min-width: 60rem){.hy-hero--white:not(.has-shortcuts){padding-bottom:48px}}.hy-hero--white:not(.has-shortcuts):after{width:100%;background-color:var(--grayscale-medium-dark);height:1px;content:"";margin:0 auto;display:block}@media (min-width: 60rem){.hy-hero--white:not(.has-shortcuts):after{position:absolute;left:0;right:0;bottom:0}}.hy-hero--white:not(.hy-hero--front_page):after{max-width:1216px}.hy-hero__container{position:relative}@media (min-width: 60rem){.hy-hero__container{display:grid;position:relative}}@media (min-width: 60rem){.hy-hero--small .hy-hero__container{grid-template-columns:60% 1fr}}@media (min-width: 60rem){.hy-hero--large .hy-hero__container{grid-template-columns:repeat(2, 1fr)}}.hy-hero__content-container{padding:24px 1rem 40px;margin:0 auto;width:100%}@media (min-width: 30rem){.hy-hero__content-container{padding:40px 2rem}}@media (min-width: 75.0625rem){.hy-hero__content-container{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;padding:40px 24px}}@media (min-width: 1601px){.hy-hero__content-container{max-width:1216px}}.hy-hero--black .hy-hero__content-container{background-color:var(--grayscale-black)}.hy-hero--blue .hy-hero__content-container{background-color:var(--brand-main)}.hy-hero--white .hy-hero__content-container{background-color:var(--grayscale-white)}@media (min-width: 75.0625rem){.hy-hero--white .hy-hero__content-container{padding:40px 24px 40px 0}}.hy-hero__content{position:relative}h2.hy-hero__title{-ms-hyphens:auto;hyphens:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;max-width:100%;width:auto}.hy-hero--blue h2.hy-hero__title{color:var(--grayscale-white) !important}.hy-hero--black h2.hy-hero__title{color:var(--grayscale-white) !important}.hy-hero--white h2.hy-hero__title{color:var(--grayscale-black) !important}h2.hy-hero__title.hy-heading__hero{font-size:2.25rem;line-height:33px;font-weight:700;color:var(--grayscale-black);font-family:var(--main-font-family);letter-spacing:-0.8px;margin-bottom:0;text-transform:none;text-wrap:balance}@media (min-width: 1024px){h2.hy-hero__title.hy-heading__hero{font-size:2.25rem;line-height:40px;letter-spacing:-1.15px}}@media (min-width: 1601px){h2.hy-hero__title.hy-heading__hero{font-size:2.375rem;line-height:48px;letter-spacing:-1.3px}}.hy-hero__description{font-size:1rem;line-height:24px;font-family:var(--main-font-family);margin:16px 0 0 0;padding:0;position:relative;text-wrap:pretty}@media (min-width: 1601px){.hy-hero__description{font-size:1.0625rem;line-height:26px}}.hy-hero--black .hy-hero__description{color:var(--grayscale-white)}.hy-hero--blue .hy-hero__description{color:var(--grayscale-white)}.hy-hero--white .hy-hero__description{color:var(--grayscale-black)}.hy-hero__actions{margin-top:24px}.hy-hero__image-container{margin:0;padding:0;position:relative}.hy-hero__image-container figure{margin:0}@media (min-width: 60rem){.hy-hero__image-container{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;padding:8px 0}}@media (min-width: 60rem){.hy-hero--front_page .hy-hero__image-container{padding:0}}.hy-image__image{display:block;height:100%;min-height:205px;-o-object-fit:contain;object-fit:contain;width:100%}.has-cover .hy-image__image{-o-object-fit:cover;object-fit:cover}.hy-hero.hy-hero--group_landing.hy-hero--generic_site_group h2.hy-hero__title.hy-heading__hero,.hy-hero.hy-hero--research_group h2.hy-hero__title.hy-heading__hero{font-size:2rem;line-height:38px;font-weight:700;color:var(--grayscale-black);font-family:var(--main-font-family);letter-spacing:-0.8px;margin-bottom:0;text-transform:uppercase}@media (min-width: 1024px){.hy-hero.hy-hero--group_landing.hy-hero--generic_site_group h2.hy-hero__title.hy-heading__hero,.hy-hero.hy-hero--research_group h2.hy-hero__title.hy-heading__hero{font-size:2.875rem;line-height:54px;letter-spacing:-1.15px}}@media (min-width: 1601px){.hy-hero.hy-hero--group_landing.hy-hero--generic_site_group h2.hy-hero__title.hy-heading__hero,.hy-hero.hy-hero--research_group h2.hy-hero__title.hy-heading__hero{font-size:3.25rem;line-height:60px;letter-spacing:-1.3px}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--white{padding-top:40px;margin-top:0}}.hy-hero.hy-hero--front_page h2.hy-hero__title.hy-heading__hero{font-size:2rem;line-height:38px;font-weight:700;color:var(--grayscale-black);font-family:var(--main-font-family);letter-spacing:-0.8px;margin-bottom:0;text-transform:uppercase}@media (min-width: 1024px){.hy-hero.hy-hero--front_page h2.hy-hero__title.hy-heading__hero{font-size:2.875rem;line-height:54px;letter-spacing:-1.15px}}@media (min-width: 1601px){.hy-hero.hy-hero--front_page h2.hy-hero__title.hy-heading__hero{font-size:3.25rem;line-height:60px;letter-spacing:-1.3px}}@media (min-width: 75.0625rem){.hy-hero.hy-hero--front_page{margin-left:-32px;margin-right:-32px;max-width:none}}.hy-hero.hy-hero--front_page .hy-hero__container{position:relative}@media (min-width: 60rem){.hy-hero.hy-hero--front_page .hy-hero__container{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}}.hy-hero.hy-hero--front_page .hy-hero__content-container{padding:24px 1rem 40px;margin:0 auto;width:100%}.hy-hero--black .hy-hero.hy-hero--front_page .hy-hero__content-container{background-color:var(--grayscale-black)}.hy-hero--blue .hy-hero.hy-hero--front_page .hy-hero__content-container{background-color:var(--brand-main)}.hy-hero--white .hy-hero.hy-hero--front_page .hy-hero__content-container{background-color:var(--grayscale-white)}@media (min-width: 30rem){.hy-hero.hy-hero--front_page .hy-hero__content-container{padding:24px 2rem 40px}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page .hy-hero__content-container{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;min-height:330px;padding:56px 2rem}}@media (min-width: 1060px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:373px}}@media (min-width: 1160px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:480px}}@media (min-width: 75.0625rem){.hy-hero.hy-hero--front_page .hy-hero__content-container{padding-left:32px;padding-right:8px}}@media (min-width: 1260px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:443px}}@media (min-width: 1280px){.hy-hero.hy-hero--front_page .hy-hero__content-container{max-width:1216px;padding-left:0}}@media (min-width: 1360px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:478px}}@media (min-width: 1460px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:513px}}@media (min-width: 1560px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:548px}}@media (min-width: 1601px){.hy-hero.hy-hero--front_page .hy-hero__content-container{padding-left:0}}@media (min-width: 1660px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:583px}}@media (min-width: 1760px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:619px}}@media (min-width: 1860px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:654px}}@media (min-width: 1920px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:675px}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--small .hy-hero__image-container{width:40%}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--small .hy-hero__content{max-width:60%}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--large .hy-hero__image-container{width:50%}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--large .hy-hero__content{max-width:50%}}.hy-hero.hy-hero--front_page .hy-hero__image-container{background-position:50% 50%;background-size:cover;background:transparent;margin:0;padding:0;position:relative}.hy-hero.hy-hero--front_page .hy-hero__image-container figure{margin:0}@media (min-width: 60rem){.hy-hero.hy-hero--front_page .hy-hero__image-container{background-color:var(--grayscale-white);bottom:0;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;padding:8px 0;position:absolute;right:0;top:0}}.hy-hero.hy-hero--front_page .hy-hero__content{position:relative}@media (min-width: 60rem){.hy-hero.hy-hero--front_page .hy-hero__content{padding-right:24px}}.hy-hero.hy-hero--front_page .hy-image__image{display:block;height:100%;min-height:205px;-o-object-fit:cover;object-fit:cover;width:100%}.hy-hero__spacer-box{display:none}@media (min-width: 60rem){.hy-hero__spacer-box{display:block;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;position:absolute;inset:0}}@media (min-width: 60rem){.hy-hero--small .hy-hero__spacer-box{width:60%}}@media (min-width: 60rem){.hy-hero--large .hy-hero__spacer-box{width:50%}}.hy-hero--black .hy-hero__spacer-box{background-color:var(--grayscale-black)}.hy-hero--blue .hy-hero__spacer-box{background-color:var(--brand-main)}.hy-hero--white .hy-hero__spacer-box{background-color:var(--grayscale-white)}';let l=null;let m=250;const c=class{constructor(h){e(this,h);this.heroType=o.landing;this.heroGroupType=a.default;this.colorVariant=n.blue;this.sizeVariant=d.large;this.image=undefined;this.imageHeight=null;this.imageWidth=null;this.imageAltText="";this.disableLazy=false;this.hasShortcuts=false;this.heading=undefined;this.description=undefined;this.url=undefined;this.urlTitle=undefined;this.scLabel=undefined;this.isExternal=false;this.sourceSet=undefined}async componentWillLoad(){this._sourceSet=await r(this.sourceSet)}handleHeroImageObjectFitValue(e,h){const i=h.getElementsByClassName("hy-hero__content-container")[0];if(e==="small"){if(i.offsetHeight>=300){h.classList.add("has-cover")}else{h.classList.remove("has-cover")}}if(e==="large"){if(i.offsetHeight>=344){h.classList.add("has-cover")}else{h.classList.remove("has-cover")}}}render(){let e=s.heroWhite;let t=this.colorVariant;let r=this.heroType;if(this.heroType==="minor_landing"){t=n.white;r=o.landing}if(t===n.blue){e=s.heroBlue}if(t===n.black){e=s.heroBlack}if(!t||t==="fp_white"){t=n.white}const a=["hy-hero",`hy-hero--${r}`,`hy-hero--${this.heroGroupType}`,`hy-hero--${t}`,`hy-hero--${this.sizeVariant}`];const d=["hy-hero__title","hy-heading__hero"].join(" ");if(this.hasShortcuts){a.push("has-shortcuts")}const y=16;const c=10;const g=c/y*100;const _={"--aspectRatio":`${g}%`};window.onload=()=>{const e=document.getElementsByClassName("hy-hero")[0];this.handleHeroImageObjectFitValue(this.sizeVariant,e);window.addEventListener("resize",(()=>{clearTimeout(l);l=setTimeout((()=>this.handleHeroImageObjectFitValue(this.sizeVariant,e)),m)}))};if(r==="front_page"){return h(i,null,h("div",{class:a.join(" ")},h("div",{class:`hy-hero__container`},h("div",{class:`hy-hero__image-container`,style:_},this.image&&(this._sourceSet?h("picture",null,this._sourceSet.map((e=>h("source",{srcSet:e.src,media:e.media,type:e.type,sizes:e.sizes?e.sizes:""}))),h("img",{loading:this.disableLazy?"eager":"lazy",alt:this.imageAltText,class:`hy-image__image`,src:this.image,height:this.imageHeight,width:this.imageWidth})):h("img",{loading:this.disableLazy?"eager":"lazy",alt:this.imageAltText,class:`hy-image__image`,src:this.image,height:this.imageHeight,width:this.imageWidth}))),h("div",{class:`hy-hero__spacer-box`}),h("div",{class:`hy-hero__content-container`},h("div",{class:`hy-hero__content`},h("div",{class:`hy-hero__title-container`},h("h2",{innerHTML:this.heading,class:d})),this.description&&h("p",{class:`hy-hero__description`},this.description),this.url&&h("div",{class:`hy-hero__actions`},h("hy-cta-button",{"link-content":this.urlTitle,"sc-label":this.scLabel,url:this.url,"is-external":this.isExternal,variant:e})))))),h("hy-box",{mb:"2, 2, 1, 1"}))}return h(i,null,h("div",{class:a.join(" ")},h("div",{class:`hy-hero__container`},h("div",{class:`hy-hero__image-container`,style:_},this.image&&(this._sourceSet?h("picture",null,this._sourceSet.map((e=>h("source",{srcSet:e.src,media:e.media,type:e.type,sizes:e.sizes?e.sizes:""}))),h("img",{loading:this.disableLazy?"eager":"lazy",alt:this.imageAltText,class:`hy-image__image`,src:this.image,height:this.imageHeight,width:this.imageWidth})):h("img",{loading:this.disableLazy?"eager":"lazy",alt:this.imageAltText,class:`hy-image__image`,src:this.image,height:this.imageHeight,width:this.imageWidth}))),h("div",{class:`hy-hero__content-container`},h("div",{class:`hy-hero__content`},h("div",{class:`hy-hero__title-container`},h("h2",{innerHTML:this.heading,class:d})),this.description&&h("p",{class:`hy-hero__description`},this.description),this.url&&h("div",{class:`hy-hero__actions`},h("hy-cta-button",{"link-content":this.urlTitle,"sc-label":this.scLabel,url:this.url,"is-external":this.isExternal,variant:e})))))),h("hy-box",{mb:"2, 2, 1, 1"}))}get el(){return t(this)}};c.style=y;export{c as hy_hero};
 //# sourceMappingURL=hy-hero.entry.js.map

package/dist/huds-lib/hy-hero.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["hyHeroCss","timeout","delay","HyHero","HeroTypeVariant","landing","HeroGroupTypeVariant","default","HeroColorVariant","blue","HeroSizeVariant","large","async","this","_sourceSet","jsonParserWorker","sourceSet","handleHeroImageObjectFitValue","heroSizeVariant","heroElement","heroContentContainerElement","getElementsByClassName","offsetHeight","classList","add","remove","render","variant","CtaLinkButtonVariants","heroWhite","colorVariantValue","colorVariant","heroTypeValue","heroType","white","heroBlue","black","heroBlack","hyHeroClasses","heroGroupType","sizeVariant","heroTitleClasses","join","hasShortcuts","push","aspectRatioWidth","aspectRatioHeight","aspect","aspectRatio","window","onload","document","addEventListener","clearTimeout","setTimeout","h","Host","class","style","image","map","item","srcSet","src","media","type","sizes","loading","disableLazy","alt","imageAltText","height","imageHeight","width","imageWidth","innerHTML","heading","description","url","urlTitle","scLabel","isExternal","mb"],"sources":["./src/components/hy-hero/hy-hero.scss?tag=hy-hero","./src/components/hy-hero/hy-hero.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-hero {\n  position: relative;\n  padding-bottom: 0;\n\n  @include breakpoint($wide) {\n    margin-top: 32px;\n  }\n\n  &:not(.has-shortcuts) {\n    @include breakpoint($wide) {\n      margin-bottom: 32px;\n    }\n  }\n\n  .without-sidebar & {\n    @include breakpoint($extrawide) {\n      max-width: 1216px;\n      margin-right: auto;\n      margin-left: auto;\n    }\n  }\n\n  .with-sidebar & {\n    @include breakpoint($extrawide) {\n      padding-left: 32px;\n      padding-right: 32px;\n    }\n\n    @include breakpoint($xlarge) {\n      padding-right: 0;\n      padding-left: 0;\n      max-width: 1216px;\n      margin-right: auto;\n      margin-left: auto;\n    }\n  }\n\n  &--white {\n    @include breakpoint($wide) {\n      margin-top: 0;\n    }\n\n    &:not(.has-shortcuts) {\n      @include breakpoint($wide) {\n        padding-bottom: 48px;\n      }\n    }\n\n    &:not(.has-shortcuts):after {\n      width: 100%;\n      background-color: var(--grayscale-medium-dark);\n      height: 1px;\n      content: \"\";\n      margin: 0 auto;\n      display: block;\n\n      @include breakpoint($wide) {\n        position: absolute;\n        left: 0;\n        right: 0;\n        bottom: 0;\n      }\n    }\n\n    &:not(.hy-hero--front_page):after {\n      max-width: 1216px;\n    }\n  }\n}\n\n.hy-hero__container {\n  position: relative;\n\n  @include breakpoint($wide) {\n    display: grid;\n    position: relative;\n  }\n\n  .hy-hero--small & {\n    @include breakpoint($wide) {\n      grid-template-columns: 60% 1fr;\n    }\n  }\n\n  .hy-hero--large & {\n    @include breakpoint($wide) {\n      grid-template-columns: repeat(2, 1fr);\n    }\n  }\n}\n\n.hy-hero__content-container {\n  padding: 24px 1rem 40px;\n  margin: 0 auto;\n  width: 100%;\n\n  @include breakpoint($narrow) {\n    padding: 40px 2rem;\n  }\n\n  @include breakpoint($extrawide) {\n    align-items: center;\n    display: flex;\n    padding: 40px 24px;\n  }\n\n  @include breakpoint($xlarge) {\n    max-width: 1216px;\n  }\n\n  .hy-hero--black & {\n    background-color: var(--grayscale-black);\n  }\n\n  .hy-hero--blue & {\n    background-color: var(--brand-main);\n  }\n\n  .hy-hero--white & {\n    background-color: var(--grayscale-white);\n\n    @include breakpoint($extrawide) {\n      padding: 40px 24px 40px 0;\n    }\n  }\n}\n\n.hy-hero__content {\n  position: relative;\n}\n\nh2.hy-hero__title {\n  hyphens: auto;\n  display: flex;\n  flex-grow: 1;\n  flex-shrink: 0;\n  max-width: 100%;\n  width: auto;\n\n  .hy-hero--blue & {\n    color: var(--grayscale-white) !important;\n  }\n\n  .hy-hero--black & {\n    color: var(--grayscale-white) !important;\n  }\n\n  .hy-hero--white & {\n    color: var(--grayscale-black) !important;\n  }\n\n  &.hy-heading__hero {\n    @include font-size(36px, 33px);\n    @include font-weight($bold);\n    color: var(--grayscale-black);\n    font-family: var(--main-font-family);\n    letter-spacing: -0.8px;\n    margin-bottom: 0;\n    text-transform: none;\n\n    @include breakpoint(1024px) {\n      @include font-size(36px, 40px);\n      letter-spacing: -1.15px;\n    }\n\n    @include breakpoint($xlarge) {\n      @include font-size(38px, 48px);\n      letter-spacing: -1.3px;\n    }\n  }\n}\n\n.hy-hero__description {\n  @include font-size(16px, 24px);\n  font-family: var(--main-font-family);\n  margin: 16px 0 0 0;\n  padding: 0;\n  position: relative;\n\n  @include breakpoint($xlarge) {\n    @include font-size(17px, 26px);\n  }\n\n  .hy-hero--black & {\n    color: var(--grayscale-white);\n  }\n\n  .hy-hero--blue & {\n    color: var(--grayscale-white);\n  }\n\n  .hy-hero--white & {\n    color: var(--grayscale-black);\n  }\n}\n\n.hy-hero__actions {\n  margin-top: 24px;\n}\n\n.hy-hero__image-container {\n  margin: 0;\n  padding: 0;\n  position: relative;\n\n  figure {\n    margin: 0;\n  }\n\n  @include breakpoint($wide) {\n    order: 2;\n    padding: 8px 0;\n  }\n\n  .hy-hero--front_page & {\n    @include breakpoint($wide) {\n      padding: 0;\n    }\n  }\n}\n\n.hy-image__image {\n  display: block;\n  height: 100%;\n  min-height: 205px;\n  object-fit: contain;\n  width: 100%;\n\n  .has-cover & {\n    object-fit: cover;\n  }\n}\n\n// Research group and generic with minor landing\n.hy-hero.hy-hero--group_landing.hy-hero--generic_site_group,\n.hy-hero.hy-hero--research_group {\n  h2.hy-hero__title.hy-heading__hero {\n    @include font-size(32px, 38px);\n    @include font-weight($bold);\n    color: var(--grayscale-black);\n    font-family: var(--main-font-family);\n    letter-spacing: -0.8px;\n    margin-bottom: 0;\n    text-transform: uppercase;\n\n    @include breakpoint(1024px) {\n      @include font-size(46px, 54px);\n      letter-spacing: -1.15px;\n    }\n\n    @include breakpoint($xlarge) {\n      @include font-size(52px, 60px);\n      letter-spacing: -1.3px;\n    }\n  }\n}\n\n// FRONTPAGE VARIATION\n\n.hy-hero.hy-hero--front_page {\n  &.hy-hero--white {\n    @include breakpoint($wide) {\n      padding-top: 40px;\n      margin-top: 0;\n    }\n  }\n\n  h2.hy-hero__title.hy-heading__hero {\n    @include font-size(32px, 38px);\n    @include font-weight($bold);\n    color: var(--grayscale-black);\n    font-family: var(--main-font-family);\n    letter-spacing: -0.8px;\n    margin-bottom: 0;\n    text-transform: uppercase;\n\n    @include breakpoint(1024px) {\n      @include font-size(46px, 54px);\n      letter-spacing: -1.15px;\n    }\n\n    @include breakpoint($xlarge) {\n      @include font-size(52px, 60px);\n      letter-spacing: -1.3px;\n    }\n  }\n\n  @include breakpoint($extrawide) {\n    margin-left: -32px;\n    margin-right: -32px;\n    max-width: none;\n  }\n\n  .hy-hero__container {\n    position: relative;\n\n    @include breakpoint($wide) {\n      display: flex;\n      position: relative;\n    }\n  }\n\n  .hy-hero__content-container {\n    padding: 24px 1rem 40px;\n    margin: 0 auto;\n    width: 100%;\n\n    .hy-hero--black & {\n      background-color: var(--grayscale-black);\n    }\n\n    .hy-hero--blue & {\n      background-color: var(--brand-main);\n    }\n\n    .hy-hero--white & {\n      background-color: var(--grayscale-white);\n    }\n\n    @include breakpoint($narrow) {\n      padding: 24px 2rem 40px;\n    }\n\n    @include breakpoint($wide) {\n      align-items: center;\n      display: flex;\n      min-height: 330px;\n      padding: 56px 2rem;\n    }\n\n    @include breakpoint(1060px) {\n      min-height: 373px;\n    }\n\n    @include breakpoint(1160px) {\n      min-height: 480px;\n    }\n\n    @include breakpoint($extrawide) {\n      padding-left: 32px;\n      padding-right: 8px;\n    }\n\n    @include breakpoint(1260px) {\n      min-height: 443px;\n    }\n\n    @include breakpoint(1280px) {\n      max-width: 1216px;\n      padding-left: 0;\n    }\n\n    @include breakpoint(1360px) {\n      min-height: 478px;\n    }\n\n    @include breakpoint(1460px) {\n      min-height: 513px;\n    }\n\n    @include breakpoint(1560px) {\n      min-height: 548px;\n    }\n\n    @include breakpoint($xlarge) {\n      padding-left: 0;\n    }\n\n    @include breakpoint(1660px) {\n      min-height: 583px;\n    }\n\n    @include breakpoint(1760px) {\n      min-height: 619px;\n    }\n\n    @include breakpoint(1860px) {\n      min-height: 654px;\n    }\n\n    @include breakpoint(1920px) {\n      min-height: 675px;\n    }\n  }\n\n  &.hy-hero--small {\n    .hy-hero__image-container {\n      @include breakpoint($wide) {\n        width: 40%;\n      }\n    }\n\n    .hy-hero__content {\n      @include breakpoint($wide) {\n        max-width: 60%;\n      }\n    }\n  }\n\n  &.hy-hero--large {\n    .hy-hero__image-container {\n      @include breakpoint($wide) {\n        width: 50%;\n      }\n    }\n\n    .hy-hero__content {\n      @include breakpoint($wide) {\n        max-width: 50%;\n      }\n    }\n  }\n\n  .hy-hero__image-container {\n    background-position: 50% 50%;\n    background-size: cover;\n    background: transparent;\n    margin: 0;\n    padding: 0;\n    position: relative;\n\n    figure {\n      margin: 0;\n    }\n\n    @include breakpoint($wide) {\n      background-color: var(--grayscale-white);\n      bottom: 0;\n      order: 2;\n      padding: 8px 0;\n      position: absolute;\n      right: 0;\n      top: 0;\n    }\n  }\n\n  .hy-hero__content {\n    position: relative;\n\n    @include breakpoint($wide) {\n      padding-right: 24px;\n    }\n  }\n\n  .hy-image__image {\n    display: block;\n    height: 100%;\n    min-height: 205px;\n    object-fit: cover;\n    width: 100%;\n  }\n}\n\n.hy-hero__spacer-box {\n  display: none;\n\n  @include breakpoint($wide) {\n    display: block;\n    order: 1;\n    position: absolute;\n    inset: 0;\n  }\n\n  .hy-hero--small & {\n    @include breakpoint($wide) {\n      width: 60%;\n    }\n  }\n\n  .hy-hero--large & {\n    @include breakpoint($wide) {\n      width: 50%;\n    }\n  }\n\n  .hy-hero--black & {\n    background-color: var(--grayscale-black);\n  }\n\n  .hy-hero--blue & {\n    background-color: var(--brand-main);\n  }\n\n  .hy-hero--white & {\n    background-color: var(--grayscale-white);\n  }\n}\n","export interface ImageSrcSet {\n  src: any;\n  media: string;\n  type: string;\n  sizes: string | null;\n}\nlet timeout = null;\nlet delay = 250;\n\nimport {Component, Element, h, Host, Prop} from \"@stencil/core\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\nimport {\n  CtaLinkButtonVariants,\n  HeroColorVariant,\n  HeroSizeVariant,\n  HeroGroupTypeVariant,\n  HeroTypeVariant,\n} from \"../../utils/utils\";\n\n@Component({\n  tag: \"hy-hero\",\n  styleUrl: \"hy-hero.scss\",\n  shadow: false,\n})\nexport class HyHero {\n  @Element() el: HTMLElement;\n  @Prop() heroType: HeroTypeVariant = HeroTypeVariant.landing;\n  @Prop() heroGroupType: HeroGroupTypeVariant = HeroGroupTypeVariant.default;\n  @Prop() colorVariant: HeroColorVariant = HeroColorVariant.blue;\n  @Prop() sizeVariant: HeroSizeVariant = HeroSizeVariant.large;\n  @Prop() image: string;\n  @Prop() imageHeight: number = null;\n  @Prop() imageWidth: number = null;\n  @Prop() imageAltText: string = \"\";\n  @Prop() disableLazy: boolean = false;\n  @Prop() hasShortcuts: boolean = false;\n  @Prop() heading: string;\n  @Prop() description: string;\n  @Prop() url: string;\n  @Prop() urlTitle: string;\n  @Prop() scLabel?: string;\n  @Prop() isExternal: boolean = false;\n  private _sourceSet: ImageSrcSet[];\n  @Prop() sourceSet: ImageSrcSet[] | string;\n\n  async componentWillLoad() {\n    this._sourceSet = await jsonParserWorker(this.sourceSet);\n  }\n\n  handleHeroImageObjectFitValue(heroSizeVariant, heroElement) {\n    const heroContentContainerElement = heroElement.getElementsByClassName(\n      \"hy-hero__content-container\"\n    )[0] as HTMLElement;\n\n    if (heroSizeVariant === \"small\") {\n      if (heroContentContainerElement.offsetHeight >= 300) {\n        heroElement.classList.add(\"has-cover\");\n      } else {\n        heroElement.classList.remove(\"has-cover\");\n      }\n    }\n\n    if (heroSizeVariant === \"large\") {\n      if (heroContentContainerElement.offsetHeight >= 344) {\n        heroElement.classList.add(\"has-cover\");\n      } else {\n        heroElement.classList.remove(\"has-cover\");\n      }\n    }\n  }\n\n  render() {\n    let variant = CtaLinkButtonVariants.heroWhite;\n    let colorVariantValue = this.colorVariant;\n    let heroTypeValue = this.heroType;\n\n    if (this.heroType === \"minor_landing\") {\n      colorVariantValue = HeroColorVariant.white;\n      heroTypeValue = HeroTypeVariant.landing;\n    }\n\n    if (colorVariantValue === HeroColorVariant.blue) {\n      variant = CtaLinkButtonVariants.heroBlue;\n    }\n\n    if (colorVariantValue === HeroColorVariant.black) {\n      variant = CtaLinkButtonVariants.heroBlack;\n    }\n\n    if (!colorVariantValue || colorVariantValue === \"fp_white\") {\n      colorVariantValue = HeroColorVariant.white;\n    }\n\n    const hyHeroClasses = [\n      \"hy-hero\",\n      `hy-hero--${heroTypeValue}`,\n      `hy-hero--${this.heroGroupType}`,\n      `hy-hero--${colorVariantValue}`,\n      `hy-hero--${this.sizeVariant}`,\n    ];\n\n    const heroTitleClasses = [\"hy-hero__title\", \"hy-heading__hero\"].join(\" \");\n\n    // If there is a Shortcuts block after hero, add the class 'shortcuts' to remove underline.\n    if (this.hasShortcuts) {\n      hyHeroClasses.push(\"has-shortcuts\");\n    }\n\n    const aspectRatioWidth = 16;\n    const aspectRatioHeight = 10;\n    const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;\n    const aspectRatio = {\n      \"--aspectRatio\": `${aspect}%` as \"aspectRatio\",\n    };\n\n    window.onload = () => {\n      const heroElement = document.getElementsByClassName(\"hy-hero\")[0] as HTMLElement;\n      this.handleHeroImageObjectFitValue(this.sizeVariant, heroElement);\n      window.addEventListener(\"resize\", () => {\n        clearTimeout(timeout);\n        timeout = setTimeout(() => this.handleHeroImageObjectFitValue(this.sizeVariant, heroElement), delay);\n      });\n    };\n\n    if (heroTypeValue === \"front_page\") {\n      return (\n        <Host>\n          <div class={hyHeroClasses.join(\" \")}>\n            <div class={`hy-hero__container`}>\n              <div class={`hy-hero__image-container`} style={aspectRatio}>\n                {this.image &&\n                  (this._sourceSet ? (\n                    <picture>\n                      {this._sourceSet.map((item) => (\n                        <source\n                          srcSet={item.src}\n                          media={item.media}\n                          type={item.type}\n                          sizes={item.sizes ? item.sizes : \"\"}\n                        />\n                      ))}\n                      <img\n                        loading={this.disableLazy ? \"eager\" : \"lazy\"}\n                        alt={this.imageAltText}\n                        class={`hy-image__image`}\n                        src={this.image}\n                        height={this.imageHeight}\n                        width={this.imageWidth}\n                      />\n                    </picture>\n                  ) : (\n                    <img\n                      loading={this.disableLazy ? \"eager\" : \"lazy\"}\n                      alt={this.imageAltText}\n                      class={`hy-image__image`}\n                      src={this.image}\n                      height={this.imageHeight}\n                      width={this.imageWidth}\n                    />\n                  ))}\n              </div>\n              <div class={`hy-hero__spacer-box`}></div>\n              <div class={`hy-hero__content-container`}>\n                <div class={`hy-hero__content`}>\n                  <div class={`hy-hero__title-container`}>\n                    <h2 innerHTML={this.heading} class={heroTitleClasses}></h2>\n                  </div>\n                  {this.description && <p class={`hy-hero__description`}>{this.description}</p>}\n                  {this.url && (\n                    <div class={`hy-hero__actions`}>\n                      <hy-cta-button\n                        link-content={this.urlTitle}\n                        sc-label={this.scLabel}\n                        url={this.url}\n                        is-external={this.isExternal}\n                        variant={variant}\n                      />\n                    </div>\n                  )}\n                </div>\n              </div>\n            </div>\n          </div>\n          <hy-box mb=\"2, 2, 1, 1\" />\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <div class={hyHeroClasses.join(\" \")}>\n          <div class={`hy-hero__container`}>\n            <div class={`hy-hero__image-container`} style={aspectRatio}>\n              {this.image &&\n                (this._sourceSet ? (\n                  <picture>\n                    {this._sourceSet.map((item) => (\n                      <source\n                        srcSet={item.src}\n                        media={item.media}\n                        type={item.type}\n                        sizes={item.sizes ? item.sizes : \"\"}\n                      />\n                    ))}\n                    <img\n                      loading={this.disableLazy ? \"eager\" : \"lazy\"}\n                      alt={this.imageAltText}\n                      class={`hy-image__image`}\n                      src={this.image}\n                      height={this.imageHeight}\n                      width={this.imageWidth}\n                    />\n                  </picture>\n                ) : (\n                  <img\n                    loading={this.disableLazy ? \"eager\" : \"lazy\"}\n                    alt={this.imageAltText}\n                    class={`hy-image__image`}\n                    src={this.image}\n                    height={this.imageHeight}\n                    width={this.imageWidth}\n                  />\n                ))}\n            </div>\n            <div class={`hy-hero__content-container`}>\n              <div class={`hy-hero__content`}>\n                <div class={`hy-hero__title-container`}>\n                  <h2 innerHTML={this.heading} class={heroTitleClasses}></h2>\n                </div>\n                {this.description && <p class={`hy-hero__description`}>{this.description}</p>}\n                {this.url && (\n                  <div class={`hy-hero__actions`}>\n                    <hy-cta-button\n                      link-content={this.urlTitle}\n                      sc-label={this.scLabel}\n                      url={this.url}\n                      is-external={this.isExternal}\n                      variant={variant}\n                    />\n                  </div>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n        <hy-box mb=\"2, 2, 1, 1\" />\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["hyHeroCss","timeout","delay","HyHero","HeroTypeVariant","landing","HeroGroupTypeVariant","default","HeroColorVariant","blue","HeroSizeVariant","large","async","this","_sourceSet","jsonParserWorker","sourceSet","handleHeroImageObjectFitValue","heroSizeVariant","heroElement","heroContentContainerElement","getElementsByClassName","offsetHeight","classList","add","remove","render","variant","CtaLinkButtonVariants","heroWhite","colorVariantValue","colorVariant","heroTypeValue","heroType","white","heroBlue","black","heroBlack","hyHeroClasses","heroGroupType","sizeVariant","heroTitleClasses","join","hasShortcuts","push","aspectRatioWidth","aspectRatioHeight","aspect","aspectRatio","window","onload","document","addEventListener","clearTimeout","setTimeout","h","Host","class","style","image","map","item","srcSet","src","media","type","sizes","loading","disableLazy","alt","imageAltText","height","imageHeight","width","imageWidth","innerHTML","heading","description","url","urlTitle","scLabel","isExternal","mb"],"sources":["./src/components/hy-hero/hy-hero.scss?tag=hy-hero","./src/components/hy-hero/hy-hero.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-hero {\n  position: relative;\n  padding-bottom: 0;\n\n  @include breakpoint($wide) {\n    margin-top: 32px;\n  }\n\n  &:not(.has-shortcuts) {\n    @include breakpoint($wide) {\n      margin-bottom: 32px;\n    }\n  }\n\n  .without-sidebar & {\n    @include breakpoint($extrawide) {\n      max-width: 1216px;\n      margin-right: auto;\n      margin-left: auto;\n    }\n  }\n\n  .with-sidebar & {\n    @include breakpoint($extrawide) {\n      padding-left: 32px;\n      padding-right: 32px;\n    }\n\n    @include breakpoint($xlarge) {\n      padding-right: 0;\n      padding-left: 0;\n      max-width: 1216px;\n      margin-right: auto;\n      margin-left: auto;\n    }\n  }\n\n  &--white {\n    @include breakpoint($wide) {\n      margin-top: 0;\n    }\n\n    &:not(.has-shortcuts) {\n      @include breakpoint($wide) {\n        padding-bottom: 48px;\n      }\n    }\n\n    &:not(.has-shortcuts):after {\n      width: 100%;\n      background-color: var(--grayscale-medium-dark);\n      height: 1px;\n      content: \"\";\n      margin: 0 auto;\n      display: block;\n\n      @include breakpoint($wide) {\n        position: absolute;\n        left: 0;\n        right: 0;\n        bottom: 0;\n      }\n    }\n\n    &:not(.hy-hero--front_page):after {\n      max-width: 1216px;\n    }\n  }\n}\n\n.hy-hero__container {\n  position: relative;\n\n  @include breakpoint($wide) {\n    display: grid;\n    position: relative;\n  }\n\n  .hy-hero--small & {\n    @include breakpoint($wide) {\n      grid-template-columns: 60% 1fr;\n    }\n  }\n\n  .hy-hero--large & {\n    @include breakpoint($wide) {\n      grid-template-columns: repeat(2, 1fr);\n    }\n  }\n}\n\n.hy-hero__content-container {\n  padding: 24px 1rem 40px;\n  margin: 0 auto;\n  width: 100%;\n\n  @include breakpoint($narrow) {\n    padding: 40px 2rem;\n  }\n\n  @include breakpoint($extrawide) {\n    align-items: center;\n    display: flex;\n    padding: 40px 24px;\n  }\n\n  @include breakpoint($xlarge) {\n    max-width: 1216px;\n  }\n\n  .hy-hero--black & {\n    background-color: var(--grayscale-black);\n  }\n\n  .hy-hero--blue & {\n    background-color: var(--brand-main);\n  }\n\n  .hy-hero--white & {\n    background-color: var(--grayscale-white);\n\n    @include breakpoint($extrawide) {\n      padding: 40px 24px 40px 0;\n    }\n  }\n}\n\n.hy-hero__content {\n  position: relative;\n}\n\nh2.hy-hero__title {\n  hyphens: auto;\n  display: flex;\n  flex-grow: 1;\n  flex-shrink: 0;\n  max-width: 100%;\n  width: auto;\n\n  .hy-hero--blue & {\n    color: var(--grayscale-white) !important;\n  }\n\n  .hy-hero--black & {\n    color: var(--grayscale-white) !important;\n  }\n\n  .hy-hero--white & {\n    color: var(--grayscale-black) !important;\n  }\n\n  &.hy-heading__hero {\n    @include font-size(36px, 33px);\n    @include font-weight($bold);\n    color: var(--grayscale-black);\n    font-family: var(--main-font-family);\n    letter-spacing: -0.8px;\n    margin-bottom: 0;\n    text-transform: none;\n    text-wrap: balance;\n\n    @include breakpoint(1024px) {\n      @include font-size(36px, 40px);\n      letter-spacing: -1.15px;\n    }\n\n    @include breakpoint($xlarge) {\n      @include font-size(38px, 48px);\n      letter-spacing: -1.3px;\n    }\n  }\n}\n\n.hy-hero__description {\n  @include font-size(16px, 24px);\n  font-family: var(--main-font-family);\n  margin: 16px 0 0 0;\n  padding: 0;\n  position: relative;\n  text-wrap: pretty;\n\n  @include breakpoint($xlarge) {\n    @include font-size(17px, 26px);\n  }\n\n  .hy-hero--black & {\n    color: var(--grayscale-white);\n  }\n\n  .hy-hero--blue & {\n    color: var(--grayscale-white);\n  }\n\n  .hy-hero--white & {\n    color: var(--grayscale-black);\n  }\n}\n\n.hy-hero__actions {\n  margin-top: 24px;\n}\n\n.hy-hero__image-container {\n  margin: 0;\n  padding: 0;\n  position: relative;\n\n  figure {\n    margin: 0;\n  }\n\n  @include breakpoint($wide) {\n    order: 2;\n    padding: 8px 0;\n  }\n\n  .hy-hero--front_page & {\n    @include breakpoint($wide) {\n      padding: 0;\n    }\n  }\n}\n\n.hy-image__image {\n  display: block;\n  height: 100%;\n  min-height: 205px;\n  object-fit: contain;\n  width: 100%;\n\n  .has-cover & {\n    object-fit: cover;\n  }\n}\n\n// Research group and generic with minor landing\n.hy-hero.hy-hero--group_landing.hy-hero--generic_site_group,\n.hy-hero.hy-hero--research_group {\n  h2.hy-hero__title.hy-heading__hero {\n    @include font-size(32px, 38px);\n    @include font-weight($bold);\n    color: var(--grayscale-black);\n    font-family: var(--main-font-family);\n    letter-spacing: -0.8px;\n    margin-bottom: 0;\n    text-transform: uppercase;\n\n    @include breakpoint(1024px) {\n      @include font-size(46px, 54px);\n      letter-spacing: -1.15px;\n    }\n\n    @include breakpoint($xlarge) {\n      @include font-size(52px, 60px);\n      letter-spacing: -1.3px;\n    }\n  }\n}\n\n// FRONTPAGE VARIATION\n\n.hy-hero.hy-hero--front_page {\n  &.hy-hero--white {\n    @include breakpoint($wide) {\n      padding-top: 40px;\n      margin-top: 0;\n    }\n  }\n\n  h2.hy-hero__title.hy-heading__hero {\n    @include font-size(32px, 38px);\n    @include font-weight($bold);\n    color: var(--grayscale-black);\n    font-family: var(--main-font-family);\n    letter-spacing: -0.8px;\n    margin-bottom: 0;\n    text-transform: uppercase;\n\n    @include breakpoint(1024px) {\n      @include font-size(46px, 54px);\n      letter-spacing: -1.15px;\n    }\n\n    @include breakpoint($xlarge) {\n      @include font-size(52px, 60px);\n      letter-spacing: -1.3px;\n    }\n  }\n\n  @include breakpoint($extrawide) {\n    margin-left: -32px;\n    margin-right: -32px;\n    max-width: none;\n  }\n\n  .hy-hero__container {\n    position: relative;\n\n    @include breakpoint($wide) {\n      display: flex;\n      position: relative;\n    }\n  }\n\n  .hy-hero__content-container {\n    padding: 24px 1rem 40px;\n    margin: 0 auto;\n    width: 100%;\n\n    .hy-hero--black & {\n      background-color: var(--grayscale-black);\n    }\n\n    .hy-hero--blue & {\n      background-color: var(--brand-main);\n    }\n\n    .hy-hero--white & {\n      background-color: var(--grayscale-white);\n    }\n\n    @include breakpoint($narrow) {\n      padding: 24px 2rem 40px;\n    }\n\n    @include breakpoint($wide) {\n      align-items: center;\n      display: flex;\n      min-height: 330px;\n      padding: 56px 2rem;\n    }\n\n    @include breakpoint(1060px) {\n      min-height: 373px;\n    }\n\n    @include breakpoint(1160px) {\n      min-height: 480px;\n    }\n\n    @include breakpoint($extrawide) {\n      padding-left: 32px;\n      padding-right: 8px;\n    }\n\n    @include breakpoint(1260px) {\n      min-height: 443px;\n    }\n\n    @include breakpoint(1280px) {\n      max-width: 1216px;\n      padding-left: 0;\n    }\n\n    @include breakpoint(1360px) {\n      min-height: 478px;\n    }\n\n    @include breakpoint(1460px) {\n      min-height: 513px;\n    }\n\n    @include breakpoint(1560px) {\n      min-height: 548px;\n    }\n\n    @include breakpoint($xlarge) {\n      padding-left: 0;\n    }\n\n    @include breakpoint(1660px) {\n      min-height: 583px;\n    }\n\n    @include breakpoint(1760px) {\n      min-height: 619px;\n    }\n\n    @include breakpoint(1860px) {\n      min-height: 654px;\n    }\n\n    @include breakpoint(1920px) {\n      min-height: 675px;\n    }\n  }\n\n  &.hy-hero--small {\n    .hy-hero__image-container {\n      @include breakpoint($wide) {\n        width: 40%;\n      }\n    }\n\n    .hy-hero__content {\n      @include breakpoint($wide) {\n        max-width: 60%;\n      }\n    }\n  }\n\n  &.hy-hero--large {\n    .hy-hero__image-container {\n      @include breakpoint($wide) {\n        width: 50%;\n      }\n    }\n\n    .hy-hero__content {\n      @include breakpoint($wide) {\n        max-width: 50%;\n      }\n    }\n  }\n\n  .hy-hero__image-container {\n    background-position: 50% 50%;\n    background-size: cover;\n    background: transparent;\n    margin: 0;\n    padding: 0;\n    position: relative;\n\n    figure {\n      margin: 0;\n    }\n\n    @include breakpoint($wide) {\n      background-color: var(--grayscale-white);\n      bottom: 0;\n      order: 2;\n      padding: 8px 0;\n      position: absolute;\n      right: 0;\n      top: 0;\n    }\n  }\n\n  .hy-hero__content {\n    position: relative;\n\n    @include breakpoint($wide) {\n      padding-right: 24px;\n    }\n  }\n\n  .hy-image__image {\n    display: block;\n    height: 100%;\n    min-height: 205px;\n    object-fit: cover;\n    width: 100%;\n  }\n}\n\n.hy-hero__spacer-box {\n  display: none;\n\n  @include breakpoint($wide) {\n    display: block;\n    order: 1;\n    position: absolute;\n    inset: 0;\n  }\n\n  .hy-hero--small & {\n    @include breakpoint($wide) {\n      width: 60%;\n    }\n  }\n\n  .hy-hero--large & {\n    @include breakpoint($wide) {\n      width: 50%;\n    }\n  }\n\n  .hy-hero--black & {\n    background-color: var(--grayscale-black);\n  }\n\n  .hy-hero--blue & {\n    background-color: var(--brand-main);\n  }\n\n  .hy-hero--white & {\n    background-color: var(--grayscale-white);\n  }\n}\n","export interface ImageSrcSet {\n  src: any;\n  media: string;\n  type: string;\n  sizes: string | null;\n}\nlet timeout = null;\nlet delay = 250;\n\nimport {Component, Element, h, Host, Prop} from \"@stencil/core\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\nimport {\n  CtaLinkButtonVariants,\n  HeroColorVariant,\n  HeroSizeVariant,\n  HeroGroupTypeVariant,\n  HeroTypeVariant,\n} from \"../../utils/utils\";\n\n@Component({\n  tag: \"hy-hero\",\n  styleUrl: \"hy-hero.scss\",\n  shadow: false,\n})\nexport class HyHero {\n  @Element() el: HTMLElement;\n  @Prop() heroType: HeroTypeVariant = HeroTypeVariant.landing;\n  @Prop() heroGroupType: HeroGroupTypeVariant = HeroGroupTypeVariant.default;\n  @Prop() colorVariant: HeroColorVariant = HeroColorVariant.blue;\n  @Prop() sizeVariant: HeroSizeVariant = HeroSizeVariant.large;\n  @Prop() image: string;\n  @Prop() imageHeight: number = null;\n  @Prop() imageWidth: number = null;\n  @Prop() imageAltText: string = \"\";\n  @Prop() disableLazy: boolean = false;\n  @Prop() hasShortcuts: boolean = false;\n  @Prop() heading: string;\n  @Prop() description: string;\n  @Prop() url: string;\n  @Prop() urlTitle: string;\n  @Prop() scLabel?: string;\n  @Prop() isExternal: boolean = false;\n  private _sourceSet: ImageSrcSet[];\n  @Prop() sourceSet: ImageSrcSet[] | string;\n\n  async componentWillLoad() {\n    this._sourceSet = await jsonParserWorker(this.sourceSet);\n  }\n\n  handleHeroImageObjectFitValue(heroSizeVariant, heroElement) {\n    const heroContentContainerElement = heroElement.getElementsByClassName(\n      \"hy-hero__content-container\"\n    )[0] as HTMLElement;\n\n    if (heroSizeVariant === \"small\") {\n      if (heroContentContainerElement.offsetHeight >= 300) {\n        heroElement.classList.add(\"has-cover\");\n      } else {\n        heroElement.classList.remove(\"has-cover\");\n      }\n    }\n\n    if (heroSizeVariant === \"large\") {\n      if (heroContentContainerElement.offsetHeight >= 344) {\n        heroElement.classList.add(\"has-cover\");\n      } else {\n        heroElement.classList.remove(\"has-cover\");\n      }\n    }\n  }\n\n  render() {\n    let variant = CtaLinkButtonVariants.heroWhite;\n    let colorVariantValue = this.colorVariant;\n    let heroTypeValue = this.heroType;\n\n    if (this.heroType === \"minor_landing\") {\n      colorVariantValue = HeroColorVariant.white;\n      heroTypeValue = HeroTypeVariant.landing;\n    }\n\n    if (colorVariantValue === HeroColorVariant.blue) {\n      variant = CtaLinkButtonVariants.heroBlue;\n    }\n\n    if (colorVariantValue === HeroColorVariant.black) {\n      variant = CtaLinkButtonVariants.heroBlack;\n    }\n\n    if (!colorVariantValue || colorVariantValue === \"fp_white\") {\n      colorVariantValue = HeroColorVariant.white;\n    }\n\n    const hyHeroClasses = [\n      \"hy-hero\",\n      `hy-hero--${heroTypeValue}`,\n      `hy-hero--${this.heroGroupType}`,\n      `hy-hero--${colorVariantValue}`,\n      `hy-hero--${this.sizeVariant}`,\n    ];\n\n    const heroTitleClasses = [\"hy-hero__title\", \"hy-heading__hero\"].join(\" \");\n\n    // If there is a Shortcuts block after hero, add the class 'shortcuts' to remove underline.\n    if (this.hasShortcuts) {\n      hyHeroClasses.push(\"has-shortcuts\");\n    }\n\n    const aspectRatioWidth = 16;\n    const aspectRatioHeight = 10;\n    const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;\n    const aspectRatio = {\n      \"--aspectRatio\": `${aspect}%` as \"aspectRatio\",\n    };\n\n    window.onload = () => {\n      const heroElement = document.getElementsByClassName(\"hy-hero\")[0] as HTMLElement;\n      this.handleHeroImageObjectFitValue(this.sizeVariant, heroElement);\n      window.addEventListener(\"resize\", () => {\n        clearTimeout(timeout);\n        timeout = setTimeout(() => this.handleHeroImageObjectFitValue(this.sizeVariant, heroElement), delay);\n      });\n    };\n\n    if (heroTypeValue === \"front_page\") {\n      return (\n        <Host>\n          <div class={hyHeroClasses.join(\" \")}>\n            <div class={`hy-hero__container`}>\n              <div class={`hy-hero__image-container`} style={aspectRatio}>\n                {this.image &&\n                  (this._sourceSet ? (\n                    <picture>\n                      {this._sourceSet.map((item) => (\n                        <source\n                          srcSet={item.src}\n                          media={item.media}\n                          type={item.type}\n                          sizes={item.sizes ? item.sizes : \"\"}\n                        />\n                      ))}\n                      <img\n                        loading={this.disableLazy ? \"eager\" : \"lazy\"}\n                        alt={this.imageAltText}\n                        class={`hy-image__image`}\n                        src={this.image}\n                        height={this.imageHeight}\n                        width={this.imageWidth}\n                      />\n                    </picture>\n                  ) : (\n                    <img\n                      loading={this.disableLazy ? \"eager\" : \"lazy\"}\n                      alt={this.imageAltText}\n                      class={`hy-image__image`}\n                      src={this.image}\n                      height={this.imageHeight}\n                      width={this.imageWidth}\n                    />\n                  ))}\n              </div>\n              <div class={`hy-hero__spacer-box`}></div>\n              <div class={`hy-hero__content-container`}>\n                <div class={`hy-hero__content`}>\n                  <div class={`hy-hero__title-container`}>\n                    <h2 innerHTML={this.heading} class={heroTitleClasses}></h2>\n                  </div>\n                  {this.description && <p class={`hy-hero__description`}>{this.description}</p>}\n                  {this.url && (\n                    <div class={`hy-hero__actions`}>\n                      <hy-cta-button\n                        link-content={this.urlTitle}\n                        sc-label={this.scLabel}\n                        url={this.url}\n                        is-external={this.isExternal}\n                        variant={variant}\n                      />\n                    </div>\n                  )}\n                </div>\n              </div>\n            </div>\n          </div>\n          <hy-box mb=\"2, 2, 1, 1\" />\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <div class={hyHeroClasses.join(\" \")}>\n          <div class={`hy-hero__container`}>\n            <div class={`hy-hero__image-container`} style={aspectRatio}>\n              {this.image &&\n                (this._sourceSet ? (\n                  <picture>\n                    {this._sourceSet.map((item) => (\n                      <source\n                        srcSet={item.src}\n                        media={item.media}\n                        type={item.type}\n                        sizes={item.sizes ? item.sizes : \"\"}\n                      />\n                    ))}\n                    <img\n                      loading={this.disableLazy ? \"eager\" : \"lazy\"}\n                      alt={this.imageAltText}\n                      class={`hy-image__image`}\n                      src={this.image}\n                      height={this.imageHeight}\n                      width={this.imageWidth}\n                    />\n                  </picture>\n                ) : (\n                  <img\n                    loading={this.disableLazy ? \"eager\" : \"lazy\"}\n                    alt={this.imageAltText}\n                    class={`hy-image__image`}\n                    src={this.image}\n                    height={this.imageHeight}\n                    width={this.imageWidth}\n                  />\n                ))}\n            </div>\n            <div class={`hy-hero__content-container`}>\n              <div class={`hy-hero__content`}>\n                <div class={`hy-hero__title-container`}>\n                  <h2 innerHTML={this.heading} class={heroTitleClasses}></h2>\n                </div>\n                {this.description && <p class={`hy-hero__description`}>{this.description}</p>}\n                {this.url && (\n                  <div class={`hy-hero__actions`}>\n                    <hy-cta-button\n                      link-content={this.urlTitle}\n                      sc-label={this.scLabel}\n                      url={this.url}\n                      is-external={this.isExternal}\n                      variant={variant}\n                    />\n                  </div>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n        <hy-box mb=\"2, 2, 1, 1\" />\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcenteratunihelsinki/huds-lib",
-  "version": "0.8.60",
+  "version": "0.8.61",
   "description": "Helsinki University Design System library",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -68,5 +68,5 @@
       "pre-commit": "pretty-quick --staged"
     }
   },
-  "gitHead": "85c67b4327b00d171fb777e10739cdde27b4896b"
+  "gitHead": "bf356cf81d3f65db283f75deb6f2476fbf4c1e46"
 }