@itcenteratunihelsinki/huds-lib 0.8.72 → 0.8.73

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/components/hy-hero.js +8 -48
  2. package/components/hy-hero.js.map +1 -1
  3. package/dist/cjs/hy-hero.cjs.entry.js +8 -48
  4. package/dist/cjs/hy-hero.cjs.entry.js.map +1 -1
  5. package/dist/collection/components/hy-hero/hy-hero.css +17 -1
  6. package/dist/collection/components/hy-hero/hy-hero.js +7 -47
  7. package/dist/collection/components/hy-hero/hy-hero.js.map +1 -1
  8. package/dist/esm/hy-hero.entry.js +8 -48
  9. package/dist/esm/hy-hero.entry.js.map +1 -1
  10. package/dist/fonts/fonts.css +12 -10
  11. package/dist/huds-lib/hy-hero.entry.js +1 -1
  12. package/dist/huds-lib/hy-hero.entry.js.map +1 -1
  13. package/dist/types/components/hy-hero/hy-hero.d.ts +0 -4
  14. package/package.json +2 -2
package/dist/cjs/hy-hero.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"hy-hero.entry.cjs.js","mappings":"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","names":["HeroTypeVariant","HeroGroupTypeVariant","HeroColorVariant","HeroSizeVariant","jsonParserWorker","h","CtaLinkButtonVariants","Host"],"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 & {\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 .without-sidebar & {\n @include breakpoint($extrawide) {\n max-width: none;\n margin-left: -2rem;\n margin-right: -2rem;\n }\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"],"version":3}
1
+ {"file":"hy-hero.entry.cjs.js","mappings":"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","names":["HeroTypeVariant","HeroGroupTypeVariant","HeroColorVariant","HeroSizeVariant","jsonParserWorker","h","CtaLinkButtonVariants","Host"],"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 & {\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 /**\n * Full image variation\n **/\n &--full-image {\n --dark-bg: rgba(0, 0, 0, 0.55);\n --light-bg: rgba(255, 255, 255, 0.5);\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 .without-sidebar & {\n @include breakpoint($extrawide) {\n max-width: none;\n margin-left: -2rem;\n margin-right: -2rem;\n }\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 &[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 {\n fill: var(--light-text);\n }\n }\n &[data-text-color=\"light_text_dark_bg\"] {\n background: var(--light-bg);\n color: var(--dark-text);\n svg {\n fill: var(--dark-text);\n }\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 {\n fill: var(--light-text);\n }\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 {\n fill: var(--dark-text);\n }\n }\n }\n }\n\n .hy-image__image {\n object-fit: cover;\n }\n }\n\n /**\n * White variation\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 aspect-ratio: var(--aspect-ratio);\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/**\n* Research group and generic with minor landing\n**/\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/**\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 min-height: clamp(330px, 50%, 675px);\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}\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 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 srcSet={item.src} media={item.media} type={item.type} sizes={item.sizes ? item.sizes : \"\"} />\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 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 this.hasShortcuts ? \"has-shortcuts\" : \"\",\n ];\n\n const heroTitleClasses = [\"hy-hero__title\", \"hy-heading__hero\"].join(\" \");\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, {\"--aspect-ratio\": \"16 / 10\"})}\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, {\"--aspect-ratio\": \"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\n class=\"hy-hero__link\"\n href={this.url}\n aria-label={this.scLabel}\n target={linkTarget}\n data-text-color={this.heroTextColor}\n >\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, {\"--aspect-ratio\": \"16 / 10\"})}\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"],"version":3}
package/dist/collection/components/hy-hero/hy-hero.css CHANGED
@@ -64,6 +64,12 @@
64
64
  .hy-hero {
65
65
  position: relative;
66
66
  padding-bottom: 0;
67
+ /**
68
+ * Full image variation
69
+ **/
70
+ /**
71
+ * White variation
72
+ **/
67
73
  }
68
74
 
