npm - @itcenteratunihelsinki/huds-lib - Versions diffs - 0.8.60 → 0.8.62 - Mend

@itcenteratunihelsinki/huds-lib 0.8.60 → 0.8.62

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (52) hide show

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

@@ -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 CHANGED Viewed

	@@ -1 +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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"}
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 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/dist/huds-lib/hy-menu-main-group.entry.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{r as e,c as i,h as o,H as n,g as a}from"./index-f84f2a7d.js";import{C as t,S as r}from"./utils-7438924c.js";import{j as l}from"./globalScript-5a4b7abf.js";const s=':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}:host(.menu--main-group){-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row;flex-flow:row;margin-left:28px}@media (min-width: 75.0625rem){:host(.menu--main-group){margin-right:auto}}.menu--main-group__toggle{font-size:0.875rem;line-height:16px;font-weight:600;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:var(--grayscale-black);border:0 none;color:var(--grayscale-white);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row;flex-flow:row;font-family:var(--main-font-family);letter-spacing:-0.44px;margin:0 -4px;padding:0;position:relative}.menu--main-group__toggle:focus{outline:none}.menu--main-group__toggle:hover{cursor:pointer}.menu--main-group__toggle:hover span{color:var(--grayscale-medium)}.menu--main-group__toggle:hover svg{fill:var(--grayscale-medium)}@media (min-width: 60rem){.menu--main-group__toggle .toggle__caret svg{height:15.27px;width:3px}}@media (min-width: 75.0625rem){.menu--main-group__toggle .toggle__caret svg{height:14px;width:3px}}@media (min-width: 60rem){.menu--main-group__toggle span{margin-left:17px}}.menu--main-group__toggle.is-open:after{border-bottom:3px solid white;bottom:-10px;content:" ";position:absolute;width:100%}@media (min-width: 60rem){.menu--main-group__toggle.is-open .toggle__close{height:15px;width:15px}.menu--main-group__toggle.is-open .toggle__close svg{height:15px;width:15px}}@media (min-width: 60rem){.menu--main-group__toggle.is-open span{margin-left:10px}}.menu--main-group__dropdown{display:none;visibility:hidden}.menu--main-group__dropdown.is-open{background-color:var(--grayscale-black);border-radius:0 0 5px 5px;-webkit-box-shadow:0 10px 10px rgba(0, 0, 0, 0.2);box-shadow:0 10px 10px rgba(0, 0, 0, 0.2);color:var(--grayscale-white);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);left:0;margin:0;padding:6px 0 20px;position:absolute;top:0;visibility:visible;width:100%;z-index:511}.menu--main-group__dropdown.is-open .list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column;flex-flow:column;justify-items:center;padding-top:14px;position:relative}.menu--main-group__dropdown.is-open .panel-toggle{background-color:transparent;border:none;position:absolute;right:0;top:0}@media (min-width: 60rem){.menu--main-group__dropdown.is-open .panel-toggle{padding:26px 32px}}.menu--main-group__dropdown.is-open .panel-toggle__label{font-size:1rem;line-height:20px;font-weight:700;color:var(--grayscale-white);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);letter-spacing:-0.5px;text-transform:uppercase}.menu--main-group__dropdown.is-open .panel-toggle__label__title{padding-right:12px}.menu--main-group__dropdown.is-open .panel-toggle__label:hover{cursor:pointer}.menu--main-group__dropdown.is-open .panel-toggle__label:hover span{color:var(--grayscale-medium)}.menu--main-group__dropdown.is-open .panel-toggle__label:hover svg{fill:var(--grayscale-medium)}.menu--main-group__dropdown.is-open .menu-main-link{font-size:1rem;line-height:20px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin-bottom:20px;text-decoration:none}@media (min-width: 75.0625rem){.menu--main-group__dropdown.is-open .menu-main-link{font-size:0.875rem;line-height:18px}}.menu--main-group__dropdown.is-open .menu-main-link:hover span{color:var(--grayscale-medium)}.menu--main-group__dropdown.is-open .menu-main-link:hover svg{fill:var(--grayscale-medium)}.menu--main-group__dropdown.is-open .menu--main-group__label{color:var(--grayscale-white);margin-left:12px}:host(.menu--main-group--mobile){-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row;flex-flow:row;position:relative}.menu--main-group__mobile-toggle{border:none;background:transparent;padding:15px 12px}.menu--main-group__mobile-toggle:hover{cursor:pointer}.menu--main-group__dropdown__top{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:23px}.menu--main-group__dropdown__close{border:none;background-color:transparent;padding:0;margin:0}.menu--main-group__dropdown__close:hover{cursor:pointer}.menu--main-group__logo-container .hy-site-logo__label.group{max-width:250px}.menu--main-group__dropdown__items{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.menu--main-group__dropdown__items .menu-main-link{font-size:0.9375rem;line-height:20px;background-color:var(--grayscale-dark-text);color:var(--grayscale-white);font-family:var(--main-font-family);letter-spacing:-0.5px;margin-bottom:8px;padding:14px 20px;text-decoration:none;width:100%}.menu--main-group__dropdown__items .menu-main-link:hover{text-decoration:underline}.menu--main-group__dropdown__donate{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background-color:var(--grayscale-dark-text);position:fixed;bottom:0;margin-left:-20px;width:100%}.menu--main-group__dropdown__donate .hy-link__donate.group{font-size:1rem;line-height:16px;font-weight:600;display:-webkit-box;display:-ms-flexbox;display:flex;color:var(--grayscale-white);font-family:var(--main-font-family);margin:20px auto 16px auto;text-decoration:none}.menu--main-group__dropdown__donate .hy-link__donate.group .hy-link__donate__label{margin-left:6px}.menu--main-group__dropdown--mobile{-webkit-box-direction:normal;-webkit-box-orient:vertical;background-color:var(--grayscale-black);bottom:0px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-items:space-between;max-width:400px;overflow:hidden;padding:0px;place-items:stretch;position:fixed;right:0px;top:0px;-webkit-transform:translateX(100%);transform:translateX(100%);-webkit-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s;visibility:hidden;width:0px}.menu--main-group__dropdown--mobile.is-open{padding:50px 20px 20px;-webkit-transform:translateX(0px);transform:translateX(0px);-webkit-transition:-webkit-transform 0.3s cubic-bezier(0, 0, 0.3, 1);transition:-webkit-transform 0.3s cubic-bezier(0, 0, 0.3, 1);transition:transform 0.3s cubic-bezier(0, 0, 0.3, 1);transition:transform 0.3s cubic-bezier(0, 0, 0.3, 1), -webkit-transform 0.3s cubic-bezier(0, 0, 0.3, 1);visibility:visible;width:90%;z-index:101}.menu--main-group__dropdown--mobile.is-open::after{opacity:1;visibility:visible}';let m={enter:"Enter"};const p=class{constructor(o){e(this,o);this.universityMainMenuToggled=i(this,"universityMainMenuToggled",7);this.mobileMenuTopToggle=i(this,"mobileMenuTopToggle",7);this.menuLabel="University main menu";this.menuLabelClose="Close";this.dataMainMenu=undefined;this.isMobile=false;this.logoUrl=undefined;this.logoLabel=undefined;this.siteLabel=undefined;this.siteUrl=undefined;this.donate=undefined;this.isMenuOpen=false}handleComponentClick(e){e.stopPropagation();this.emitEvent();this.isMenuOpen=!this.isMenuOpen;if(this.isMenuOpen){this.adjustMainMenuPosition(e.target)}}handleComponentKeyDown(e){e.stopPropagation();const i=e.code;let o=e.target;if(i==="Escape"&&this.isMenuOpen){this.isMenuOpen=false;this.emitEvent()}if(o&&[m.enter].includes(i)){this.isMenuOpen=!this.isMenuOpen;if(this.isMenuOpen){this.emitEvent();this.adjustMainMenuPosition(o)}}}emitEvent(){this.universityMainMenuToggled.emit();this.mobileMenuTopToggle.emit()}adjustMainMenuPosition(e){let i=this.el.closest(".hy-site-header__content-top");if(i&&!i.hasAttribute("is-mobile")){let o=e.shadowRoot.querySelector(".menu--main-group__toggle");let n=e.shadowRoot.querySelector(".menu--main-group__dropdown");let a=e.shadowRoot.querySelector(".list");if(n&&a&&o){let e=i.getBoundingClientRect();let t=o.getBoundingClientRect();n.style.top=`${e.height}px`;a.style.left=`${t.left}px`}let t=i.offsetHeight+270;this.showBackdropShadow("open",t)}}showBackdropShadow(e="close",i=0){let o=this.el.closest(".hy-site-header");let n=o.children[0];if(n){if(e==="open"){let e=window.outerHeight-i;n.style.height=`${e}px`;n.style.top=`${i}px`;n.style.position="absolute";n.classList.add("is-active")}else{n.removeAttribute("style");n.classList.remove("is-active")}}}async componentWillLoad(){this._dataMainMenu=await l(this.dataMainMenu)}handleTopMenuClose(e){this.isMenuOpen=false;this.mobileMenuTopToggle.emit();this.showBackdropShadow();e.stopPropagation()}handleOutsideMenuClick(e){if(this.isMenuOpen){this.isMenuOpen=false;this.handleTopMenuClose(e)}e.stopPropagation()}desktopMenuToggled(){this.isMenuOpen=false}searchPanelToggled(){this.isMenuOpen=false}languageMenuToggled(){this.isMenuOpen=false}render(){const e="var(--grayscale-white)";const i=this.isMobile?r.small:r.small;const a=t.white;return this.isMobile?o(n,{class:{"menu--main-group--mobile":true,"menu--main-group--mobile__is-open":this.isMenuOpen}},o("button",{"aria-label":this.menuLabel,class:{"menu--main-group__mobile-toggle":true,"is-open":this.isMenuOpen}},o("hy-icon",{icon:"hy-icon-slim-hamburger-menu",size:20,fill:e})),o("nav",{role:"navigation","aria-hidden":this.isMenuOpen?"false":"true",class:{"menu--main-group__dropdown--mobile":true,"is-open":this.isMenuOpen}},o("div",{class:"menu--main-group__dropdown__top"},o("div",{class:"menu--main-group__logo-container",id:"menu-logo"},o("hy-site-logo",{"is-group":true,size:i,color:a,url:this.siteUrl,label:this.siteLabel})),o("button",{"aria-label":`Close ${this.menuLabel}`,class:"menu--main-group__dropdown__close",onClick:e=>this.handleTopMenuClose(e)},o("hy-icon",{icon:"hy-icon-remove",size:20,fill:e}))),o("div",{class:"menu--main-group__dropdown__items"},this._dataMainMenu.map((e=>o("a",{href:e.url,class:{"menu-main-link":true}},o("span",{class:"menu--main-group__label"},e.label))))),o("div",{class:"menu--main-group__dropdown__donate"},this.donate&&this.donate.map((e=>o("a",{class:"menu--secondary__item hy-link__donate group",href:e.url},o("hy-icon",{icon:"hy-icon-heart-support",size:14,fill:a}),o("span",{class:"hy-link__donate__label group"},e.label))))))):o(n,{class:{"menu--main-group":true,"menu--main-group__is-open":this.isMenuOpen}},o("button",{class:{"menu--main-group__toggle":true,"is-open":this.isMenuOpen},"aria-expanded":this.isMenuOpen?"true":"false","aria-haspopup":"menu"},this.isMenuOpen?o("hy-icon",{class:"toggle__close",icon:"hy-icon-remove",size:8,fill:e}):o("hy-icon",{class:"toggle__caret",icon:"hy-icon-slim-hamburger-menu",size:8,fill:e}),o("span",null,this.menuLabel)),o("div",{class:{"menu--main-group__dropdown":true,"is-open":this.isMenuOpen}},o("div",{class:"list"},this._dataMainMenu.map((i=>o("a",{href:i.url,class:{"menu-main-link":true}},o("span",{class:"heading-icon"},o("hy-icon",{icon:"hy-icon-caret-right",size:10,fill:e})),o("span",{class:"menu--main-group__label"},i.label))))),o("button",{onClick:e=>this.handleComponentClick(e),class:{"panel-toggle":true},"aria-label":"Close menu"},o("span",{class:"panel-toggle__label"},o("span",{class:"panel-toggle__label__title"},this.menuLabelClose),o("hy-icon",{icon:"hy-icon-remove",size:20,fill:t.white})))))}get el(){return a(this)}};p.style=s;export{p as hy_menu_main_group};
+import{r as e,c as i,h as o,H as n,g as a}from"./index-f84f2a7d.js";import{C as t,S as r}from"./utils-7438924c.js";import{j as l}from"./globalScript-5a4b7abf.js";const s=':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}:host(.menu--main-group){-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row;flex-flow:row;margin-left:28px}@media (min-width: 75.0625rem){:host(.menu--main-group){margin-right:auto}}.menu--main-group__toggle{font-size:0.875rem;line-height:16px;font-weight:600;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:var(--grayscale-black);border:0 none;color:var(--grayscale-white);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row;flex-flow:row;font-family:var(--main-font-family);letter-spacing:-0.44px;margin:0 -4px;padding:0;position:relative}.menu--main-group__toggle:focus{outline:none}.menu--main-group__toggle:hover{cursor:pointer}.menu--main-group__toggle:hover span{color:var(--grayscale-medium)}.menu--main-group__toggle:hover svg{fill:var(--grayscale-medium)}@media (min-width: 60rem){.menu--main-group__toggle .toggle__caret svg{height:15.27px;width:3px}}@media (min-width: 75.0625rem){.menu--main-group__toggle .toggle__caret svg{height:14px;width:3px}}@media (min-width: 60rem){.menu--main-group__toggle span{margin-left:17px}}.menu--main-group__toggle.is-open:after{border-bottom:3px solid white;bottom:-10px;content:" ";position:absolute;width:100%}@media (min-width: 60rem){.menu--main-group__toggle.is-open .toggle__close{height:15px;width:15px}.menu--main-group__toggle.is-open .toggle__close svg{height:15px;width:15px}}@media (min-width: 60rem){.menu--main-group__toggle.is-open span{margin-left:10px}}.menu--main-group__dropdown{display:none;visibility:hidden}.menu--main-group__dropdown.is-open{background-color:var(--grayscale-black);border-radius:0 0 5px 5px;-webkit-box-shadow:0 10px 10px rgba(0, 0, 0, 0.2);box-shadow:0 10px 10px rgba(0, 0, 0, 0.2);color:var(--grayscale-white);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);left:0;margin:0;padding:6px 0 20px;position:absolute;top:0;visibility:visible;width:100%;z-index:511}.menu--main-group__dropdown.is-open .list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column;flex-flow:column;justify-items:center;padding-top:14px;position:relative}.menu--main-group__dropdown.is-open .panel-toggle{background-color:transparent;border:none;position:absolute;right:0;top:0}@media (min-width: 60rem){.menu--main-group__dropdown.is-open .panel-toggle{padding:26px 32px}}.menu--main-group__dropdown.is-open .panel-toggle__label{font-size:1rem;line-height:20px;font-weight:700;color:var(--grayscale-white);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);letter-spacing:-0.5px;text-transform:uppercase}.menu--main-group__dropdown.is-open .panel-toggle__label__title{padding-right:12px}.menu--main-group__dropdown.is-open .panel-toggle__label:hover{cursor:pointer}.menu--main-group__dropdown.is-open .panel-toggle__label:hover span{color:var(--grayscale-medium)}.menu--main-group__dropdown.is-open .panel-toggle__label:hover svg{fill:var(--grayscale-medium)}.menu--main-group__dropdown.is-open .menu-main-link{font-size:1rem;line-height:20px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin-bottom:20px;text-decoration:none}@media (min-width: 75.0625rem){.menu--main-group__dropdown.is-open .menu-main-link{font-size:0.875rem;line-height:18px}}.menu--main-group__dropdown.is-open .menu-main-link:hover span{color:var(--grayscale-medium)}.menu--main-group__dropdown.is-open .menu-main-link:hover svg{fill:var(--grayscale-medium)}.menu--main-group__dropdown.is-open .menu--main-group__label{color:var(--grayscale-white);margin-left:12px}:host(.menu--main-group--mobile){-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row;flex-flow:row;position:relative}.menu--main-group__mobile-toggle{border:none;background:transparent;padding:15px 12px}.menu--main-group__mobile-toggle:hover{cursor:pointer}.menu--main-group__dropdown__top{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:23px}.menu--main-group__dropdown__close{border:none;background-color:transparent;padding:0;margin:0}.menu--main-group__dropdown__close:hover{cursor:pointer}.menu--main-group__logo-container .hy-site-logo__label.group{max-width:250px}.menu--main-group__dropdown__items{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.menu--main-group__dropdown__items .menu-main-link{font-size:0.9375rem;line-height:20px;background-color:var(--grayscale-dark-text);color:var(--grayscale-white);font-family:var(--main-font-family);letter-spacing:-0.5px;margin-bottom:8px;padding:14px 20px;text-decoration:none;width:100%}.menu--main-group__dropdown__items .menu-main-link:hover{text-decoration:underline}.menu--main-group__dropdown__donate{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background-color:var(--grayscale-dark-text);position:fixed;bottom:0;margin-left:-20px;width:100%}.menu--main-group__dropdown__donate .hy-link__donate.group{font-size:1rem;line-height:16px;font-weight:600;display:-webkit-box;display:-ms-flexbox;display:flex;color:var(--grayscale-white);font-family:var(--main-font-family);margin:20px auto 16px auto;text-decoration:none}.menu--main-group__dropdown__donate .hy-link__donate.group .hy-link__donate__label{margin-left:6px}.menu--main-group__dropdown--mobile{-webkit-box-direction:normal;-webkit-box-orient:vertical;background-color:var(--grayscale-black);bottom:0px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-items:space-between;max-width:400px;overflow:hidden;padding:0px;place-items:stretch;position:fixed;right:0px;top:0px;-webkit-transform:translateX(100%);transform:translateX(100%);-webkit-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s;visibility:hidden;width:0px}.menu--main-group__dropdown--mobile.is-open{padding:50px 20px 20px;-webkit-transform:translateX(0px);transform:translateX(0px);-webkit-transition:-webkit-transform 0.3s cubic-bezier(0, 0, 0.3, 1);transition:-webkit-transform 0.3s cubic-bezier(0, 0, 0.3, 1);transition:transform 0.3s cubic-bezier(0, 0, 0.3, 1);transition:transform 0.3s cubic-bezier(0, 0, 0.3, 1), -webkit-transform 0.3s cubic-bezier(0, 0, 0.3, 1);visibility:visible;width:90%;z-index:101}.menu--main-group__dropdown--mobile.is-open::after{opacity:1;visibility:visible}';let m={enter:"Enter"};const p=class{constructor(o){e(this,o);this.universityMainMenuToggled=i(this,"universityMainMenuToggled",7);this.mobileMenuTopToggle=i(this,"mobileMenuTopToggle",7);this.menuLabel="University main menu";this.menuLabelClose="Close";this.dataMainMenu=undefined;this.isMobile=false;this.logoUrl=undefined;this.logoLabel=undefined;this.siteLabel=undefined;this.siteUrl=undefined;this.donate=undefined;this.isMenuOpen=false}async componentWillLoad(){this._dataMainMenu=await l(this.dataMainMenu)}handleComponentClick(e){this.isMenuOpen=!this.isMenuOpen;this.emitEvent();if(this.isMenuOpen){this.adjustMainMenuPosition(e.target)}if(!this.isMenuOpen){this.showBackdropShadow("close")}e.stopPropagation()}handleComponentKeyDown(e){e.stopPropagation();const i=e.code;let o=e.target;if(i==="Escape"&&this.isMenuOpen){this.isMenuOpen=false;this.emitEvent()}if(o&&[m.enter].includes(i)){this.isMenuOpen=!this.isMenuOpen;if(this.isMenuOpen){this.emitEvent();this.adjustMainMenuPosition(o)}}}handleOutsideMenuClick(e){if(this.isMenuOpen){this.isMenuOpen=false;this.handleTopMenuClose(e)}e.stopPropagation()}emitEvent(){this.universityMainMenuToggled.emit();this.mobileMenuTopToggle.emit()}adjustMainMenuPosition(e){let i=this.el.closest(".hy-site-header__content-top");if(i&&!i.hasAttribute("is-mobile")){let o=e.shadowRoot.querySelector(".menu--main-group__toggle");let n=e.shadowRoot.querySelector(".menu--main-group__dropdown");let a=e.shadowRoot.querySelector(".list");if(n&&a&&o){let e=i.getBoundingClientRect();let t=o.getBoundingClientRect();n.style.top=`${e.height}px`;a.style.left=`${t.left}px`}let t=i.offsetHeight+270;this.showBackdropShadow("open",t)}}showBackdropShadow(e="close",i=0){let o=this.el.closest(".hy-site-header");let n=o.children[0];if(n){if(e==="open"){let e=window.outerHeight-i;n.style.height=`${e}px`;n.style.top=`${i}px`;n.style.position="absolute";n.classList.add("is-active")}else{n.removeAttribute("style");n.classList.remove("is-active")}}}handleTopMenuClose(e){this.isMenuOpen=false;this.mobileMenuTopToggle.emit();this.showBackdropShadow("close");e.stopPropagation()}render(){const e="var(--grayscale-white)";const i=this.isMobile?r.small:r.small;const a=t.white;return this.isMobile?o(n,{class:{"menu--main-group--mobile":true,"menu--main-group--mobile__is-open":this.isMenuOpen}},o("button",{"aria-label":this.menuLabel,class:{"menu--main-group__mobile-toggle":true,"is-open":this.isMenuOpen}},o("hy-icon",{icon:"hy-icon-slim-hamburger-menu",size:20,fill:e})),o("nav",{role:"navigation","aria-hidden":this.isMenuOpen?"false":"true",class:{"menu--main-group__dropdown--mobile":true,"is-open":this.isMenuOpen}},o("div",{class:"menu--main-group__dropdown__top"},o("div",{class:"menu--main-group__logo-container",id:"menu-logo"},o("hy-site-logo",{"is-group":true,size:i,color:a,url:this.siteUrl,label:this.siteLabel})),o("button",{"aria-label":`Close ${this.menuLabel}`,class:"menu--main-group__dropdown__close",onClick:e=>this.handleTopMenuClose(e)},o("hy-icon",{icon:"hy-icon-remove",size:20,fill:e}))),o("div",{class:"menu--main-group__dropdown__items"},this._dataMainMenu.map((e=>o("a",{href:e.url,class:{"menu-main-link":true}},o("span",{class:"menu--main-group__label"},e.label))))),o("div",{class:"menu--main-group__dropdown__donate"},this.donate&&this.donate.map((e=>o("a",{class:"menu--secondary__item hy-link__donate group",href:e.url},o("hy-icon",{icon:"hy-icon-heart-support",size:14,fill:a}),o("span",{class:"hy-link__donate__label group"},e.label))))))):o(n,{class:{"menu--main-group":true,"menu--main-group__is-open":this.isMenuOpen}},o("button",{class:{"menu--main-group__toggle":true,"is-open":this.isMenuOpen},"aria-expanded":this.isMenuOpen?"true":"false","aria-haspopup":"menu"},this.isMenuOpen?o("hy-icon",{class:"toggle__close",icon:"hy-icon-remove",size:8,fill:e}):o("hy-icon",{class:"toggle__caret",icon:"hy-icon-slim-hamburger-menu",size:8,fill:e}),o("span",null,this.menuLabel)),o("div",{class:{"menu--main-group__dropdown":true,"is-open":this.isMenuOpen}},o("div",{class:"list"},this._dataMainMenu.map((i=>o("a",{href:i.url,class:{"menu-main-link":true}},o("span",{class:"heading-icon"},o("hy-icon",{icon:"hy-icon-caret-right",size:10,fill:e})),o("span",{class:"menu--main-group__label"},i.label))))),o("button",{onClick:e=>this.handleComponentClick(e),class:{"panel-toggle":true},"aria-label":"Close menu"},o("span",{class:"panel-toggle__label"},o("span",{class:"panel-toggle__label__title"},this.menuLabelClose),o("hy-icon",{icon:"hy-icon-remove",size:20,fill:t.white})))))}get el(){return a(this)}};p.style=s;export{p as hy_menu_main_group};
 //# sourceMappingURL=hy-menu-main-group.entry.js.map

