@itcenteratunihelsinki/huds-lib 0.8.63 → 0.8.65
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.
- package/components/hy-hero.js +28 -16
- package/components/hy-hero.js.map +1 -1
- package/components/utils.js +8 -0
- package/components/utils.js.map +1 -1
- package/dist/cjs/huds-lib.cjs.js +1 -1
- package/dist/cjs/hy-accordion-container_2.cjs.entry.js +1 -1
- package/dist/cjs/hy-banner.cjs.entry.js +1 -1
- package/dist/cjs/hy-breadcrumbs_15.cjs.entry.js +1 -1
- package/dist/cjs/hy-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/hy-content-list_2.cjs.entry.js +1 -1
- package/dist/cjs/hy-cta-button.cjs.entry.js +1 -1
- package/dist/cjs/hy-cta-link.cjs.entry.js +1 -1
- package/dist/cjs/hy-events.cjs.entry.js +1 -1
- package/dist/cjs/hy-filter-group_6.cjs.entry.js +1 -1
- package/dist/cjs/hy-general-list_2.cjs.entry.js +1 -1
- package/dist/cjs/hy-hero-carousel.cjs.entry.js +1 -1
- package/dist/cjs/hy-hero.cjs.entry.js +27 -17
- package/dist/cjs/hy-hero.cjs.entry.js.map +1 -1
- package/dist/cjs/hy-introduction.cjs.entry.js +1 -1
- package/dist/cjs/hy-key-figure_2.cjs.entry.js +1 -1
- package/dist/cjs/hy-key-highlight_2.cjs.entry.js +1 -1
- package/dist/cjs/hy-large-process-flow_2.cjs.entry.js +1 -1
- package/dist/cjs/hy-link-box_2.cjs.entry.js +1 -1
- package/dist/cjs/hy-link-list.cjs.entry.js +1 -1
- package/dist/cjs/hy-link.cjs.entry.js +1 -1
- package/dist/cjs/hy-list-item.cjs.entry.js +1 -1
- package/dist/cjs/hy-menu-main-group.cjs.entry.js +1 -1
- package/dist/cjs/hy-opening-hours_2.cjs.entry.js +1 -1
- package/dist/cjs/hy-pager_2.cjs.entry.js +1 -1
- package/dist/cjs/hy-person-card.cjs.entry.js +1 -1
- package/dist/cjs/hy-person-profile.cjs.entry.js +1 -1
- package/dist/cjs/hy-process_2.cjs.entry.js +1 -1
- package/dist/cjs/hy-shortcuts.cjs.entry.js +1 -1
- package/dist/cjs/hy-user-login-form.cjs.entry.js +1 -1
- package/dist/cjs/hy-video.cjs.entry.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{utils-bfc1127a.js → utils-56f3464c.js} +9 -1
- package/dist/cjs/utils-56f3464c.js.map +1 -0
- package/dist/collection/components/hy-hero/hy-hero.css +282 -4
- package/dist/collection/components/hy-hero/hy-hero.js +66 -16
- package/dist/collection/components/hy-hero/hy-hero.js.map +1 -1
- package/dist/collection/utils/utils.js +8 -0
- package/dist/collection/utils/utils.js.map +1 -1
- package/dist/esm/huds-lib.js +1 -1
- package/dist/esm/hy-accordion-container_2.entry.js +1 -1
- package/dist/esm/hy-banner.entry.js +1 -1
- package/dist/esm/hy-breadcrumbs_15.entry.js +1 -1
- package/dist/esm/hy-checkbox.entry.js +1 -1
- package/dist/esm/hy-content-list_2.entry.js +1 -1
- package/dist/esm/hy-cta-button.entry.js +1 -1
- package/dist/esm/hy-cta-link.entry.js +1 -1
- package/dist/esm/hy-events.entry.js +1 -1
- package/dist/esm/hy-filter-group_6.entry.js +1 -1
- package/dist/esm/hy-general-list_2.entry.js +1 -1
- package/dist/esm/hy-hero-carousel.entry.js +1 -1
- package/dist/esm/hy-hero.entry.js +27 -17
- package/dist/esm/hy-hero.entry.js.map +1 -1
- package/dist/esm/hy-introduction.entry.js +1 -1
- package/dist/esm/hy-key-figure_2.entry.js +1 -1
- package/dist/esm/hy-key-highlight_2.entry.js +1 -1
- package/dist/esm/hy-large-process-flow_2.entry.js +1 -1
- package/dist/esm/hy-link-box_2.entry.js +1 -1
- package/dist/esm/hy-link-list.entry.js +1 -1
- package/dist/esm/hy-link.entry.js +1 -1
- package/dist/esm/hy-list-item.entry.js +1 -1
- package/dist/esm/hy-menu-main-group.entry.js +1 -1
- package/dist/esm/hy-opening-hours_2.entry.js +1 -1
- package/dist/esm/hy-pager_2.entry.js +1 -1
- package/dist/esm/hy-person-card.entry.js +1 -1
- package/dist/esm/hy-person-profile.entry.js +1 -1
- package/dist/esm/hy-process_2.entry.js +1 -1
- package/dist/esm/hy-shortcuts.entry.js +1 -1
- package/dist/esm/hy-user-login-form.entry.js +1 -1
- package/dist/esm/hy-video.entry.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{utils-7438924c.js → utils-2819fd7e.js} +9 -1
- package/dist/esm/utils-2819fd7e.js.map +1 -0
- package/dist/huds-lib/huds-lib.esm.js +1 -1
- package/dist/huds-lib/huds-lib.esm.js.map +1 -1
- package/dist/huds-lib/hy-accordion-container_2.entry.js +1 -1
- package/dist/huds-lib/hy-banner.entry.js +1 -1
- package/dist/huds-lib/hy-breadcrumbs_15.entry.js +1 -1
- package/dist/huds-lib/hy-checkbox.entry.js +1 -1
- package/dist/huds-lib/hy-content-list_2.entry.js +1 -1
- package/dist/huds-lib/hy-cta-button.entry.js +1 -1
- package/dist/huds-lib/hy-cta-link.entry.js +1 -1
- package/dist/huds-lib/hy-events.entry.js +1 -1
- package/dist/huds-lib/hy-filter-group_6.entry.js +1 -1
- package/dist/huds-lib/hy-general-list_2.entry.js +1 -1
- package/dist/huds-lib/hy-hero-carousel.entry.js +1 -1
- package/dist/huds-lib/hy-hero.entry.js +1 -1
- package/dist/huds-lib/hy-hero.entry.js.map +1 -1
- package/dist/huds-lib/hy-introduction.entry.js +1 -1
- package/dist/huds-lib/hy-key-figure_2.entry.js +1 -1
- package/dist/huds-lib/hy-key-highlight_2.entry.js +1 -1
- package/dist/huds-lib/hy-large-process-flow_2.entry.js +1 -1
- package/dist/huds-lib/hy-link-box_2.entry.js +1 -1
- package/dist/huds-lib/hy-link-list.entry.js +1 -1
- package/dist/huds-lib/hy-link.entry.js +1 -1
- package/dist/huds-lib/hy-list-item.entry.js +1 -1
- package/dist/huds-lib/hy-menu-main-group.entry.js +1 -1
- package/dist/huds-lib/hy-opening-hours_2.entry.js +1 -1
- package/dist/huds-lib/hy-pager_2.entry.js +1 -1
- package/dist/huds-lib/hy-person-card.entry.js +1 -1
- package/dist/huds-lib/hy-person-profile.entry.js +1 -1
- package/dist/huds-lib/hy-process_2.entry.js +1 -1
- package/dist/huds-lib/hy-shortcuts.entry.js +1 -1
- package/dist/huds-lib/hy-user-login-form.entry.js +1 -1
- package/dist/huds-lib/hy-video.entry.js +1 -1
- package/dist/huds-lib/utils-2819fd7e.js +2 -0
- package/dist/huds-lib/utils-2819fd7e.js.map +1 -0
- package/dist/types/components/hy-hero/hy-hero.d.ts +7 -1
- package/dist/types/components.d.ts +6 -2
- package/dist/types/utils/utils.d.ts +8 -1
- package/package.json +2 -2
- package/dist/cjs/utils-bfc1127a.js.map +0 -1
- package/dist/esm/utils-7438924c.js.map +0 -1
- package/dist/huds-lib/utils-7438924c.js +0 -2
- package/dist/huds-lib/utils-7438924c.js.map +0 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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};
|
|
1
|
+
import{r as e,h as t,H as h,g as i}from"./index-f84f2a7d.js";import{j as r}from"./globalScript-5a4b7abf.js";import{H as o,a,b as n,c as l,d}from"./utils-2819fd7e.js";const g=':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:not(.hy-hero--full-image){margin-top:32px}}@media (min-width: 60rem){.hy-hero:not(.has-shortcuts){margin-bottom:32px}}@media (min-width: 75.0625rem){.hy-hero .without-sidebar :not(.hy-hero--full-image){max-width:1216px;margin-right:auto;margin-left:auto}}@media (min-width: 75.0625rem){.with-sidebar:not(.hy-hero--full-image) .hy-hero{padding-left:32px;padding-right:32px}}@media (min-width: 1601px){.with-sidebar:not(.hy-hero--full-image) .hy-hero{padding-right:0;padding-left:0;max-width:1216px;margin-right:auto;margin-left:auto}}.hy-hero--full-image{--dark-bg:rgba(0, 0, 0, 0.55);--light-bg:rgba(255, 255, 255, 0.50);--dark-text:var(--brand-main-nearly-black);--light-text:var(--grayscale-white);border-bottom:1px solid var(--grayscale-medium-dark)}@media (min-width: 60rem){.hy-hero--full-image{border-bottom:4px solid var(--grayscale-black);margin-left:-2rem;margin-right:-2rem}}.hy-hero--full-image .hy-hero__container{grid-template-columns:repeat(4, 1fr);grid-template-rows:1fr}.hy-hero--full-image .hy-hero__image-container{grid-column:1/-1;grid-row:1/-1;-o-object-fit:cover;object-fit:cover;padding:0;width:100%}.hy-hero--full-image .hy-hero__image-container img{aspect-ratio:16/8}.hy-hero--full-image .hy-hero__content-container{padding:0}@media (min-width: 60rem){.hy-hero--full-image .hy-hero__content-container{align-self:center;grid-column:1/3;grid-row:1/-1;margin-left:32px;max-width:95%;z-index:2}}@media (min-width: 75.0625rem){.hy-hero--full-image .hy-hero__content-container{margin-left:0}}.hy-hero--full-image .hy-hero__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:24px;padding:16px 16px 32px 16px}@media (min-width: 60rem){.hy-hero--full-image .hy-hero__content{margin-left:32px;gap:24px;padding:32px}}@media (min-width: 75.0625rem){.hy-hero--full-image .hy-hero__content{margin-left:64px;gap:32px}}@media (min-width: 1601px){.hy-hero--full-image .hy-hero__content{margin-left:96px}}.hy-hero--full-image .hy-hero__content[data-text-color=dark_text_light_bg]{-webkit-backdrop-filter:blur(250px);backdrop-filter:blur(250px);background-color:var(--grayscale-white);color:var(--dark-text)}@media (min-width: 60rem){.hy-hero--full-image .hy-hero__content[data-text-color=dark_text_light_bg]{background:var(--light-bg)}}.hy-hero--full-image .hy-hero__content[data-text-color=light_text_dark_bg]{-webkit-backdrop-filter:blur(250px);backdrop-filter:blur(250px);background:var(--grayscale-black);color:var(--light-text)}@media (min-width: 60rem){.hy-hero--full-image .hy-hero__content[data-text-color=light_text_dark_bg]{background:var(--dark-bg)}}.hy-hero--full-image .hy-hero__content[data-text-color=dark_text_no_bg]{background-color:var(--grayscale-white);color:var(--dark-text)}@media (min-width: 60rem){.hy-hero--full-image .hy-hero__content[data-text-color=dark_text_no_bg]{background:transparent;text-shadow:0 0 5px var(--grayscale-white)}}.hy-hero--full-image .hy-hero__content[data-text-color=light_text_no_bg]{background-color:var(--grayscale-black);color:var(--light-text)}@media (min-width: 60rem){.hy-hero--full-image .hy-hero__content[data-text-color=light_text_no_bg]{background:transparent;text-shadow:0 0 5px var(--grayscale-black)}}.hy-hero--full-image .hy-hero__subtitle{font-family:var(--main-font-family);font-size:18px;font-weight:700;line-height:1.2;position:relative}.hy-hero--full-image .hy-hero__subtitle::after{aspect-ratio:1;background-color:currentColor;bottom:-10px;content:"";display:block;height:4px;left:0;position:absolute;width:64px}@media (min-width: 60rem){.hy-hero--full-image .hy-hero__subtitle{font-size:20px}}.hy-hero--full-image h2.hy-hero__title.hy-heading__hero{color:inherit !important;font-family:var(--main-font-family);font-size:32px;font-weight:700;line-height:1.2}@media (min-width: 75.0625rem){.hy-hero--full-image h2.hy-hero__title.hy-heading__hero{font-size:36px}}@media (min-width: 1601px){.hy-hero--full-image h2.hy-hero__title.hy-heading__hero{font-size:64px}}.hy-hero--full-image .hy-hero__description{font-family:var(--main-font-family);font-size:16px;font-weight:400;line-height:1.5;margin:0;padding:0}@media (min-width: 1601px){.hy-hero--full-image .hy-hero__description{font-size:17px}}.hy-hero--full-image .hy-hero__actions{margin:0}.hy-hero--full-image .hy-hero__actions .hy-hero__link{--light-bg:var(--grayscale-white);--dark-bg:var(--grayscale-black);--light-text:var(--grayscale-white);--dark-text:var(--grayscale-black);-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);font-size:16px;font-weight:700;gap:8px;line-height:18px;padding:13px 16px;text-decoration:none;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.hy-hero--full-image .hy-hero__actions .hy-hero__link:hover{text-decoration:underline}.hy-hero--full-image .hy-hero__actions .hy-hero__link svg{width:16px;height:16px}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=dark_text_light_bg]{background:var(--dark-bg);color:var(--light-text)}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=dark_text_light_bg] svg{fill:var(--light-text)}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=light_text_dark_bg]{background:var(--light-bg);color:var(--dark-text)}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=light_text_dark_bg] svg{fill:var(--dark-text)}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=dark_text_no_bg]{background:var(--dark-bg);color:var(--light-text);text-shadow:none}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=dark_text_no_bg] svg{fill:var(--light-text)}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=light_text_no_bg]{background:var(--light-bg);color:var(--dark-text);text-shadow:none}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=light_text_no_bg] svg{fill:var(--dark-text)}.hy-hero--full-image .hy-image__image{-o-object-fit:cover;object-fit:cover}@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 y=null;let c=250;const m=class{constructor(t){e(this,t);this.heroType=o.landing;this.heroGroupType=a.default;this.colorVariant=n.blue;this.sizeVariant=l.large;this.heroTextColor=null;this.image=undefined;this.imageHeight=null;this.imageWidth=null;this.imageAltText="";this.disableLazy=false;this.hasShortcuts=false;this.heading=undefined;this.description=undefined;this.subtitle=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,t){const h=t.getElementsByClassName("hy-hero__content-container")[0];if(e==="small"){if(h.offsetHeight>=300){t.classList.add("has-cover")}else{t.classList.remove("has-cover")}}if(e==="large"){if(h.offsetHeight>=344){t.classList.add("has-cover")}else{t.classList.remove("has-cover")}}}createImageElement(e,h,i){return t("div",{class:`hy-hero__image-container`,style:i},e.image&&(h?t("picture",null,h.map((e=>t("source",{srcSet:e.src,media:e.media,type:e.type,sizes:e.sizes?e.sizes:""}))),t("img",{loading:e.disableLazy?"eager":"lazy",alt:e.imageAltText,class:`hy-image__image`,src:e.image,height:e.imageHeight,width:e.imageWidth})):t("img",{loading:e.disableLazy?"eager":"lazy",alt:e.imageAltText,class:`hy-image__image`,src:e.image,height:e.imageHeight,width:e.imageWidth})))}setAspectRatio(e=16,t=10){const h=t/e*100;return{"--aspectRatio":`${h}%`}}render(){let e=d.heroWhite;let i=this.colorVariant;let r=this.heroType;if(this.heroType==="minor_landing"){i=n.white;r=o.landing}if(i===n.blue){e=d.heroBlue}if(i===n.black){e=d.heroBlack}if(!i||i==="fp_white"){i=n.white}const a=["hy-hero",`hy-hero--${r}`,`hy-hero--${this.heroGroupType}`,`hy-hero--${i}`,`hy-hero--${this.sizeVariant}`,this.hasShortcuts?"has-shortcuts":""];const l=["hy-hero__title","hy-heading__hero"].join(" ");window.onload=()=>{const e=document.getElementsByClassName("hy-hero")[0];this.handleHeroImageObjectFitValue(this.sizeVariant,e);window.addEventListener("resize",(()=>{clearTimeout(y);y=setTimeout((()=>this.handleHeroImageObjectFitValue(this.sizeVariant,e)),c)}))};if(r==="front_page"&&this.sizeVariant!=="full-image"){return t(h,null,t("div",{class:a.join(" ")},t("div",{class:`hy-hero__container`},this.createImageElement(this,this._sourceSet,this.setAspectRatio()),t("div",{class:`hy-hero__spacer-box`}),t("div",{class:`hy-hero__content-container`},t("div",{class:`hy-hero__content`},t("div",{class:`hy-hero__title-container`},t("h2",{innerHTML:this.heading,class:l})),this.description&&t("p",{class:`hy-hero__description`},this.description),this.url&&t("div",{class:`hy-hero__actions`},t("hy-cta-button",{"link-content":this.urlTitle,"sc-label":this.scLabel,url:this.url,"is-external":this.isExternal,variant:e})))))),t("hy-box",{mb:"2, 2, 1, 1"}))}if(this.sizeVariant==="full-image"){const e=this.isExternal?"_blank":"_self";return t("div",{class:`hy-hero hy-hero--full-image`},t("div",{class:`hy-hero__container`},this.createImageElement(this,this._sourceSet,this.setAspectRatio(16,8)),t("div",{class:`hy-hero__content-container`},t("div",{class:`hy-hero__content`,"data-text-color":this.heroTextColor},this.subtitle&&t("span",{class:`hy-hero__subtitle`},this.subtitle),t("h2",{innerHTML:this.heading,class:l}),this.description&&t("p",{class:`hy-hero__description`},this.description),this.url&&t("div",{class:`hy-hero__actions`},t("a",{class:"hy-hero__link",href:this.url,"aria-label":this.scLabel,target:e,"data-text-color":this.heroTextColor},this.urlTitle,t("hy-icon",{icon:"hy-icon-arrow-right",size:16})))))))}return t(h,null,t("div",{class:a.join(" ")},t("div",{class:`hy-hero__container`},this.createImageElement(this,this._sourceSet,this.setAspectRatio()),t("div",{class:`hy-hero__content-container`},t("div",{class:`hy-hero__content`},t("div",{class:`hy-hero__title-container`},t("h2",{innerHTML:this.heading,class:l})),this.description&&t("p",{class:`hy-hero__description`},this.description),this.url&&t("div",{class:`hy-hero__actions`},t("hy-cta-button",{"link-content":this.urlTitle,"sc-label":this.scLabel,url:this.url,"is-external":this.isExternal,variant:e})))))),t("hy-box",{mb:"2, 2, 1, 1"}))}get el(){return i(this)}};m.style=g;export{m as hy_hero};
|
|
2
2
|
//# sourceMappingURL=hy-hero.entry.js.map
|
|
@@ -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 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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"}
|
|
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","createImageElement","props","srcSet","aspectRatio","h","class","style","image","map","item","src","media","type","sizes","loading","disableLazy","alt","imageAltText","height","imageHeight","width","imageWidth","setAspectRatio","aspectRatioWidth","aspectRatioHeight","aspect","render","variant","CtaLinkButtonVariants","heroWhite","colorVariantValue","colorVariant","heroTypeValue","heroType","white","heroBlue","black","heroBlack","hyHeroClasses","heroGroupType","sizeVariant","hasShortcuts","heroTitleClasses","join","window","onload","document","addEventListener","clearTimeout","setTimeout","Host","innerHTML","heading","description","url","urlTitle","scLabel","isExternal","mb","linkTarget","heroTextColor","subtitle","href","target","icon","size"],"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 &:not(.hy-hero--full-image) {\n @include breakpoint($wide) {\n margin-top: 32px;\n }\n }\n\n &:not(.has-shortcuts) {\n @include breakpoint($wide) {\n margin-bottom: 32px;\n }\n }\n\n .without-sidebar :not(.hy-hero--full-image) {\n @include breakpoint($extrawide) {\n max-width: 1216px;\n margin-right: auto;\n margin-left: auto;\n }\n }\n\n .with-sidebar:not(.hy-hero--full-image) & {\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 &--full-image {\n --dark-bg: rgba(0, 0, 0, 0.55);\n --light-bg: rgba(255, 255, 255, 0.50);\n --dark-text: var(--brand-main-nearly-black);\n --light-text: var(--grayscale-white);\n \n border-bottom: 1px solid var(--grayscale-medium-dark);\n \n @include breakpoint($wide) {\n border-bottom: 4px solid var(--grayscale-black);\n margin-left: -2rem;\n margin-right: -2rem;\n }\n\n .hy-hero__container {\n grid-template-columns: repeat(4 , 1fr);\n grid-template-rows: 1fr;\n }\n\n .hy-hero__image-container {\n grid-column: 1 / -1;\n grid-row: 1 / -1;\n object-fit: cover;\n padding: 0;\n width: 100%;\n img {\n aspect-ratio: 16 / 8;\n }\n }\n\n .hy-hero__content-container {\n padding: 0;\n\n @include breakpoint($wide) {\n align-self: center;\n grid-column: 1 / 3;\n grid-row: 1 / -1;\n margin-left: 32px;\n max-width: 95%;\n z-index: 2;\n }\n @include breakpoint($extrawide) {\n margin-left: 0;\n }\n }\n\n .hy-hero__content {\n display: flex;\n flex-direction: column;\n gap: 24px;\n padding: 16px 16px 32px 16px;\n \n @include breakpoint($wide) {\n margin-left: 32px;\n gap: 24px;\n padding: 32px;\n }\n @include breakpoint($extrawide) {\n margin-left: 64px;\n gap: 32px;\n }\n @include breakpoint($xlarge) {\n margin-left: 96px;\n }\n\n @include breakpoint($wide) {\n \n }\n\n &[data-text-color=\"dark_text_light_bg\"] {\n backdrop-filter: blur(250px);\n background-color: var(--grayscale-white);\n color: var(--dark-text);\n\n @include breakpoint($wide) {\n background: var(--light-bg);\n }\n }\n &[data-text-color=\"light_text_dark_bg\"] {\n backdrop-filter: blur(250px);\n background: var(--grayscale-black);\n color: var(--light-text);\n\n @include breakpoint($wide) {\n background: var(--dark-bg);\n }\n }\n &[data-text-color=\"dark_text_no_bg\"] {\n background-color: var(--grayscale-white);\n color: var(--dark-text);\n\n @include breakpoint($wide) {\n background: transparent;\n text-shadow: 0 0 5px var(--grayscale-white);\n }\n }\n &[data-text-color=\"light_text_no_bg\"] {\n background-color: var(--grayscale-black);\n color: var(--light-text);\n\n @include breakpoint($wide) {\n background: transparent;\n text-shadow: 0 0 5px var(--grayscale-black);\n }\n }\n }\n\n .hy-hero__subtitle {\n font-family: var(--main-font-family);\n font-size: 18px;\n font-weight: 700;\n line-height: 1.2;\n position: relative;\n\n &::after {\n aspect-ratio: 1;\n background-color: currentColor;\n bottom: -10px;\n content: '';\n display: block;\n height: 4px;\n left: 0;\n position: absolute;\n width: 64px;\n }\n\n @include breakpoint($wide) {\n font-size: 20px;\n }\n }\n\n h2.hy-hero__title.hy-heading__hero {\n color: inherit !important;\n font-family: var(--main-font-family);\n font-size: 32px;\n font-weight: 700; \n line-height: 1.2;\n\n @include breakpoint($extrawide) {\n font-size: 36px;\n }\n\n @include breakpoint($xlarge) {\n font-size: 64px;\n }\n }\n\n .hy-hero__description {\n font-family: var(--main-font-family);\n font-size: 16px;\n font-weight: 400; \n line-height: 1.5;\n margin: 0;\n padding: 0;\n\n @include breakpoint($xlarge) {\n font-size: 17px;\n }\n }\n\n .hy-hero__actions {\n margin: 0;\n\n .hy-hero__link {\n --light-bg: var(--grayscale-white);\n --dark-bg: var(--grayscale-black);\n --light-text: var(--grayscale-white);\n --dark-text: var(--grayscale-black);\n\n align-items: center;\n display: flex;\n font-family: var(--main-font-family);\n font-size: 16px;\n font-weight: 700;\n gap: 8px;\n line-height: 18px;\n padding: 13px 16px;\n text-decoration: none;\n width: fit-content;\n\n &:hover {\n text-decoration: underline;\n }\n\n svg {\n width: 16px;\n height: 16px;\n }\n\n &[data-text-color=\"dark_text_light_bg\"] {\n background: var(--dark-bg);\n color: var(--light-text);\n svg {fill: var(--light-text)}\n }\n &[data-text-color=\"light_text_dark_bg\"] {\n background: var(--light-bg);\n color: var(--dark-text);\n svg {fill: var(--dark-text)}\n }\n &[data-text-color=\"dark_text_no_bg\"] {\n background: var(--dark-bg);\n color: var(--light-text);\n text-shadow: none;\n svg {fill: var(--light-text)}\n }\n &[data-text-color=\"light_text_no_bg\"] {\n background: var(--light-bg);\n color: var(--dark-text);\n text-shadow: none;\n svg {fill: var(--dark-text)}\n }\n }\n }\n\n .hy-image__image {\n object-fit: cover;\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 HeroTextColor,\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() heroTextColor: HeroTextColor = null;\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() subtitle: 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 // TODO: Refactor, find way to get rid of this.\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 createImageElement(props, srcSet, aspectRatio) {\n return (\n <div class={`hy-hero__image-container`} style={aspectRatio}>\n {props.image &&\n (srcSet ? (\n <picture>\n {srcSet.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={props.disableLazy ? \"eager\" : \"lazy\"}\n alt={props.imageAltText}\n class={`hy-image__image`}\n src={props.image}\n height={props.imageHeight}\n width={props.imageWidth}\n />\n </picture>\n ) : (\n <img\n loading={props.disableLazy ? \"eager\" : \"lazy\"}\n alt={props.imageAltText}\n class={`hy-image__image`}\n src={props.image}\n height={props.imageHeight}\n width={props.imageWidth}\n />\n ))}\n </div>\n );\n }\n\n // TODO: Refactor, is this still even used?\n setAspectRatio(aspectRatioWidth = 16, aspectRatioHeight = 10) {\n const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;\n return {\n \"--aspectRatio\": `${aspect}%` as \"aspectRatio\",\n //\"aspect-ratio\": `${aspectRatioWidth} / ${aspectRatioHeight}` as \"aspectRatio\",\n };\n }\n\n render() {\n let variant = CtaLinkButtonVariants.heroWhite;\n let colorVariantValue = this.colorVariant;\n let heroTypeValue = this.heroType;\n\n //TODO: Refactor\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 this.hasShortcuts ? 'has-shortcuts' : '',\n ];\n\n const heroTitleClasses = [\"hy-hero__title\", \"hy-heading__hero\"].join(\" \");\n\n // TODO: Refactor, find way to get rid of this.\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\" && this.sizeVariant !== 'full-image') {\n return (\n <Host>\n <div class={hyHeroClasses.join(\" \")}>\n <div class={`hy-hero__container`}>\n {this.createImageElement(this, this._sourceSet, this.setAspectRatio())}\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 if (this.sizeVariant === 'full-image') {\n const linkTarget = this.isExternal ? '_blank' : '_self';\n return (\n <div class={`hy-hero hy-hero--full-image`}>\n <div class={`hy-hero__container`}>\n {this.createImageElement(this, this._sourceSet, this.setAspectRatio(16, 8))}\n <div class={`hy-hero__content-container`}>\n <div class={`hy-hero__content`} data-text-color={this.heroTextColor}>\n {this.subtitle && <span class={`hy-hero__subtitle`}>{this.subtitle}</span>}\n <h2 innerHTML={this.heading} class={heroTitleClasses}></h2>\n {this.description && <p class={`hy-hero__description`}>{this.description}</p>}\n {this.url && (\n <div class={`hy-hero__actions`}>\n <a class=\"hy-hero__link\" href={this.url} aria-label={this.scLabel} target={linkTarget} data-text-color={this.heroTextColor}>\n {this.urlTitle}\n <hy-icon icon={\"hy-icon-arrow-right\"} size={16} />\n </a>\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n );\n }\n\n return (\n <Host>\n <div class={hyHeroClasses.join(\" \")}>\n <div class={`hy-hero__container`}>\n {this.createImageElement(this, this._sourceSet, this.setAspectRatio())}\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,2 +1,2 @@
|
|
|
1
|
-
import{r as i,h as t,H as n,g as e}from"./index-f84f2a7d.js";import{f as o,g as r}from"./utils-
|
|
1
|
+
import{r as i,h as t,H as n,g as e}from"./index-f84f2a7d.js";import{f as o,g as r}from"./utils-2819fd7e.js";const a=":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-introduction__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media (min-width: 60rem){.hy-introduction__content.hy-introduction__content--without-image.hy-introduction__content--limit-width{width:calc(50% - 16px)}}.hy-introduction--reversed .hy-introduction__outer-content{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}@media (min-width: 60rem){.hy-introduction--reversed .hy-introduction__outer-content{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}}.hy-introduction--with-bg{width:auto}@media (min-width: 60rem){.hy-introduction--with-bg{padding:0}}.hy-introduction--with-bg__white{background:var(--grayscale-white)}.hy-introduction--with-bg__white .hy-introduction__content--with-image{background:var(--grayscale-white)}.hy-introduction--with-bg__white .hy-introduction__title h2,.hy-introduction--with-bg__white .hy-introduction__description{color:var(--grayscale-black)}.hy-introduction--with-bg__white .hy-introduction__link{background:var(--brand-main-light);color:var(--grayscale-white)}.hy-introduction--with-bg__white .hy-introduction__link__icon svg{fill:var(--grayscale-white)}.hy-introduction--with-bg__white .hy-introduction__link:hover{background:var(--brand-main-active)}.hy-introduction__outer-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@media (min-width: 60rem){.hy-introduction__outer-content{-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;padding-bottom:0}@supports (gap: 32px){.hy-introduction__outer-content{gap:32px}}}@media (min-width: 1601px){@supports (gap: 48px){.hy-introduction__outer-content{gap:48px}}}.hy-introduction__content--without-image{width:100%}@media (min-width: 60rem){.hy-introduction__content--without-image{width:91.46%}}@media (min-width: 75.0625rem){.hy-introduction__content--without-image{width:82.89%}}@media (min-width: 1601px){.hy-introduction__content--without-image{width:74.2%}}@media (min-width: 60rem){.hy-introduction__content--with-image{margin:0;padding:0;width:50%}}@media (min-width: 60rem){.hy-introduction__title .hy-heading__container{padding-top:0}}.hy-introduction__image{width:100%}@media (min-width: 60rem){.hy-introduction__image{width:50%}@supports not (gap: 32px){.hy-introduction__image{width:calc(50% - 32px)}}}.hy-introduction__image img,.hy-introduction__image .hy-image,.hy-introduction__image .hy-image .hy-image__image-container{height:100% !important}.hy-introduction__description{font-size:0.9375rem;line-height:22px;font-weight:400;color:var(--grayscale-black);font-family:var(--main-font-family);margin-bottom:24px;margin-top:0}@media (min-width: 30rem){.hy-introduction__description{font-size:1rem;line-height:24px}}@media (min-width: 60rem){.hy-introduction__description{margin-bottom:28px}}@media (min-width: 1601px){.hy-introduction__description{font-size:1.0625rem;line-height:26px}}@media (min-width: 75.0625rem){.hy-introduction__description__large{font-size:1.0625rem;line-height:26px;margin-bottom:28px}}.hy-introduction__link{font-size:1rem;line-height:20px;letter-spacing:-0.5px;background-color:var(--brand-main-light);-webkit-box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.1);box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.1);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--grayscale-white);cursor:pointer;display:inline-block;font-family:var(--main-font-family);font-weight:700;height:100%;padding:12px 60px 12px 12px;position:relative;text-decoration:none}@media (min-width: 30rem){.hy-introduction__link{font-size:1rem;line-height:20px;letter-spacing:-0.6px;padding:15px 62px 15px 16px}}@media (min-width: 60rem){.hy-introduction__link{font-size:1.125rem;line-height:20px}}@media (min-width: 75.0625rem){.hy-introduction__link{font-size:1.25rem;line-height:20px;letter-spacing:-0.7px;padding:16px 70px 16px 18px}}.hy-introduction__link__icon{position:absolute;right:16px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.hy-introduction__link__icon svg{fill:var(--grayscale-white)}";const d=class{constructor(t){i(this,t);this.variant=null;this.reversed=false;this.limitContentWidth=false;this.textTitle=undefined;this.textDescription=null;this.url=undefined;this.scLabel=undefined;this.urlTitle=undefined;this.imageUrl=undefined;this.imageAlt="";this.isExternal=false;this.headerstyle="common";this.sourceSet=undefined}componentDidLoad(){let i=this.el.closest(".hy-main");if(i){if(!i.classList.contains("with-sidebar")){this.headerstyle="large"}}}render(){const i=["hy-introduction",`hy-introduction__${this.headerstyle}`,this.headerstyle,this.reversed?"hy-introduction--reversed":"",this.variant?`hy-introduction--with-bg hy-introduction--with-bg__${this.variant}`:"hy-introduction--without-bg"].join(" ");const e=["hy-introduction__title",`hy-introduction__title__${this.headerstyle}`].join(" ");const a=["hy-introduction__description",`hy-introduction__description__${this.headerstyle}`].join(" ");const d=["hy-introduction__content",this.reversed?"hy-introduction__content--reversed":"",this.imageUrl?"hy-introduction__content--with-image":"hy-introduction__content--without-image",this.limitContentWidth?"hy-introduction__content--limit-width":""].join(" ");const h=this.isExternal?"_blank":"_self";return t(n,null,t("hy-box",{pt:"1.25, 1.25, 1.5, 2.5"}),t("div",{class:i},t("hy-main-content-wrapper",null,t("div",{class:"hy-introduction__outer-content"},t("div",{class:d},t("hy-heading",{class:e,heading:o.h2,section:r.introduction},this.textTitle),t("p",{class:a},this.textDescription),this.url&&t("div",{class:"hy-introduction__link__container"},t("a",{class:"hy-introduction__link",href:this.url,"aria-label":this.scLabel,target:h},this.urlTitle,t("span",{class:"hy-introduction__link__icon"},t("hy-icon",{icon:"hy-icon-arrow-right",size:24}))))),this.imageUrl&&(this.sourceSet?t("div",{class:"hy-introduction__image"},t("hy-image",{"source-set":this.sourceSet,"image-url":this.imageUrl,aspectRatioWidth:16,aspectRatioHeight:10,"image-alt":this.imageAlt})):t("div",{class:"hy-introduction__image"},t("hy-image",{"image-url":this.imageUrl,aspectRatioWidth:16,aspectRatioHeight:10,"image-alt":this.imageAlt})))))),t("hy-box",{mb:"1.75, 1.75, 2, 2.5"}))}get el(){return e(this)}};d.style=a;export{d as hy_introduction};
|
|
2
2
|
//# sourceMappingURL=hy-introduction.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,h as i,H as a,g as r}from"./index-f84f2a7d.js";import{K as t}from"./utils-
|
|
1
|
+
import{r as e,h as i,H as a,g as r}from"./index-f84f2a7d.js";import{K as t}from"./utils-2819fd7e.js";import{j as n}from"./globalScript-5a4b7abf.js";const o=":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-key-figure{display:block;margin-bottom:32px;text-align:center;width:100%}@media (min-width: 30rem){.hy-key-figure{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%}}@media (min-width: 60rem){.hy-key-figure{text-align:left}}.hy-key-figure__title{font-size:2.5rem;line-height:60px;font-weight:700;-webkit-box-decoration-break:clone;box-decoration-break:clone;color:var(--brand-main-light);display:inline;font-family:var(--main-font-family);letter-spacing:-2px;position:relative;z-index:1}@media (min-width: 30rem){.hy-key-figure__title{font-size:2.5rem;line-height:30px}}@media (min-width: 75.0625rem){.hy-key-figure__title{font-size:5rem;line-height:70px}}.hy-key-figure__description{color:var(--grayscale-dark);font-family:var(--main-font-family);font-size:0.875rem;line-height:20px;letter-spacing:0;line-height:20px;margin-top:8px}@media (min-width: 75.0625rem){.hy-key-figure__description{font-size:1.25rem;line-height:20px}}";const d=class{constructor(i){e(this,i);this.variant=t.default;this.heading=undefined;this.description=undefined}render(){const e=[this.variant,"hy-key-figure"].join(" ");return i("div",{class:e},i("div",{class:"hy-key-figure__title"},this.heading),i("div",{class:"hy-key-figure__description"},this.description))}};d.style=o;const l=":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-key-figure-group-container{margin:20px 0 28px 0}@media (min-width: 60rem){.hy-key-figure-group-container{margin:24px 0 32px 0}}@media (min-width: 1601px){.hy-key-figure-group-container{margin:40px 0}}@media (min-width: 75.0625rem){.hy-key-figure-group-container__large{margin:40px 0}}.hy-key-figure-group{display:block;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;max-width:30rem;margin-right:auto;margin-left:auto;width:100%}@media (min-width: 30rem){.hy-key-figure-group{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;max-width:100%}}@media (min-width: 60rem){.hy-key-figure-group{-webkit-box-pack:left;-ms-flex-pack:left;justify-content:left}}@media (min-width: 60rem){.hy-key-figure-group.hy-key-figure-group-centered{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}}@media (min-width: 30rem){.hy-key-figure-group .box-2,.hy-key-figure-group .box-3{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:33%;width:33%}}@media (min-width: 30rem){.hy-key-figure-group .box-4{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:49%;width:49%}}@media (min-width: 60rem){.hy-key-figure-group .box-4{max-width:25%;width:25%}}";const s=class{constructor(i){e(this,i);this.dataItems=undefined;this.headerstyle="common"}async componentWillLoad(){this._dataItems=await n(this.dataItems)}componentDidLoad(){let e=this.el.closest(".hy-main");if(e){if(!e.classList.contains("with-sidebar")){this.headerstyle="large"}}}getBoxClassName(e){let i="box";if(e%3==0){i="box-3"}else if(e%4==0){i="box-4"}else if(e%5==0){i="box-5"}return i}render(){const e=this._dataItems.length==4?t.small:t.default;const r=[e,"hy-key-figure-group-container",`hy-key-figure-group-container__${this.headerstyle}`].join(" ");const n=["hy-key-figure-group"].join(" ");const o=["hy-key-figure-group","hy-key-figure-group-centered"].join(" ");if(this._dataItems.length%5==0){return i(a,null,i("div",{class:r},i("div",{class:n},this._dataItems.map(((a,r)=>{if(r<3){return i("hy-key-figure",{class:"box-3",variant:e,heading:a.heading,description:a.description})}}))),i("div",{class:o},this._dataItems.map(((a,r)=>{if(r>=3){return i("hy-key-figure",{class:"box-2",variant:e,heading:a.heading,description:a.description})}})))),i("hy-box",{mb:"1.75, 1.75, 2, 2.5"}))}else{return i(a,null,i("div",{class:r},i("div",{class:n},this._dataItems.map((a=>i("hy-key-figure",{class:this.getBoxClassName(this._dataItems.length),variant:e,heading:a.heading,description:a.description}))))),i("hy-box",{mb:"1.75, 1.75, 2, 2.5"}))}}get el(){return r(this)}};s.style=l;export{d as hy_key_figure,s as hy_key_figure_group};
|
|
2
2
|
//# sourceMappingURL=hy-key-figure_2.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as i,h as e,H as a,g as t}from"./index-f84f2a7d.js";import{K as r}from"./utils-
|
|
1
|
+
import{r as i,h as e,H as a,g as t}from"./index-f84f2a7d.js";import{K as r}from"./utils-2819fd7e.js";import{j as h}from"./globalScript-5a4b7abf.js";const n=":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}.hy-key-highlight{display:block;margin-bottom:20px;width:100%}@media (min-width: 30rem){.hy-key-highlight{width:100%}}.hy-key-highlight__title__container{display:inline-block;position:relative;text-align:center;margin-bottom:1rem}@media (min-width: 30rem){.hy-key-highlight__title__container{text-align:left}}.hy-key-highlight__title__container::after{clear:both}.hy-key-highlight__title{font-weight:700;background-color:var(--brand-main-light);-webkit-box-shadow:-5px 0px 0 0px var(--brand-main-light), 5px 0px 0 0px var(--brand-main-light), 0 0 0 0px var(--brand-main-light);box-shadow:-5px 0px 0 0px var(--brand-main-light), 5px 0px 0 0px var(--brand-main-light), 0 0 0 0px var(--brand-main-light);-webkit-box-decoration-break:clone;box-decoration-break:clone;color:var(--grayscale-white);display:inline;font-family:var(--main-font-family);-ms-hyphens:auto;hyphens:auto;letter-spacing:-0.75px;padding:0 5px;position:relative;text-transform:uppercase;word-break:break-word}.hy-key-highlight__description{color:var(--grayscale-dark);font-family:var(--main-font-family);letter-spacing:0;margin-top:8px;text-align:center}@media (min-width: 30rem){.hy-key-highlight__description{text-align:left}}.hy-key-highlight.small .hy-key-highlight__title__container{font-size:1.5rem;line-height:29px}.hy-key-highlight.small .hy-key-highlight__description{font-size:0.875rem;line-height:19px}.hy-key-highlight.big .hy-key-highlight__title__container{font-size:1.5rem;line-height:29px}@media (min-width: 30rem){.hy-key-highlight.big .hy-key-highlight__title__container{font-size:2.5rem;line-height:45px}}.hy-key-highlight.big .hy-key-highlight__description{font-size:0.875rem;line-height:20px}@media (min-width: 30rem){.hy-key-highlight.big .hy-key-highlight__description{font-size:1.25rem;line-height:20px}}";const o=class{constructor(e){i(this,e);this.variant=r.default;this.heading=undefined;this.description=undefined}render(){const i=[this.variant,"hy-key-highlight"].join(" ");return e("div",{class:i},e("div",{class:"hy-key-highlight__title__container"},e("div",{class:"hy-key-highlight__title",innerHTML:this.heading})),e("div",{class:"hy-key-highlight__description"},this.description))}};o.style=n;const l=":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-key-highlight-group-container{overflow:hidden}.hy-key-highlight-group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap}@media (min-width: 30rem){.hy-key-highlight-group{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin:0 calc(-1 * var(--gutter-medium))}}@media (min-width: 60rem){.hy-key-highlight-group{margin:0 calc(-1 * var(--gutter-wide))}}.hy-key-highlight-group .box,.hy-key-highlight-group .box-4{padding:0 50px 0 20px}@media (min-width: 30rem){.hy-key-highlight-group .box,.hy-key-highlight-group .box-4{padding:0 var(--gutter-medium)}}@media (min-width: 60rem){.hy-key-highlight-group .box,.hy-key-highlight-group .box-4{padding:0 var(--gutter-wide)}}.hy-key-highlight-group .box{width:100%}@media (min-width: 30rem){.hy-key-highlight-group .box{width:33.33%;max-width:33.33%}}.hy-key-highlight-group .box-4{width:100%}@media (min-width: 30rem){.hy-key-highlight-group .box-4{width:50%;max-width:50%}}@media (min-width: 60rem){.hy-key-highlight-group .box-4{width:25%}}";const g=class{constructor(e){i(this,e);this.variant=r.default;this.dataItems=undefined;this.headerstyle="common"}async componentWillLoad(){this._dataItems=await h(this.dataItems)}componentDidLoad(){let i=this.el.closest(".hy-main");if(i){if(!i.classList.contains("with-sidebar")){this.headerstyle="large"}}}render(){const i=[this.variant,"hy-key-highlight-group",`hy-key-highlight-group__${this.headerstyle}`].join(" ");const t=this._dataItems.length;const r=t%4==0?"box-4":"box";return e(a,null,e("div",{class:i},this._dataItems.map((i=>e("hy-key-highlight",{class:r,variant:this.variant,heading:i.heading,description:i.description})))))}get el(){return t(this)}};g.style=l;export{o as hy_key_highlight,g as hy_key_highlight_group};
|
|
2
2
|
//# sourceMappingURL=hy-key-highlight_2.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,h as a,g as r}from"./index-f84f2a7d.js";import{f as i}from"./utils-
|
|
1
|
+
import{r as e,h as a,g as r}from"./index-f84f2a7d.js";import{f as i}from"./utils-2819fd7e.js";import{j as t}from"./globalScript-5a4b7abf.js";const n=':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-large-process-flow{max-width:100%;padding-top:8px;width:100%}@media (min-width: 30rem){.hy-large-process-flow{max-width:calc(87.5% + var(--gutter-narrow));padding-top:0}}@media (min-width: 60rem){.hy-large-process-flow{max-width:calc(66.6666666667% + var(--gutter-wide))}}@media (min-width: 75.0625rem){.hy-large-process-flow{max-width:calc(66.6666666667% + var(--gutter-extrawide))}}.hy-large-process-flow h3.hy-heading{font-size:20px}@media (min-width: 30rem){.hy-large-process-flow h3.hy-heading{font-size:32px}}.hy-large-process-flow__first-phase h3.hy-heading{margin-bottom:8px;padding:24px 0 !important}@media (min-width: 30rem){.hy-large-process-flow__first-phase h3.hy-heading{margin-bottom:24px;margin-top:16px}}.hy-large-process-flow__multi-phase-title{position:relative}.hy-large-process-flow__multi-phase-title:after{background-color:var(--grayscale-background-arrow);bottom:0;content:" ";display:inline-block;height:100%;left:26.5px;position:absolute;width:8px;z-index:-1}@media (min-width: 30rem){.hy-large-process-flow__multi-phase-title:after{left:calc(12.5% + var(--gutter-narrow) + 26.5px)}}@media (min-width: 60rem){.hy-large-process-flow__multi-phase-title:after{left:calc(8.3333333333% + var(--gutter-wide) + 26.5px)}}@media (min-width: 75.0625rem){.hy-large-process-flow__multi-phase-title:after{left:calc(8.3333333333% + var(--gutter-extrawide) + 26.5px)}}.hy-large-process-flow__multi-phase-title h3.hy-heading{background-color:var(--grayscale-white);margin:1.5rem 0 1.5rem;padding:8px 0 !important}@media (min-width: 30rem){.hy-large-process-flow__multi-phase-title h3.hy-heading{margin:48px 0;padding:16px 0 !important}}';const o=class{constructor(a){e(this,a);this.headerstyle="common";this.dataItems=undefined}async componentWillLoad(){this._dataItems=await t(this.dataItems)}componentDidLoad(){let e=this.el.closest(".hy-main");if(e){if(!e.classList.contains("with-sidebar")){this.headerstyle="large"}}}render(){const e=["hy-large-process-flow",`hy-large-process-flow__${this.headerstyle}`].join(" ");return[a("div",{class:e},this._dataItems.map(((e,r)=>{let t=JSON.stringify(e.boxes);const n=r!==0?"hy-large-process-flow__multi-phase-title":"hy-large-process-flow__first-phase";return[a("hy-heading",{class:n,heading:i.h3},e.phaseTitle),a("hy-large-process-flow-phase",{"data-items":t})]})))]}get el(){return r(this)}};o.style=n;const l=':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-large-process-flow__phase-container{padding-left:0;position:relative;max-width:100%;width:100%}@media (min-width: 30rem){.hy-large-process-flow__phase-container{padding-left:calc(12.5% + var(--gutter-narrow))}}@media (min-width: 60rem){.hy-large-process-flow__phase-container{padding-left:calc(8.3333333333% + var(--gutter-wide))}}@media (min-width: 75.0625rem){.hy-large-process-flow__phase-container{padding-left:calc(8.3333333333% + var(--gutter-extrawide))}}.hy-large-process-flow__phase-container__phase{position:relative}.hy-large-process-flow__phase-container__phase:after{background-color:var(--grayscale-background-arrow);bottom:0;content:" ";display:inline-block;height:24px;left:26.5px;position:absolute;width:8px}@media (min-width: 30rem){.hy-large-process-flow__phase-container__phase:after{display:inline-block;height:100%}}.hy-large-process-flow__phase-container__phase:last-child:after{display:none}@media (min-width: 30rem){.hy-large-process-flow__phase-container__phase:last-child:after{display:inline-block}}.hy-large-process-flow__phase-container__phase:last-child .hy-large-process-flow__phase-container__phase__content{top:0;margin-top:-24px}.hy-large-process-flow__phase-container__phase__number{display:grid;place-items:center;position:relative;width:64px;z-index:2}.hy-large-process-flow__phase-container__phase__number__number{background-color:var(--brand-main-light);color:var(--grayscale-white);display:grid;font-family:var(--main-font-family);font-size:2rem;line-height:36px;font-weight:700;height:48px;letter-spacing:0;margin:0;padding:0;place-items:center;position:relative;width:48px}.hy-large-process-flow__phase-container__phase__number__number::after{content:"";height:48px;left:-6px;position:absolute;width:48px}@media (min-width: 30rem){.hy-large-process-flow__phase-container__phase__number__number{font-size:2.25rem;line-height:40px;height:64px;width:64px}.hy-large-process-flow__phase-container__phase__number__number::after{content:"";height:64px;left:-6px;position:absolute;width:64px}}.hy-large-process-flow__phase-container__phase__content{background-color:var(--grayscale-background-box);margin:0 -56px;padding:48px 0 24px 0;position:relative;top:-24px}@media (min-width: 30rem){.hy-large-process-flow__phase-container__phase__content{margin:0 0 -8px 32px;padding:32px 0;top:-32px}}.hy-large-process-flow__phase-container__phase__content__heading{color:var(--brand-main-nearly-black);font-family:var(--main-font-family);font-size:1.25rem;line-height:30px;font-weight:600;letter-spacing:-0.5px;margin-bottom:24px;padding:0 56px}@media (min-width: 30rem){.hy-large-process-flow__phase-container__phase__content__heading{font-size:1.625rem;line-height:30px;font-weight:700;letter-spacing:-0.65px;padding:0 44px}}.hy-large-process-flow__phase-container__phase__content__description{color:var(--grayscale-dark);font-family:var(--main-font-family);font-size:1rem;line-height:24px;letter-spacing:0;margin-bottom:24px;padding:0 56px}@media (min-width: 30rem){.hy-large-process-flow__phase-container__phase__content__description{padding:0 44px}}.hy-large-process-flow__phase-container__phase__content__links{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-right:0;padding:0 56px}@media (min-width: 30rem){.hy-large-process-flow__phase-container__phase__content__links{margin-right:-6px;padding:0}}.hy-large-process-flow__phase-container__phase__content__links .phase-link{margin-bottom:8px}.hy-large-process-flow__phase-container__phase__content__links .phase-link.last{margin-bottom:0}';const s=class{constructor(a){e(this,a);this.dataItems=undefined}async componentWillLoad(){this._dataItems=await t(this.dataItems)}render(){const e=["hy-large-process-flow__phase-container"].join(" ");return a("div",{class:e},this._dataItems.map(((e,r)=>{var i;if(e.links&&e.links.length>0){let r=e.links;let t=e.links.length;i=r.map(((e,r)=>{let i=r==t-1?"phase-link last":"phase-link";return e?a("hy-cta-link",{class:i,"link-content":e.label,"sc-label":e.ariaLabel,"is-external":e.isExternal,url:e.url}):null}))}return[a("div",{class:"hy-large-process-flow__phase-container__phase"},a("div",{class:"hy-large-process-flow__phase-container__phase__number"},a("h2",{class:"hy-large-process-flow__phase-container__phase__number__number"},a("div",{class:"hy-large-process-flow__phase-container__phase__number__title"},r+1))),a("div",{class:"hy-large-process-flow__phase-container__phase__content"},a("div",{class:"hy-large-process-flow__phase-container__phase__content__heading"},e.heading),a("div",{class:"hy-large-process-flow__phase-container__phase__content__description",innerHTML:e.description}),a("div",{class:"hy-large-process-flow__phase-container__phase__content__links"},i)))]})))}};s.style=l;export{o as hy_large_process_flow,s as hy_large_process_flow_phase};
|
|
2
2
|
//# sourceMappingURL=hy-large-process-flow_2.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as i,h as t,g as e,H as a}from"./index-f84f2a7d.js";import{l as n}from"./utils-
|
|
1
|
+
import{r as i,h as t,g as e,H as a}from"./index-f84f2a7d.js";import{l as n}from"./utils-2819fd7e.js";import{j as r}from"./globalScript-5a4b7abf.js";const o=':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{height:100%}.hy-link-box-container{background:var(--grayscale-background-box);width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;height:100%;position:relative}.hy-link-box-container:focus-within{outline:auto}.hy-link-box-container:hover{cursor:pointer}.hy-link-box-container:hover .hy-link-box__text-container__title{color:var(--brand-main);text-decoration:underline}.hy-link-box-container:hover .hy-cta-link{text-decoration:underline}.hy-link-box-container:hover .hy-cta-link .hy-cta-link__icon{background-color:var(--brand-main)}.hy-link-box__image-container{margin:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:stretch;-ms-flex-pack:stretch;justify-content:stretch;min-height:10rem;position:relative}.hy-link-box__image-container:before{content:"";display:block;padding-top:62.5%;width:100%}.hy-link-box__image-container img{bottom:0;height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;right:0;top:0;width:100%}.hy-link-box__image-container.is-image-missing svg{position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);left:50%;width:85px;height:auto;fill:#d2d2d2}.hy-link-box__text-container{padding:16px}.hy-link-box__text-container__title{font-size:1.3125rem;line-height:28px;font-weight:700;color:var(--brand-main-nearly-black);font-family:var(--main-font-family);letter-spacing:-0.42px;-ms-hyphens:auto;hyphens:auto;word-break:break-word;margin:0 0 16px;text-wrap:balance}@media screen and (min-width: 1024px){.hy-link-box__text-container__title{font-size:1.5625rem;line-height:32px;letter-spacing:-0.5px}}.hy-link-box__text-container__description{font-size:0.9375rem;line-height:22px;color:var(--grayscale-black);font-family:var(--main-font-family);margin:0;text-wrap:pretty}@media screen and (min-width: 1024px){.hy-link-box__text-container__description{font-size:1.0625rem;line-height:26px}}.hy-cta-link{font-weight:600;font-size:1rem;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--brand-main);display:inline-grid;font-family:var(--main-font-family);gap:16px;grid-auto-flow:column;letter-spacing:-0.5px;overflow:hidden;text-decoration:none;margin:0 -8px 24px 0;align-self:flex-end}.hy-cta-link span[aria-hidden=true]{position:absolute;inset:0}.hy-cta-link:focus{outline:none}.hy-cta-link__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--brand-main-light);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:40px}.hy-cta-link__icon svg{fill:var(--grayscale-white)}.hy-cta-link__icon--external svg{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}';const l=class{constructor(t){i(this,t);this.variant=n.default;this.imageUrl=null;this.imageAlt=null;this.disableLazy=false;this.useSlot=false;this.showLogo=false;this.textTitle=undefined;this.textDescription=null;this.url=undefined;this.isExternal=false;this.scLabel=undefined;this.readMoreLabel=undefined;this.headerstyle="common";this.sourceSet=undefined}srcSetWatcher(i){this._sourceSet=typeof i==="string"?JSON.parse(i):i}componentWillLoad(){this.srcSetWatcher(this.sourceSet)}componentDidLoad(){let i=this.el.closest(".hy-main");if(i){if(!i.classList.contains("with-sidebar")){this.headerstyle="large"}}}render(){const i=["hy-link-box-container"].join(" ");const e=["hy-link-box",this.variant,`hy-link-box__${this.variant}`,this.headerstyle,`hy-link-box__${this.headerstyle}`,this.imageUrl?"hy-link-box--with-image":null].join(" ");const a=["hy-link-box__text-container",this.imageUrl?"hy-link-box--with-image":null].join(" ");const n=["hy-link-box__text-container__title",`hy-link-box__text-container__title__${this.variant}`,`hy-link-box__text-container__title__${this.headerstyle}`,this.imageUrl?"hy-link-box__text-container__title__image":"",this.imageUrl?"image":""].join(" ");const r=["hy-link-box__text-container__description",`hy-link-box__text-container__description__${this.variant}`,`hy-link-box__text-container__description__${this.headerstyle}`].join(" ");const o=this.isExternal?"_blank":"_self";const l=16;const s=10;const d=s/l*100;const h={"--aspectRatio":`${d}%`};return[t("article",{class:i},t("div",{class:e},this.imageUrl&&(this._sourceSet?t("figure",{class:"hy-link-box__image-container",style:h},t("picture",null,this._sourceSet.map((i=>t("source",{srcSet:i.src,media:i.media,type:i.type,sizes:i.sizes?i.sizes:""}))),t("img",{loading:this.disableLazy?"eager":"lazy","aria-hidden":"true",src:this.imageUrl,alt:this.imageAlt}))):t("figure",{class:"hy-link-box__image-container",style:h},t("img",{loading:this.disableLazy?"eager":"lazy","aria-hidden":"true",src:this.imageUrl,alt:this.imageAlt}))),!this.imageUrl&&this.showLogo&&t("div",{"aria-hidden":"true",class:"hy-link-box__image-container is-image-missing"},t("hy-icon",{class:{"hy-site-logo__icon":true},icon:"hy-icon-hy-logo"})),t("div",{class:a},t("h3",{class:n},this.textTitle),this.textDescription&&t("p",{class:r},this.textDescription.length>=141?this.textDescription.slice(0,140)+"...":this.textDescription))),t("a",{"aria-label":this.scLabel||`${this.readMoreLabel} - ${this.textTitle}`,title:this.scLabel||`${this.readMoreLabel} - ${this.textTitle}`,href:this.url,target:o,class:`hy-cta-link hy-cta-link--default`},t("span",{"aria-hidden":"true"}),t("span",null,this.readMoreLabel),t("span",{class:`hy-cta-link__icon ${this.isExternal?"hy-cta-link__icon--external":""}`},t("hy-icon",{icon:"hy-icon-arrow-to-right",size:24}))))]}get el(){return e(this)}static get watchers(){return{sourceSet:["srcSetWatcher"]}}};l.style=o;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}.hy-link-box-list{padding:0;margin:0;list-style:none;display:grid;gap:32px 0}@media screen and (min-width: 768px){.hy-link-box-list{grid-template-columns:repeat(2, 1fr);gap:32px 24px}}@media screen and (min-width: 1024px){.hy-link-box-list{grid-template-columns:repeat(3, 1fr)}}@media screen and (min-width: 1920px){.hy-link-box-list{gap:32px}}";const d=class{constructor(t){i(this,t);this.headerstyle="common";this.variant=n.default;this.readMoreLabel=undefined;this.dataItems=undefined}async componentWillLoad(){this._dataItems=await r(this.dataItems)}componentDidLoad(){let i=this.el.closest(".hy-main");if(i){if(!i.classList.contains("with-sidebar")){this.headerstyle="large"}}}render(){const i=["hy-link-box-list",this.variant,`hy-link-box-list__${this.variant}`,`hy-link-box-list__${this.headerstyle}`].join(" ");const e=[this.variant,`hy-link-box__${this.variant}`].join(" ");return t(a,null,t("ul",{class:i},this._dataItems.map((i=>t("li",null,t("hy-link-box",{class:e,variant:this.variant,"source-set":i.imageSets,"image-url":i.imageUrl,"image-alt":i.imageAlt,"text-title":i.heading,"text-description":i.description,"show-logo":i.showLogo,url:i.boxUrl,"is-external":i.isExternal,"sc-label":i.ariaLabel,"read-more-label":this.readMoreLabel}))))),t("hy-box",{mb:"1.75, 1.75, 2, 2.5"}))}get el(){return e(this)}};d.style=s;export{l as hy_link_box,d as hy_link_box_list};
|
|
2
2
|
//# sourceMappingURL=hy-link-box_2.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as i,h as t,g as e}from"./index-f84f2a7d.js";import{h as l}from"./utils-
|
|
1
|
+
import{r as i,h as t,g as e}from"./index-f84f2a7d.js";import{h as l}from"./utils-2819fd7e.js";import{j as n}from"./globalScript-5a4b7abf.js";const a=":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-link-list{margin-bottom:32px}.hy-link-list__links{display:grid;gap:16px;list-style:none;margin:0;padding:0}@media (min-width: 30rem){.hy-link-list__links--grid{gap:16px 24px;grid-template-columns:repeat(2, 1fr)}}@media (min-width: 60rem){.without-sidebar .hy-link-list__links--grid.col-3{gap:16px 24px;grid-template-columns:repeat(3, 1fr)}}@media (min-width: 75.0625rem){.without-sidebar .hy-link-list__links--grid.col-3{gap:16px 32px}}@media (min-width: 60rem){.without-sidebar .hy-link-list__links--grid.col-4{gap:16px 24px;grid-template-columns:repeat(4, 1fr)}}@media (min-width: 75.0625rem){.without-sidebar .hy-link-list__links--grid.col-4{gap:16px 32px}}@media (min-width: 75.0625rem){.with-sidebar .hy-link-list__links--grid.col-3{gap:16px 24px;grid-template-columns:repeat(3, 1fr)}}@media (min-width: 1601px){.with-sidebar .hy-link-list__links--grid.col-3{gap:16px 32px}}@media (min-width: 75.0625rem){.with-sidebar .hy-link-list__links--grid.col-4{gap:16px 24px;grid-template-columns:repeat(4, 1fr)}}@media (min-width: 1601px){.with-sidebar .hy-link-list__links--grid.col-4{gap:16px 32px}}.hy-link-list__title{font-weight:700;font-family:var(--main-font-family);margin:0 0 32px;color:var(--brand-main-nearly-black)}.is-content-page h2.hy-link-list__title{font-size:1.625rem;line-height:32px;letter-spacing:-0.82px}@media (min-width: 30rem){.is-content-page h2.hy-link-list__title{font-size:1.875rem;line-height:36px;letter-spacing:-0.6px}}@media (min-width: 75.0625rem){.without-sidebar .is-content-page h2.hy-link-list__title{font-size:2.125rem;line-height:40px;letter-spacing:-0.68px}}@media (min-width: 1601px){.with-sidebar .is-content-page h2.hy-link-list__title{font-size:2.125rem;line-height:40px;letter-spacing:-0.68px}}.is-front-page h2.hy-link-list__title,.is-landing-page h2.hy-link-list__title{font-size:1.75rem;line-height:32px;letter-spacing:-0.7px;text-transform:uppercase}@media (min-width: 30rem){.is-front-page h2.hy-link-list__title,.is-landing-page h2.hy-link-list__title{font-size:2.125rem;line-height:40px;letter-spacing:-0.85px}}@media (min-width: 75.0625rem){.without-sidebar .is-front-page h2.hy-link-list__title,.without-sidebar .is-landing-page h2.hy-link-list__title{font-size:2.625rem;line-height:48px;letter-spacing:-1.05px}}@media (min-width: 1601px){.with-sidebar .is-front-page h2.hy-link-list__title,.with-sidebar .is-landing-page h2.hy-link-list__title{font-size:2.625rem;line-height:48px;letter-spacing:-1.05px}}.hy-two-columns h2.hy-link-list__title{font-size:1.125rem;line-height:22px;letter-spacing:-0.45px;margin-bottom:16px;text-transform:none}@media (min-width: 75.0625rem){.without-sidebar .hy-two-columns h2.hy-link-list__title{font-size:1.25rem;line-height:24px;letter-spacing:-0.5px}}@media (min-width: 1601px){.with-sidebar .hy-two-columns h2.hy-link-list__title{font-size:1.25rem;line-height:24px;letter-spacing:-0.5px}}.is-content-page h3.hy-link-list__title{font-size:1.3125rem;line-height:28px;letter-spacing:-0.42px}@media (min-width: 30rem){.is-content-page h3.hy-link-list__title{font-size:1.5625rem;line-height:32px;letter-spacing:-0.5px}}.is-front-page h3.hy-link-list__title,.is-landing-page h3.hy-link-list__title{font-size:1.625rem;line-height:32px;letter-spacing:-0.52px}@media (min-width: 30rem){.is-front-page h3.hy-link-list__title,.is-landing-page h3.hy-link-list__title{font-size:1.875rem;line-height:36px;letter-spacing:-0.6px}}@media (min-width: 75.0625rem){.without-sidebar .is-front-page h3.hy-link-list__title,.without-sidebar .is-landing-page h3.hy-link-list__title{font-size:2.125rem;line-height:40px;letter-spacing:-0.68px}}@media (min-width: 1601px){.with-sidebar .is-front-page h3.hy-link-list__title,.with-sidebar .is-landing-page h3.hy-link-list__title{font-size:2.125rem;line-height:40px;letter-spacing:-0.68px}}.hy-two-columns h3.hy-link-list__title{font-size:1.125rem;line-height:22px;letter-spacing:-0.45px;margin-bottom:16px;text-transform:none}@media (min-width: 75.0625rem){.without-sidebar .hy-two-columns h3.hy-link-list__title{font-size:1.25rem;line-height:24px;letter-spacing:-0.5px}}@media (min-width: 1601px){.with-sidebar .hy-two-columns h3.hy-link-list__title{font-size:1.25rem;line-height:24px;letter-spacing:-0.5px}}";const s=class{constructor(t){i(this,t);this.headerstyle="default";this.dataItems=undefined;this.listHeading="";this.variation=undefined;this.headingVariant="h2"}async componentWillLoad(){this._dataItems=await n(this.dataItems)}componentDidLoad(){let i=this.el.closest(".hy-main");if(i){if(!i.classList.contains("with-sidebar")){this.headerstyle="large"}}}render(){const i=l.linkList;const e=this.headingVariant.toLowerCase();let n="col-3";if(this._dataItems.length===7||this._dataItems.length%4===0){n="col-4"}return[t("section",{class:`hy-link-list hy-link-list__${this.headerstyle}`},this.listHeading.length>0&&t(e,{class:"hy-link-list__title"},this.listHeading),t("ul",{class:`hy-link-list__links hy-link-list__links--${this.variation} ${this.variation==="grid"?n:""}`},this._dataItems.map((({heading:e,ariaLabel:l,url:n,isExternal:a})=>t("li",{class:"hy-link-list__links-item"},t("hy-cta-link",{variant:i,"link-content":e,"sc-label":l,url:n,"is-external":a}))))))]}get el(){return e(this)}};s.style=a;export{s as hy_link_list};
|
|
2
2
|
//# sourceMappingURL=hy-link-list.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as a,h as
|
|
1
|
+
import{r as a,h as e,H as i}from"./index-f84f2a7d.js";import{i as r}from"./utils-2819fd7e.js";const t=':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-link{color:var(--brand-main);font-family:var(--main-font-family);font-weight:600;font-size:14px;letter-spacing:-0.47px;margin:theme("spacing.8");line-height:16px;text-decoration:none}.hy-link.within-paragraph{color:var(--brand-main);font-family:var(--main-font-family);font-weight:400;font-size:14px;line-height:20px;text-decoration:underline}';const n=class{constructor(e){a(this,e);this.variant=r.default;this.linkContent="";this.url=undefined;this.scLabel=undefined;this.isExternal=false}render(){const a=["hy-link",this.variant];const r=this.isExternal?"_blank":"_self";return e(i,null,e("a",{"aria-label":this.scLabel,class:a.join(" "),href:this.url,target:r},this.linkContent))}};n.style=t;export{n as hy_link};
|
|
2
2
|
//# sourceMappingURL=hy-link.entry.js.map
|