69
75
  @media (min-width: 60rem) {
@@ -105,7 +111,7 @@
105
111
 
106
112
  .hy-hero--full-image {
107
113
  --dark-bg: rgba(0, 0, 0, 0.55);
108
- --light-bg: rgba(255, 255, 255, 0.50);
114
+ --light-bg: rgba(255, 255, 255, 0.5);
109
115
  --dark-text: var(--brand-main-nearly-black);
110
116
  --light-text: var(--grayscale-white);
111
117
  border-bottom: 1px solid var(--grayscale-medium-dark);
@@ -612,6 +618,7 @@ h2.hy-hero__title.hy-heading__hero {
612
618
  }
613
619
 
614
620
  .hy-image__image {
621
+ aspect-ratio: var(--aspect-ratio);
615
622
  display: block;
616
623
  height: 100%;
617
624
  min-height: 205px;
@@ -625,6 +632,10 @@ h2.hy-hero__title.hy-heading__hero {
625
632
  object-fit: cover;
626
633
  }
627
634
 
635
+ /**
636
+ * Research group and generic with minor landing
637
+ **/
638
+
628
639
  .hy-hero.hy-hero--group_landing.hy-hero--generic_site_group h2.hy-hero__title.hy-heading__hero,
629
640
  .hy-hero.hy-hero--research_group h2.hy-hero__title.hy-heading__hero {
630
641
  font-size: 2rem;
@@ -655,6 +666,10 @@ h2.hy-hero__title.hy-heading__hero {
655
666
  }
656
667
  }
657
668
 
669
+ /**
670
+ * FRONTPAGE VARIATION
671
+ **/
672
+
658
673
  @media (min-width: 60rem) {
659
674
  .hy-hero.hy-hero--front_page.hy-hero--white {
660
675
  padding-top: 40px;
@@ -714,6 +729,7 @@ h2.hy-hero__title.hy-heading__hero {
714
729
  padding: 24px 1rem 40px;
715
730
  margin: 0 auto;
716
731
  width: 100%;
732
+ min-height: clamp(330px, 50%, 675px);
717
733
  }
718
734
 
719
735
  .hy-hero--black .hy-hero.hy-hero--front_page .hy-hero__content-container {
package/dist/collection/components/hy-hero/hy-hero.js CHANGED
@@ -1,5 +1,3 @@
1
- let timeout = null;
2
- let delay = 250;
3
1
  import { h, Host } from "@stencil/core";
4
2
  import { jsonParserWorker } from "../../global/globalScript";
5
3
  import { CtaLinkButtonVariants, HeroColorVariant, HeroSizeVariant, HeroGroupTypeVariant, HeroTypeVariant, } from "../../utils/utils";
@@ -28,43 +26,14 @@ export class HyHero {
28
26
  async componentWillLoad() {
29
27
  this._sourceSet = await jsonParserWorker(this.sourceSet);
30
28
  }
31
- // TODO: Refactor, find way to get rid of this.
32
- handleHeroImageObjectFitValue(heroSizeVariant, heroElement) {
33
- const heroContentContainerElement = heroElement.getElementsByClassName("hy-hero__content-container")[0];
34
- if (heroSizeVariant === "small") {
35
- if (heroContentContainerElement.offsetHeight >= 300) {
36
- heroElement.classList.add("has-cover");
37
- }
38
- else {
39
- heroElement.classList.remove("has-cover");
40
- }
41
- }
42
- if (heroSizeVariant === "large") {
43
- if (heroContentContainerElement.offsetHeight >= 344) {
44
- heroElement.classList.add("has-cover");
45
- }
46
- else {
47
- heroElement.classList.remove("has-cover");
48
- }
49
- }
50
- }
51
29
  createImageElement(props, srcSet, aspectRatio) {
52
30
  return (h("div", { class: `hy-hero__image-container`, style: aspectRatio }, props.image &&
53
31
  (srcSet ? (h("picture", null, srcSet.map((item) => (h("source", { srcSet: item.src, media: item.media, type: item.type, sizes: item.sizes ? item.sizes : "" }))), h("img", { loading: props.disableLazy ? "eager" : "lazy", alt: props.imageAltText, class: `hy-image__image`, src: props.image, height: props.imageHeight, width: props.imageWidth }))) : (h("img", { loading: props.disableLazy ? "eager" : "lazy", alt: props.imageAltText, class: `hy-image__image`, src: props.image, height: props.imageHeight, width: props.imageWidth })))));
54
32
  }
55
- // TODO: Refactor, is this still even used?
56
- setAspectRatio(aspectRatioWidth = 16, aspectRatioHeight = 10) {
57
- const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;
58
- return {
59
- "--aspectRatio": `${aspect}%`,
60
- //"aspect-ratio": `${aspectRatioWidth} / ${aspectRatioHeight}` as "aspectRatio",
61
- };
62
- }
63
33
  render() {
64
34
  let variant = CtaLinkButtonVariants.heroWhite;
65
35
  let colorVariantValue = this.colorVariant;
66
36
  let heroTypeValue = this.heroType;
67
- //TODO: Refactor
68
37
  if (this.heroType === "minor_landing") {
69
38
  colorVariantValue = HeroColorVariant.white;
70
39
  heroTypeValue = HeroTypeVariant.landing;
@@ -84,26 +53,17 @@ export class HyHero {
84
53
  `hy-hero--${this.heroGroupType}`,
85
54
  `hy-hero--${colorVariantValue}`,
86
55
  `hy-hero--${this.sizeVariant}`,
87
- this.hasShortcuts ? 'has-shortcuts' : '',
56
+ this.hasShortcuts ? "has-shortcuts" : "",
88
57
  ];
89
58
  const heroTitleClasses = ["hy-hero__title", "hy-heading__hero"].join(" ");
90
- // TODO: Refactor, find way to get rid of this.
91
- window.onload = () => {
92
- const heroElement = document.getElementsByClassName("hy-hero")[0];
93
- this.handleHeroImageObjectFitValue(this.sizeVariant, heroElement);
94
- window.addEventListener("resize", () => {
95
- clearTimeout(timeout);
96
- timeout = setTimeout(() => this.handleHeroImageObjectFitValue(this.sizeVariant, heroElement), delay);
97
- });
98
- };
99
- if (heroTypeValue === "front_page" && this.sizeVariant !== 'full-image') {
100
- return (h(Host, null, h("div", { class: hyHeroClasses.join(" ") }, h("div", { class: `hy-hero__container` }, this.createImageElement(this, this._sourceSet, this.setAspectRatio()), 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: heroTitleClasses })), 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: variant }))))))), h("hy-box", { mb: "2, 2, 1, 1" })));
59
+ if (heroTypeValue === "front_page" && this.sizeVariant !== "full-image") {
60
+ return (h(Host, null, h("div", { class: hyHeroClasses.join(" ") }, h("div", { class: `hy-hero__container` }, this.createImageElement(this, this._sourceSet, { "--aspect-ratio": "16 / 10" }), 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: heroTitleClasses })), 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: variant }))))))), h("hy-box", { mb: "2, 2, 1, 1" })));
101
61
  }