package/dist/huds-lib/hy-menu-main-group.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["hyMenuMainGroupCss","keys","enter","HyMenuMainGroup","handleComponentClick","event","stopPropagation","this","emitEvent","isMenuOpen","adjustMainMenuPosition","target","handleComponentKeyDown","key","code","includes","universityMainMenuToggled","emit","mobileMenuTopToggle","hyTopHeader","el","closest","hasAttribute","mainMenuToggle","shadowRoot","querySelector","mainMenuDropdown","mainMenuList","rectHeader","getBoundingClientRect","rectMenuToggle","style","top","height","left","headerHeight","offsetHeight","showBackdropShadow","state","hyHeader","hyBackdropDiv","children","me","window","outerHeight","position","classList","add","removeAttribute","remove","async","_dataMainMenu","jsonParserWorker","dataMainMenu","handleTopMenuClose","handleOutsideMenuClick","desktopMenuToggled","searchPanelToggled","languageMenuToggled","render","white","logoSizeGroup","isMobile","SiteLogoSize","small","logoColorGroup","ColorVariant","h","Host","class","menuLabel","icon","size","fill","role","id","color","url","siteUrl","label","siteLabel","onClick","e","map","item","href","donate","i","menuLabelClose"],"sources":["./src/components/hy-navigation/hy-menu-main-group/hy-menu-main-group.scss?tag=hy-menu-main-group&encapsulation=shadow","./src/components/hy-navigation/hy-menu-main-group/hy-menu-main-group.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n:host(.menu--main-group) {\n align-items: center;\n display: flex;\n flex-flow: row;\n margin-left: 28px;\n\n @include breakpoint($extrawide) {\n margin-right: auto;\n }\n}\n\n.menu--main-group__toggle {\n @include font-size(14px, 16px);\n @include font-weight($semibold);\n align-items: center;\n background: var(--grayscale-black);\n border: 0 none;\n color: var(--grayscale-white);\n display: flex;\n flex-flow: row;\n font-family: var(--main-font-family);\n letter-spacing: -0.44px;\n margin: 0 -4px;\n padding: 0;\n position: relative;\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n cursor: pointer;\n\n span {\n color: var(--grayscale-medium);\n }\n\n svg {\n fill: var(--grayscale-medium);\n }\n }\n\n .toggle__caret {\n svg {\n @include breakpoint($wide) {\n height: 15.27px;\n width: 3px;\n }\n @include breakpoint($extrawide) {\n height: 14px;\n width: 3px;\n }\n }\n }\n\n span {\n @include breakpoint($wide) {\n margin-left: 17px;\n }\n }\n\n &.is-open {\n &:after {\n border-bottom: 3px solid white;\n bottom: -10px;\n content: \" \";\n position: absolute;\n width: 100%;\n }\n\n .toggle__close {\n @include breakpoint($wide) {\n height: 15px;\n width: 15px;\n\n svg {\n height: 15px;\n width: 15px;\n }\n }\n }\n\n span {\n @include breakpoint($wide) {\n margin-left: 10px;\n }\n }\n }\n}\n\n.menu--main-group__dropdown {\n display: none;\n visibility: hidden;\n\n &.is-open {\n background-color: var(--grayscale-black);\n border-radius: 0 0 5px 5px;\n box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);\n color: var(--grayscale-white);\n display: flex;\n font-family: var(--main-font-family);\n left: 0;\n margin: 0;\n padding: 6px 0 20px;\n position: absolute;\n top: 0;\n visibility: visible;\n width: 100%;\n z-index: 511;\n\n .list {\n display: flex;\n flex-flow: column;\n justify-items: center;\n padding-top: 14px;\n position: relative;\n }\n\n .panel-toggle {\n background-color: transparent;\n border: none;\n position: absolute;\n right: 0;\n top: 0;\n\n @include breakpoint($wide) {\n padding: 26px 32px;\n }\n\n &__label {\n @include font-size(16px, 20px);\n @include font-weight($bold);\n color: var(--grayscale-white);\n display: flex;\n font-family: var(--main-font-family);\n letter-spacing: -0.5px;\n text-transform: uppercase;\n\n &__title {\n padding-right: 12px;\n }\n\n &:hover {\n cursor: pointer;\n span {\n color: var(--grayscale-medium);\n }\n svg {\n fill: var(--grayscale-medium);\n }\n }\n }\n }\n\n .menu-main-link {\n @include font-size(16px, 20px);\n align-items: center;\n display: flex;\n font-family: var(--main-font-family);\n flex-direction: row;\n margin-bottom: 20px;\n text-decoration: none;\n\n @include breakpoint($extrawide) {\n @include font-size(14px, 18px);\n }\n\n &:hover {\n span {\n color: var(--grayscale-medium);\n }\n svg {\n fill: var(--grayscale-medium);\n }\n }\n }\n .menu--main-group__label {\n color: var(--grayscale-white);\n margin-left: 12px;\n }\n }\n}\n\n:host(.menu--main-group--mobile) {\n align-items: center;\n display: flex;\n flex-flow: row;\n position: relative;\n}\n\n.menu--main-group__mobile-toggle {\n border: none;\n background: transparent;\n padding: 15px 12px;\n\n &:hover {\n cursor: pointer;\n }\n}\n\n.menu--main-group__dropdown__top {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n margin-bottom: 23px;\n}\n\n.menu--main-group__dropdown__close {\n border: none;\n background-color: transparent;\n padding: 0;\n margin: 0;\n\n &:hover {\n cursor: pointer;\n }\n}\n\n.menu--main-group__logo-container .hy-site-logo__label.group {\n max-width: 250px;\n}\n\n.menu--main-group__dropdown__items {\n display: flex;\n flex-direction: column;\n\n .menu-main-link {\n @include font-size(15px, 20px);\n\n background-color: var(--grayscale-dark-text);\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n letter-spacing: -0.5px;\n margin-bottom: 8px;\n padding: 14px 20px;\n text-decoration: none;\n width: 100%;\n\n &:hover {\n text-decoration: underline;\n }\n }\n}\n\n.menu--main-group__dropdown__donate {\n display: flex;\n flex-direction: row;\n justify-content: center;\n background-color: var(--grayscale-dark-text);\n position: fixed;\n bottom: 0;\n margin-left: -20px;\n width: 100%;\n\n .hy-link__donate.group {\n @include font-size(16px, 16px);\n @include font-weight($semibold);\n\n display: flex;\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n margin: 20px auto 16px auto;\n text-decoration: none;\n\n .hy-link__donate__label {\n margin-left: 6px;\n }\n }\n}\n\n.menu--main-group__dropdown--mobile {\n -webkit-box-direction: normal;\n -webkit-box-orient: vertical;\n background-color: var(--grayscale-black);\n bottom: 0px;\n display: flex;\n flex-direction: column;\n justify-items: space-between;\n max-width: 400px;\n overflow: hidden;\n padding: 0px;\n place-items: stretch;\n position: fixed;\n right: 0px;\n top: 0px;\n transform: translateX(100%);\n transition: all 0.3s ease 0s;\n visibility: hidden;\n width: 0px;\n\n &.is-open {\n padding: 50px 20px 20px;\n transform: translateX(0px);\n transition: transform 0.3s cubic-bezier(0, 0, 0.3, 1);\n visibility: visible;\n width: 90%;\n z-index: 101;\n\n &::after {\n opacity: 1;\n visibility: visible;\n }\n }\n}\n","export interface MainMenu {\n label: string;\n url: string;\n menuLinkId: string;\n}\n\nexport interface DonateLink {\n url: string;\n label: string;\n}\n\nimport {Component, Host, h, Element, Prop, State, Listen, Event, EventEmitter} from \"@stencil/core\";\nimport {ColorVariant, SiteLogoSize} from \"../../../utils/utils\";\nimport {jsonParserWorker} from \"../../../global/globalScript\";\n\nlet keys = {\n enter: \"Enter\",\n};\n\n@Component({\n tag: \"hy-menu-main-group\",\n styleUrl: \"hy-menu-main-group.scss\",\n shadow: true,\n})\nexport class HyMenuMainGroup {\n @Element() el: HTMLElement;\n @Prop() menuLabel: string = \"University main menu\";\n @Prop() menuLabelClose: string = \"Close\";\n @Prop() dataMainMenu: MainMenu[] \| string;\n @Prop() isMobile: boolean = false;\n @Prop() logoUrl?: string;\n @Prop() logoLabel?: string;\n @Prop() siteLabel?: string;\n @Prop() siteUrl?: string;\n @Prop() donate: DonateLink[];\n @State() isMenuOpen: boolean = false;\n\n @Event() universityMainMenuToggled: EventEmitter;\n @Event() mobileMenuTopToggle: EventEmitter;\n\n private _dataMainMenu: MainMenu[];\n\n @Listen(\"click\", {capture: true})\n handleComponentClick(event) {\n event.stopPropagation();\n this.emitEvent();\n\n this.isMenuOpen = !this.isMenuOpen;\n if (this.isMenuOpen) {\n this.adjustMainMenuPosition(event.target);\n }\n }\n\n @Listen(\"keydown\")\n handleComponentKeyDown(event: KeyboardEvent) {\n event.stopPropagation();\n const key = event.code;\n let target = event.target as HTMLButtonElement;\n\n if (key === \"Escape\" && this.isMenuOpen) {\n this.isMenuOpen = false;\n this.emitEvent();\n }\n\n if (target && [keys.enter].includes(key)) {\n this.isMenuOpen = !this.isMenuOpen;\n\n if (this.isMenuOpen) {\n this.emitEvent();\n this.adjustMainMenuPosition(target);\n }\n }\n }\n\n emitEvent() {\n // Close other panels if they are open (lang menu, search, main menu, ..).\n this.universityMainMenuToggled.emit();\n this.mobileMenuTopToggle.emit();\n }\n\n adjustMainMenuPosition(target) {\n let hyTopHeader = this.el.closest(\".hy-site-header__content-top\") as HTMLElement;\n\n if (hyTopHeader && !hyTopHeader.hasAttribute(\"is-mobile\")) {\n let mainMenuToggle = target.shadowRoot.querySelector(\".menu--main-group__toggle\") as HTMLElement;\n let mainMenuDropdown = target.shadowRoot.querySelector(\".menu--main-group__dropdown\") as HTMLElement;\n let mainMenuList = target.shadowRoot.querySelector(\".list\") as HTMLElement;\n if (mainMenuDropdown && mainMenuList && mainMenuToggle) {\n let rectHeader = hyTopHeader.getBoundingClientRect();\n let rectMenuToggle = mainMenuToggle.getBoundingClientRect();\n mainMenuDropdown.style.top = `${rectHeader.height}px`;\n\n mainMenuList.style.left = `${rectMenuToggle.left}px`;\n }\n let headerHeight = hyTopHeader.offsetHeight + 270;\n\n this.showBackdropShadow(\"open\", headerHeight);\n }\n }\n\n showBackdropShadow(state = \"close\", top = 0) {\n let hyHeader = this.el.closest(\".hy-site-header\") as HTMLElement;\n let hyBackdropDiv = hyHeader.children[0] as HTMLElement;\n\n if (hyBackdropDiv) {\n if (state === \"open\") {\n let me = window.outerHeight - top;\n hyBackdropDiv.style.height = `${me}px`;\n hyBackdropDiv.style.top = `${top}px`;\n hyBackdropDiv.style.position = \"absolute\";\n hyBackdropDiv.classList.add(\"is-active\");\n } else {\n hyBackdropDiv.removeAttribute(\"style\");\n hyBackdropDiv.classList.remove(\"is-active\");\n }\n }\n }\n\n async componentWillLoad() {\n this._dataMainMenu = await jsonParserWorker(this.dataMainMenu);\n }\n\n handleTopMenuClose(event) {\n this.isMenuOpen = false;\n this.mobileMenuTopToggle.emit();\n this.showBackdropShadow();\n event.stopPropagation();\n }\n\n // Close the University main menu if user clicks anywhere outside the component.\n @Listen(\"click\", {target: \"window\"})\n @Listen(\"headerScrollDown\", {target: \"window\"})\n @Listen(\"headerScrollUp\", {target: \"window\"})\n handleOutsideMenuClick(event) {\n if (this.isMenuOpen) {\n this.isMenuOpen = false;\n this.handleTopMenuClose(event);\n }\n event.stopPropagation();\n }\n\n // CLose the University main menu if user opens the desktop menu panel.\n @Listen(\"menuDesktopToggled\", {target: \"document\"})\n desktopMenuToggled() {\n this.isMenuOpen = false;\n }\n\n // CLose the University main menu if user opens the search panel\n @Listen(\"searchPanelToggled\", {target: \"document\"})\n searchPanelToggled() {\n this.isMenuOpen = false;\n }\n\n // CLose the University main menu if user opens the language menu panel.\n @Listen(\"menuLanguageToggled\", {target: \"document\"})\n languageMenuToggled() {\n this.isMenuOpen = false;\n }\n\n render() {\n const white = \"var(--grayscale-white)\";\n const logoSizeGroup = this.isMobile ? SiteLogoSize.small : SiteLogoSize.small;\n const logoColorGroup = ColorVariant.white;\n\n return this.isMobile ? (\n <Host\n class={{\n \"menu--main-group--mobile\": true,\n \"menu--main-group--mobile__is-open\": this.isMenuOpen,\n }}\n >\n <button\n aria-label={this.menuLabel}\n class={{\n \"menu--main-group__mobile-toggle\": true,\n \"is-open\": this.isMenuOpen,\n }}\n >\n <hy-icon icon={\"hy-icon-slim-hamburger-menu\"} size={20} fill={white} />\n </button>\n <nav\n role=\"navigation\"\n aria-hidden={this.isMenuOpen ? \"false\" : \"true\"}\n class={{\n \"menu--main-group__dropdown--mobile\": true,\n \"is-open\": this.isMenuOpen,\n }}\n >\n <div class=\"menu--main-group__dropdown__top\">\n <div class={\"menu--main-group__logo-container\"} id={\"menu-logo\"}>\n <hy-site-logo\n is-group={true}\n size={logoSizeGroup}\n color={logoColorGroup}\n url={this.siteUrl}\n label={this.siteLabel}\n />\n </div>\n <button\n aria-label={`Close ${this.menuLabel}`}\n class=\"menu--main-group__dropdown__close\"\n onClick={(e) => this.handleTopMenuClose(e)}\n >\n <hy-icon icon={\"hy-icon-remove\"} size={20} fill={white} />\n </button>\n </div>\n <div class=\"menu--main-group__dropdown__items\">\n {this._dataMainMenu.map((item) => {\n return (\n <a href={item.url} class={{\"menu-main-link\": true}}>\n <span class={\"menu--main-group__label\"}>{item.label}</span>\n </a>\n );\n })}\n </div>\n <div class=\"menu--main-group__dropdown__donate\">\n {this.donate &&\n this.donate.map((i) => {\n return (\n <a class={\"menu--secondary__item hy-link__donate group\"} href={i.url}>\n <hy-icon icon={\"hy-icon-heart-support\"} size={14} fill={logoColorGroup} />\n <span class={\"hy-link__donate__label group\"}>{i.label}</span>\n </a>\n );\n })}\n </div>\n </nav>\n </Host>\n ) : (\n <Host\n class={{\n \"menu--main-group\": true,\n \"menu--main-group__is-open\": this.isMenuOpen,\n }}\n >\n <button\n class={{\n \"menu--main-group__toggle\": true,\n \"is-open\": this.isMenuOpen,\n }}\n aria-expanded={this.isMenuOpen ? \"true\" : \"false\"}\n aria-haspopup=\"menu\"\n //aria-label={this.isMenuOpen ? this._labels['close'] : this._labels['open']}\n >\n {this.isMenuOpen ? (\n <hy-icon class={\"toggle__close\"} icon={\"hy-icon-remove\"} size={8} fill={white} />\n ) : (\n <hy-icon class={\"toggle__caret\"} icon={\"hy-icon-slim-hamburger-menu\"} size={8} fill={white} />\n )}\n <span>{this.menuLabel}</span>\n </button>\n <div\n class={{\n \"menu--main-group__dropdown\": true,\n \"is-open\": this.isMenuOpen,\n }}\n >\n <div class=\"list\">\n {this._dataMainMenu.map((item) => {\n return (\n <a href={item.url} class={{\"menu-main-link\": true}}>\n <span class=\"heading-icon\">\n <hy-icon icon={\"hy-icon-caret-right\"} size={10} fill={white} />\n </span>\n <span class={\"menu--main-group__label\"}>{item.label}</span>\n </a>\n );\n })}\n </div>\n <button\n onClick={(e) => this.handleComponentClick(e)}\n class={{\n \"panel-toggle\": true,\n }}\n aria-label=\"Close menu\"\n >\n <span class=\"panel-toggle__label\">\n <span class=\"panel-toggle__label__title\">{this.menuLabelClose}</span>\n <hy-icon icon={\"hy-icon-remove\"} size={20} fill={ColorVariant.white} />\n </span>\n </button>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"names":["hyMenuMainGroupCss","keys","enter","HyMenuMainGroup","async","this","_dataMainMenu","jsonParserWorker","dataMainMenu","handleComponentClick","event","isMenuOpen","emitEvent","adjustMainMenuPosition","target","showBackdropShadow","stopPropagation","handleComponentKeyDown","key","code","includes","handleOutsideMenuClick","handleTopMenuClose","universityMainMenuToggled","emit","mobileMenuTopToggle","hyTopHeader","el","closest","hasAttribute","mainMenuToggle","shadowRoot","querySelector","mainMenuDropdown","mainMenuList","rectHeader","getBoundingClientRect","rectMenuToggle","style","top","height","left","headerHeight","offsetHeight","state","hyHeader","hyBackdropDiv","children","me","window","outerHeight","position","classList","add","removeAttribute","remove","render","white","logoSizeGroup","isMobile","SiteLogoSize","small","logoColorGroup","ColorVariant","h","Host","class","menuLabel","icon","size","fill","role","id","color","url","siteUrl","label","siteLabel","onClick","e","map","item","href","donate","i","menuLabelClose"],"sources":["./src/components/hy-navigation/hy-menu-main-group/hy-menu-main-group.scss?tag=hy-menu-main-group&encapsulation=shadow","./src/components/hy-navigation/hy-menu-main-group/hy-menu-main-group.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n:host(.menu--main-group) {\n align-items: center;\n display: flex;\n flex-flow: row;\n margin-left: 28px;\n\n @include breakpoint($extrawide) {\n margin-right: auto;\n }\n}\n\n.menu--main-group__toggle {\n @include font-size(14px, 16px);\n @include font-weight($semibold);\n align-items: center;\n background: var(--grayscale-black);\n border: 0 none;\n color: var(--grayscale-white);\n display: flex;\n flex-flow: row;\n font-family: var(--main-font-family);\n letter-spacing: -0.44px;\n margin: 0 -4px;\n padding: 0;\n position: relative;\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n cursor: pointer;\n\n span {\n color: var(--grayscale-medium);\n }\n\n svg {\n fill: var(--grayscale-medium);\n }\n }\n\n .toggle__caret {\n svg {\n @include breakpoint($wide) {\n height: 15.27px;\n width: 3px;\n }\n @include breakpoint($extrawide) {\n height: 14px;\n width: 3px;\n }\n }\n }\n\n span {\n @include breakpoint($wide) {\n margin-left: 17px;\n }\n }\n\n &.is-open {\n &:after {\n border-bottom: 3px solid white;\n bottom: -10px;\n content: \" \";\n position: absolute;\n width: 100%;\n }\n\n .toggle__close {\n @include breakpoint($wide) {\n height: 15px;\n width: 15px;\n\n svg {\n height: 15px;\n width: 15px;\n }\n }\n }\n\n span {\n @include breakpoint($wide) {\n margin-left: 10px;\n }\n }\n }\n}\n\n.menu--main-group__dropdown {\n display: none;\n visibility: hidden;\n\n &.is-open {\n background-color: var(--grayscale-black);\n border-radius: 0 0 5px 5px;\n box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);\n color: var(--grayscale-white);\n display: flex;\n font-family: var(--main-font-family);\n left: 0;\n margin: 0;\n padding: 6px 0 20px;\n position: absolute;\n top: 0;\n visibility: visible;\n width: 100%;\n z-index: 511;\n\n .list {\n display: flex;\n flex-flow: column;\n justify-items: center;\n padding-top: 14px;\n position: relative;\n }\n\n .panel-toggle {\n background-color: transparent;\n border: none;\n position: absolute;\n right: 0;\n top: 0;\n\n @include breakpoint($wide) {\n padding: 26px 32px;\n }\n\n &__label {\n @include font-size(16px, 20px);\n @include font-weight($bold);\n color: var(--grayscale-white);\n display: flex;\n font-family: var(--main-font-family);\n letter-spacing: -0.5px;\n text-transform: uppercase;\n\n &__title {\n padding-right: 12px;\n }\n\n &:hover {\n cursor: pointer;\n span {\n color: var(--grayscale-medium);\n }\n svg {\n fill: var(--grayscale-medium);\n }\n }\n }\n }\n\n .menu-main-link {\n @include font-size(16px, 20px);\n align-items: center;\n display: flex;\n font-family: var(--main-font-family);\n flex-direction: row;\n margin-bottom: 20px;\n text-decoration: none;\n\n @include breakpoint($extrawide) {\n @include font-size(14px, 18px);\n }\n\n &:hover {\n span {\n color: var(--grayscale-medium);\n }\n svg {\n fill: var(--grayscale-medium);\n }\n }\n }\n .menu--main-group__label {\n color: var(--grayscale-white);\n margin-left: 12px;\n }\n }\n}\n\n:host(.menu--main-group--mobile) {\n align-items: center;\n display: flex;\n flex-flow: row;\n position: relative;\n}\n\n.menu--main-group__mobile-toggle {\n border: none;\n background: transparent;\n padding: 15px 12px;\n\n &:hover {\n cursor: pointer;\n }\n}\n\n.menu--main-group__dropdown__top {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n margin-bottom: 23px;\n}\n\n.menu--main-group__dropdown__close {\n border: none;\n background-color: transparent;\n padding: 0;\n margin: 0;\n\n &:hover {\n cursor: pointer;\n }\n}\n\n.menu--main-group__logo-container .hy-site-logo__label.group {\n max-width: 250px;\n}\n\n.menu--main-group__dropdown__items {\n display: flex;\n flex-direction: column;\n\n .menu-main-link {\n @include font-size(15px, 20px);\n\n background-color: var(--grayscale-dark-text);\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n letter-spacing: -0.5px;\n margin-bottom: 8px;\n padding: 14px 20px;\n text-decoration: none;\n width: 100%;\n\n &:hover {\n text-decoration: underline;\n }\n }\n}\n\n.menu--main-group__dropdown__donate {\n display: flex;\n flex-direction: row;\n justify-content: center;\n background-color: var(--grayscale-dark-text);\n position: fixed;\n bottom: 0;\n margin-left: -20px;\n width: 100%;\n\n .hy-link__donate.group {\n @include font-size(16px, 16px);\n @include font-weight($semibold);\n\n display: flex;\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n margin: 20px auto 16px auto;\n text-decoration: none;\n\n .hy-link__donate__label {\n margin-left: 6px;\n }\n }\n}\n\n.menu--main-group__dropdown--mobile {\n -webkit-box-direction: normal;\n -webkit-box-orient: vertical;\n background-color: var(--grayscale-black);\n bottom: 0px;\n display: flex;\n flex-direction: column;\n justify-items: space-between;\n max-width: 400px;\n overflow: hidden;\n padding: 0px;\n place-items: stretch;\n position: fixed;\n right: 0px;\n top: 0px;\n transform: translateX(100%);\n transition: all 0.3s ease 0s;\n visibility: hidden;\n width: 0px;\n\n &.is-open {\n padding: 50px 20px 20px;\n transform: translateX(0px);\n transition: transform 0.3s cubic-bezier(0, 0, 0.3, 1);\n visibility: visible;\n width: 90%;\n z-index: 101;\n\n &::after {\n opacity: 1;\n visibility: visible;\n }\n }\n}\n","export interface MainMenu {\n label: string;\n url: string;\n menuLinkId: string;\n}\n\nexport interface DonateLink {\n url: string;\n label: string;\n}\n\nimport {Component, Host, h, Element, Prop, State, Listen, Event, EventEmitter} from \"@stencil/core\";\nimport {ColorVariant, SiteLogoSize} from \"../../../utils/utils\";\nimport {jsonParserWorker} from \"../../../global/globalScript\";\n\nlet keys = {\n enter: \"Enter\",\n};\n\n@Component({\n tag: \"hy-menu-main-group\",\n styleUrl: \"hy-menu-main-group.scss\",\n shadow: true,\n})\nexport class HyMenuMainGroup {\n @Element() el: HTMLElement;\n @Prop() menuLabel: string = \"University main menu\";\n @Prop() menuLabelClose: string = \"Close\";\n @Prop() dataMainMenu: MainMenu[] \| string;\n @Prop() isMobile: boolean = false;\n @Prop() logoUrl?: string;\n @Prop() logoLabel?: string;\n @Prop() siteLabel?: string;\n @Prop() siteUrl?: string;\n @Prop() donate: DonateLink[];\n @State() isMenuOpen: boolean = false;\n\n @Event() universityMainMenuToggled: EventEmitter;\n @Event() mobileMenuTopToggle: EventEmitter;\n\n private _dataMainMenu: MainMenu[];\n\n async componentWillLoad() {\n this._dataMainMenu = await jsonParserWorker(this.dataMainMenu);\n }\n\n\n @Listen(\"click\", {capture: true})\n handleComponentClick(event) {\n this.isMenuOpen = !this.isMenuOpen;\n \n this.emitEvent();\n if (this.isMenuOpen) {\n this.adjustMainMenuPosition(event.target);\n }\n if (!this.isMenuOpen) {\n this.showBackdropShadow('close');\n }\n event.stopPropagation();\n }\n\n @Listen(\"keydown\")\n handleComponentKeyDown(event: KeyboardEvent) {\n event.stopPropagation();\n const key = event.code;\n let target = event.target as HTMLButtonElement;\n\n if (key === \"Escape\" && this.isMenuOpen) {\n this.isMenuOpen = false;\n this.emitEvent();\n }\n\n if (target && [keys.enter].includes(key)) {\n this.isMenuOpen = !this.isMenuOpen;\n\n if (this.isMenuOpen) {\n this.emitEvent();\n this.adjustMainMenuPosition(target);\n }\n }\n }\n\n // Handle events that should close the menu.\n @Listen(\"click\", {target: \"window\"})\n @Listen(\"headerScrollDown\", {target: \"window\"})\n @Listen(\"headerScrollUp\", {target: \"window\"})\n @Listen(\"menuLanguageToggled\", {target: \"document\"})\n @Listen(\"searchPanelToggled\", {target: \"document\"})\n @Listen(\"menuDesktopToggled\", {target: \"document\"})\n handleOutsideMenuClick(event) {\n if (this.isMenuOpen) {\n this.isMenuOpen = false;\n this.handleTopMenuClose(event);\n }\n event.stopPropagation();\n }\n\n emitEvent() {\n // Close other panels if they are open (lang menu, search, main menu, ..).\n this.universityMainMenuToggled.emit();\n this.mobileMenuTopToggle.emit();\n }\n\n // TODO: Cleanup this. Find cleaner way to do positioning.\n adjustMainMenuPosition(target) {\n let hyTopHeader = this.el.closest(\".hy-site-header__content-top\") as HTMLElement;\n\n if (hyTopHeader && !hyTopHeader.hasAttribute(\"is-mobile\")) {\n let mainMenuToggle = target.shadowRoot.querySelector(\".menu--main-group__toggle\") as HTMLElement;\n let mainMenuDropdown = target.shadowRoot.querySelector(\".menu--main-group__dropdown\") as HTMLElement;\n let mainMenuList = target.shadowRoot.querySelector(\".list\") as HTMLElement;\n if (mainMenuDropdown && mainMenuList && mainMenuToggle) {\n let rectHeader = hyTopHeader.getBoundingClientRect();\n let rectMenuToggle = mainMenuToggle.getBoundingClientRect();\n mainMenuDropdown.style.top = `${rectHeader.height}px`;\n\n mainMenuList.style.left = `${rectMenuToggle.left}px`;\n }\n let headerHeight = hyTopHeader.offsetHeight + 270;\n\n this.showBackdropShadow(\"open\", headerHeight);\n }\n }\n\n // TODO: Handle backdrop with CSS.\n showBackdropShadow(state = \"close\", top = 0) {\n let hyHeader = this.el.closest(\".hy-site-header\") as HTMLElement;\n let hyBackdropDiv = hyHeader.children[0] as HTMLElement;\n\n if (hyBackdropDiv) {\n if (state === \"open\") {\n let me = window.outerHeight - top;\n hyBackdropDiv.style.height = `${me}px`;\n hyBackdropDiv.style.top = `${top}px`;\n hyBackdropDiv.style.position = \"absolute\";\n hyBackdropDiv.classList.add(\"is-active\");\n } else {\n hyBackdropDiv.removeAttribute(\"style\");\n hyBackdropDiv.classList.remove(\"is-active\");\n }\n }\n }\n\n\n\n handleTopMenuClose(event) {\n this.isMenuOpen = false;\n this.mobileMenuTopToggle.emit();\n this.showBackdropShadow('close');\n event.stopPropagation();\n }\n\n\n render() {\n const white = \"var(--grayscale-white)\";\n const logoSizeGroup = this.isMobile ? SiteLogoSize.small : SiteLogoSize.small;\n const logoColorGroup = ColorVariant.white;\n\n return this.isMobile ? (\n <Host\n class={{\n \"menu--main-group--mobile\": true,\n \"menu--main-group--mobile__is-open\": this.isMenuOpen,\n }}\n >\n <button\n aria-label={this.menuLabel}\n class={{\n \"menu--main-group__mobile-toggle\": true,\n \"is-open\": this.isMenuOpen,\n }}\n >\n <hy-icon icon={\"hy-icon-slim-hamburger-menu\"} size={20} fill={white} />\n </button>\n <nav\n role=\"navigation\"\n aria-hidden={this.isMenuOpen ? \"false\" : \"true\"}\n class={{\n \"menu--main-group__dropdown--mobile\": true,\n \"is-open\": this.isMenuOpen,\n }}\n >\n <div class=\"menu--main-group__dropdown__top\">\n <div class={\"menu--main-group__logo-container\"} id={\"menu-logo\"}>\n <hy-site-logo\n is-group={true}\n size={logoSizeGroup}\n color={logoColorGroup}\n url={this.siteUrl}\n label={this.siteLabel}\n />\n </div>\n <button\n aria-label={`Close ${this.menuLabel}`}\n class=\"menu--main-group__dropdown__close\"\n onClick={(e) => this.handleTopMenuClose(e)}\n >\n <hy-icon icon={\"hy-icon-remove\"} size={20} fill={white} />\n </button>\n </div>\n <div class=\"menu--main-group__dropdown__items\">\n {this._dataMainMenu.map((item) => {\n return (\n <a href={item.url} class={{\"menu-main-link\": true}}>\n <span class={\"menu--main-group__label\"}>{item.label}</span>\n </a>\n );\n })}\n </div>\n <div class=\"menu--main-group__dropdown__donate\">\n {this.donate &&\n this.donate.map((i) => {\n return (\n <a class={\"menu--secondary__item hy-link__donate group\"} href={i.url}>\n <hy-icon icon={\"hy-icon-heart-support\"} size={14} fill={logoColorGroup} />\n <span class={\"hy-link__donate__label group\"}>{i.label}</span>\n </a>\n );\n })}\n </div>\n </nav>\n </Host>\n ) : (\n <Host\n class={{\n \"menu--main-group\": true,\n \"menu--main-group__is-open\": this.isMenuOpen,\n }}\n >\n <button\n class={{\n \"menu--main-group__toggle\": true,\n \"is-open\": this.isMenuOpen,\n }}\n aria-expanded={this.isMenuOpen ? \"true\" : \"false\"}\n aria-haspopup=\"menu\"\n //aria-label={this.isMenuOpen ? this._labels['close'] : this._labels['open']}\n >\n {this.isMenuOpen ? (\n <hy-icon class={\"toggle__close\"} icon={\"hy-icon-remove\"} size={8} fill={white} />\n ) : (\n <hy-icon class={\"toggle__caret\"} icon={\"hy-icon-slim-hamburger-menu\"} size={8} fill={white} />\n )}\n <span>{this.menuLabel}</span>\n </button>\n <div\n class={{\n \"menu--main-group__dropdown\": true,\n \"is-open\": this.isMenuOpen,\n }}\n >\n <div class=\"list\">\n {this._dataMainMenu.map((item) => {\n return (\n <a href={item.url} class={{\"menu-main-link\": true}}>\n <span class=\"heading-icon\">\n <hy-icon icon={\"hy-icon-caret-right\"} size={10} fill={white} />\n </span>\n <span class={\"menu--main-group__label\"}>{item.label}</span>\n </a>\n );\n })}\n </div>\n <button\n onClick={(e) => this.handleComponentClick(e)}\n class={{\n \"panel-toggle\": true,\n }}\n aria-label=\"Close menu\"\n >\n <span class=\"panel-toggle__label\">\n <span class=\"panel-toggle__label__title\">{this.menuLabelClose}</span>\n <hy-icon icon={\"hy-icon-remove\"} size={20} fill={ColorVariant.white} />\n </span>\n </button>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/types/components/hy-navigation/hy-menu-main-group/hy-menu-main-group.d.ts CHANGED Viewed

@@ -23,16 +23,13 @@ export declare class HyMenuMainGroup {
   universityMainMenuToggled: EventEmitter;
   mobileMenuTopToggle: EventEmitter;
   private _dataMainMenu;
+  componentWillLoad(): Promise<void>;
   handleComponentClick(event: any): void;
   handleComponentKeyDown(event: KeyboardEvent): void;
+  handleOutsideMenuClick(event: any): void;
   emitEvent(): void;
   adjustMainMenuPosition(target: any): void;
   showBackdropShadow(state?: string, top?: number): void;
-  componentWillLoad(): Promise<void>;
   handleTopMenuClose(event: any): void;
-  handleOutsideMenuClick(event: any): void;
-  desktopMenuToggled(): void;
-  searchPanelToggled(): void;
-  languageMenuToggled(): void;
   render(): any;
 }

package/dist/types/components/hy-site-header/site-search/site-search.d.ts CHANGED Viewed

@@ -40,14 +40,9 @@ export declare class SiteSearch {
   searchPanelToggled: EventEmitter;
   private _labels;
   componentWillLoad(): Promise<void>;
-  desktopMenuToggled(): void;
-  mobileMenuToggled(): void;
-  menuLanguageToggled(): void;
-  universityMainMenuPanelToggled(): void;
+  closePanelWhenOtherDropdownsTriggered(): void;
   handleWindowClick(event: any): void;
   closeSearchPanel(): void;
   handleSearchPanelToggle(event: any): void;
-  adjustPosition(target: any): void;
-  showBackdropShadow(state?: string, top?: number): void;
   render(): any;
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@itcenteratunihelsinki/huds-lib",
-  "version": "0.8.60",
+  "version": "0.8.62",
   "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": "7d04e77abf6ee2bfb3b0eb1d73281197f87005e5"
 }