102
- if (this.sizeVariant === 'full-image') {
103
- const linkTarget = this.isExternal ? '_blank' : '_self';
104
- return (h("div", { class: `hy-hero hy-hero--full-image` }, h("div", { class: `hy-hero__container` }, this.createImageElement(this, this._sourceSet, this.setAspectRatio(16, 8)), h("div", { class: `hy-hero__content-container` }, h("div", { class: `hy-hero__content`, "data-text-color": this.heroTextColor }, this.subtitle && h("span", { class: `hy-hero__subtitle` }, this.subtitle), h("h2", { innerHTML: this.heading, class: heroTitleClasses }), this.description && h("p", { class: `hy-hero__description` }, this.description), this.url && (h("div", { class: `hy-hero__actions` }, h("a", { class: "hy-hero__link", href: this.url, "aria-label": this.scLabel, target: linkTarget, "data-text-color": this.heroTextColor }, this.urlTitle, h("hy-icon", { icon: "hy-icon-arrow-right", size: 16 })))))))));
62
+ if (this.sizeVariant === "full-image") {
63
+ const linkTarget = this.isExternal ? "_blank" : "_self";
64
+ return (h("div", { class: `hy-hero hy-hero--full-image` }, h("div", { class: `hy-hero__container` }, this.createImageElement(this, this._sourceSet, { "--aspect-ratio": "16 / 8" }), h("div", { class: `hy-hero__content-container` }, h("div", { class: `hy-hero__content`, "data-text-color": this.heroTextColor }, this.subtitle && h("span", { class: `hy-hero__subtitle` }, this.subtitle), h("h2", { innerHTML: this.heading, class: heroTitleClasses }), this.description && h("p", { class: `hy-hero__description` }, this.description), this.url && (h("div", { class: `hy-hero__actions` }, h("a", { class: "hy-hero__link", href: this.url, "aria-label": this.scLabel, target: linkTarget, "data-text-color": this.heroTextColor }, this.urlTitle, h("hy-icon", { icon: "hy-icon-arrow-right", size: 16 })))))))));
105
65
  }
106
- return (h(Host, null, h("div", { class: hyHeroClasses.join(" ") }, h("div", { class: `hy-hero__container` }, this.createImageElement(this, this._sourceSet, this.setAspectRatio()), 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: heroTitleClasses })), 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: variant }))))))), h("hy-box", { mb: "2, 2, 1, 1" })));
66
+ return (h(Host, null, h("div", { class: hyHeroClasses.join(" ") }, h("div", { class: `hy-hero__container` }, this.createImageElement(this, this._sourceSet, { "--aspect-ratio": "16 / 10" }), 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: heroTitleClasses })), 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: variant }))))))), h("hy-box", { mb: "2, 2, 1, 1" })));
107
67
  }
108
68
  static get is() { return "hy-hero"; }
109
69
  static get originalStyleUrls() {
package/dist/collection/components/hy-hero/hy-hero.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"hy-hero.js","sourceRoot":"","sources":["../../../src/components/hy-hero/hy-hero.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
1
+ {"version":3,"file":"hy-hero.js","sourceRoot":"","sources":["../../../src/components/hy-hero/hy-hero.tsx"],"names":[],"mappings":"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","sourcesContent":["export interface ImageSrcSet {\n src: any;\n media: string;\n type: string;\n sizes: string | null;\n}\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 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 srcSet={item.src} media={item.media} type={item.type} sizes={item.sizes ? item.sizes : \"\"} />\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 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 this.hasShortcuts ? \"has-shortcuts\" : \"\",\n ];\n\n const heroTitleClasses = [\"hy-hero__title\", \"hy-heading__hero\"].join(\" \");\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, {\"--aspect-ratio\": \"16 / 10\"})}\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, {\"--aspect-ratio\": \"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\n class=\"hy-hero__link\"\n href={this.url}\n aria-label={this.scLabel}\n target={linkTarget}\n data-text-color={this.heroTextColor}\n >\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, {\"--aspect-ratio\": \"16 / 10\"})}\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"]}
package/dist/esm/hy-hero.entry.js CHANGED
@@ -2,10 +2,8 @@ import { r as registerInstance, h, H as Host, g as getElement } from './index-f8
2
2
  import { j as jsonParserWorker } from './globalScript-5a4b7abf.js';
3
3
  import { H as HeroTypeVariant, a as HeroGroupTypeVariant, b as HeroColorVariant, c as HeroSizeVariant, d as CtaLinkButtonVariants } from './utils-2819fd7e.js';
4
4
 
5
- const hyHeroCss = ":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){.without-sidebar .hy-hero{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}}@media (min-width: 75.0625rem){.without-sidebar .hy-hero--full-image{max-width:none;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)}";
5
+ const hyHeroCss = ":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){.without-sidebar .hy-hero{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.5);--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}}@media (min-width: 75.0625rem){.without-sidebar .hy-hero--full-image{max-width:none;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{aspect-ratio:var(--aspect-ratio);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%;min-height:clamp(330px, 50%, 675px)}.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)}";
6
6
 
7
- let timeout = null;
8
- let delay = 250;
9
7
  const HyHero = class {
10
8
  constructor(hostRef) {
11
9
  registerInstance(this, hostRef);
@@ -32,43 +30,14 @@ const HyHero = class {
32
30
  async componentWillLoad() {
33
31
  this._sourceSet = await jsonParserWorker(this.sourceSet);
34
32
  }
35
- // TODO: Refactor, find way to get rid of this.
36
- handleHeroImageObjectFitValue(heroSizeVariant, heroElement) {
37
- const heroContentContainerElement = heroElement.getElementsByClassName("hy-hero__content-container")[0];
38
- if (heroSizeVariant === "small") {
39
- if (heroContentContainerElement.offsetHeight >= 300) {
40
- heroElement.classList.add("has-cover");
41
- }
42
- else {
43
- heroElement.classList.remove("has-cover");
44
- }
45
- }
46
- if (heroSizeVariant === "large") {
47
- if (heroContentContainerElement.offsetHeight >= 344) {
48
- heroElement.classList.add("has-cover");
49
- }
50
- else {
51
- heroElement.classList.remove("has-cover");
52
- }
53
- }
54
- }
55
33
  createImageElement(props, srcSet, aspectRatio) {
56
34
  return (h("div", { class: `hy-hero__image-container`, style: aspectRatio }, props.image &&
57
35
  (srcSet ? (h("picture", null, srcSet.map((item) => (h("source", { srcSet: item.src, media: item.media, type: item.type, sizes: item.sizes ? item.sizes : "" }))), h("img", { loading: props.disableLazy ? "eager" : "lazy", alt: props.imageAltText, class: `hy-image__image`, src: props.image, height: props.imageHeight, width: props.imageWidth }))) : (h("img", { loading: props.disableLazy ? "eager" : "lazy", alt: props.imageAltText, class: `hy-image__image`, src: props.image, height: props.imageHeight, width: props.imageWidth })))));
58
36
  }
59
- // TODO: Refactor, is this still even used?
60
- setAspectRatio(aspectRatioWidth = 16, aspectRatioHeight = 10) {
61
- const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;
62
- return {
63
- "--aspectRatio": `${aspect}%`,
64
- //"aspect-ratio": `${aspectRatioWidth} / ${aspectRatioHeight}` as "aspectRatio",
65
- };
66
- }
67
37
  render() {
68
38
  let variant = CtaLinkButtonVariants.heroWhite;
69
39
  let colorVariantValue = this.colorVariant;
70
40
  let heroTypeValue = this.heroType;
71
- //TODO: Refactor
72
41
  if (this.heroType === "minor_landing") {
73
42
  colorVariantValue = HeroColorVariant.white;
74
43
  heroTypeValue = HeroTypeVariant.landing;
@@ -88,26 +57,17 @@ const HyHero = class {
88
57
  `hy-hero--${this.heroGroupType}`,
89
58
  `hy-hero--${colorVariantValue}`,
90
59
  `hy-hero--${this.sizeVariant}`,
91
- this.hasShortcuts ? 'has-shortcuts' : '',
60
+ this.hasShortcuts ? "has-shortcuts" : "",
92
61
  ];
93
62
  const heroTitleClasses = ["hy-hero__title", "hy-heading__hero"].join(" ");
94
- // TODO: Refactor, find way to get rid of this.
95
- window.onload = () => {
96
- const heroElement = document.getElementsByClassName("hy-hero")[0];
97
- this.handleHeroImageObjectFitValue(this.sizeVariant, heroElement);
98
- window.addEventListener("resize", () => {
99
- clearTimeout(timeout);
100
- timeout = setTimeout(() => this.handleHeroImageObjectFitValue(this.sizeVariant, heroElement), delay);
101
- });
102
- };
103
- if (heroTypeValue === "front_page" && this.sizeVariant !== 'full-image') {
104
- return (h(Host, null, h("div", { class: hyHeroClasses.join(" ") }, h("div", { class: `hy-hero__container` }, this.createImageElement(this, this._sourceSet, this.setAspectRatio()), 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: heroTitleClasses })), 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: variant }))))))), h("hy-box", { mb: "2, 2, 1, 1" })));
63
+ if (heroTypeValue === "front_page" && this.sizeVariant !== "full-image") {
64
+ return (h(Host, null, h("div", { class: hyHeroClasses.join(" ") }, h("div", { class: `hy-hero__container` }, this.createImageElement(this, this._sourceSet, { "--aspect-ratio": "16 / 10" }), 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: heroTitleClasses })), 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: variant }))))))), h("hy-box", { mb: "2, 2, 1, 1" })));
105
65
  }
106
- if (this.sizeVariant === 'full-image') {
107
- const linkTarget = this.isExternal ? '_blank' : '_self';
108
- return (h("div", { class: `hy-hero hy-hero--full-image` }, h("div", { class: `hy-hero__container` }, this.createImageElement(this, this._sourceSet, this.setAspectRatio(16, 8)), h("div", { class: `hy-hero__content-container` }, h("div", { class: `hy-hero__content`, "data-text-color": this.heroTextColor }, this.subtitle && h("span", { class: `hy-hero__subtitle` }, this.subtitle), h("h2", { innerHTML: this.heading, class: heroTitleClasses }), this.description && h("p", { class: `hy-hero__description` }, this.description), this.url && (h("div", { class: `hy-hero__actions` }, h("a", { class: "hy-hero__link", href: this.url, "aria-label": this.scLabel, target: linkTarget, "data-text-color": this.heroTextColor }, this.urlTitle, h("hy-icon", { icon: "hy-icon-arrow-right", size: 16 })))))))));
66
+ if (this.sizeVariant === "full-image") {
67
+ const linkTarget = this.isExternal ? "_blank" : "_self";
68
+ return (h("div", { class: `hy-hero hy-hero--full-image` }, h("div", { class: `hy-hero__container` }, this.createImageElement(this, this._sourceSet, { "--aspect-ratio": "16 / 8" }), h("div", { class: `hy-hero__content-container` }, h("div", { class: `hy-hero__content`, "data-text-color": this.heroTextColor }, this.subtitle && h("span", { class: `hy-hero__subtitle` }, this.subtitle), h("h2", { innerHTML: this.heading, class: heroTitleClasses }), this.description && h("p", { class: `hy-hero__description` }, this.description), this.url && (h("div", { class: `hy-hero__actions` }, h("a", { class: "hy-hero__link", href: this.url, "aria-label": this.scLabel, target: linkTarget, "data-text-color": this.heroTextColor }, this.urlTitle, h("hy-icon", { icon: "hy-icon-arrow-right", size: 16 })))))))));
109
69
  }
110
- return (h(Host, null, h("div", { class: hyHeroClasses.join(" ") }, h("div", { class: `hy-hero__container` }, this.createImageElement(this, this._sourceSet, this.setAspectRatio()), 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: heroTitleClasses })), 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: variant }))))))), h("hy-box", { mb: "2, 2, 1, 1" })));
70
+ return (h(Host, null, h("div", { class: hyHeroClasses.join(" ") }, h("div", { class: `hy-hero__container` }, this.createImageElement(this, this._sourceSet, { "--aspect-ratio": "16 / 10" }), 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: heroTitleClasses })), 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: variant }))))))), h("hy-box", { mb: "2, 2, 1, 1" })));
111
71
  }
112
72
  get el() { return getElement(this); }
113
73
  };