@itcenteratunihelsinki/huds-lib 0.8.71 → 0.8.73

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

@@ -1 +1 @@
-{"version":3,"names":["hyHeroCss","timeout","delay","HyHero","HeroTypeVariant","landing","HeroGroupTypeVariant","default","HeroColorVariant","blue","HeroSizeVariant","large","async","this","_sourceSet","jsonParserWorker","sourceSet","handleHeroImageObjectFitValue","heroSizeVariant","heroElement","heroContentContainerElement","getElementsByClassName","offsetHeight","classList","add","remove","createImageElement","props","srcSet","aspectRatio","h","class","style","image","map","item","src","media","type","sizes","loading","disableLazy","alt","imageAltText","height","imageHeight","width","imageWidth","setAspectRatio","aspectRatioWidth","aspectRatioHeight","aspect","render","variant","CtaLinkButtonVariants","heroWhite","colorVariantValue","colorVariant","heroTypeValue","heroType","white","heroBlue","black","heroBlack","hyHeroClasses","heroGroupType","sizeVariant","hasShortcuts","heroTitleClasses","join","window","onload","document","addEventListener","clearTimeout","setTimeout","Host","innerHTML","heading","description","url","urlTitle","scLabel","isExternal","mb","linkTarget","heroTextColor","subtitle","href","target","icon","size"],"sources":["./src/components/hy-hero/hy-hero.scss?tag=hy-hero","./src/components/hy-hero/hy-hero.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-hero {\n  position: relative;\n  padding-bottom: 0;\n\n  &:not(.hy-hero--full-image) {\n    @include breakpoint($wide) {\n      margin-top: 32px;\n    }\n  }\n\n  &:not(.has-shortcuts) {\n    @include breakpoint($wide) {\n      margin-bottom: 32px;\n    }\n  }\n\n  .without-sidebar & {\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"],"mappings":"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"}
+{"version":3,"names":["hyHeroCss","HyHero","HeroTypeVariant","landing","HeroGroupTypeVariant","default","HeroColorVariant","blue","HeroSizeVariant","large","async","this","_sourceSet","jsonParserWorker","sourceSet","createImageElement","props","srcSet","aspectRatio","h","class","style","image","map","item","src","media","type","sizes","loading","disableLazy","alt","imageAltText","height","imageHeight","width","imageWidth","render","variant","CtaLinkButtonVariants","heroWhite","colorVariantValue","colorVariant","heroTypeValue","heroType","white","heroBlue","black","heroBlack","hyHeroClasses","heroGroupType","sizeVariant","hasShortcuts","heroTitleClasses","join","Host","innerHTML","heading","description","url","urlTitle","scLabel","isExternal","mb","linkTarget","heroTextColor","subtitle","href","target","icon","size"],"sources":["./src/components/hy-hero/hy-hero.scss?tag=hy-hero","./src/components/hy-hero/hy-hero.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-hero {\n  position: relative;\n  padding-bottom: 0;\n\n  &:not(.hy-hero--full-image) {\n    @include breakpoint($wide) {\n      margin-top: 32px;\n    }\n  }\n\n  &:not(.has-shortcuts) {\n    @include breakpoint($wide) {\n      margin-bottom: 32px;\n    }\n  }\n\n  .without-sidebar & {\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"],"mappings":"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"}

package/dist/types/components/hy-hero/hy-hero.d.ts

@@ -28,10 +28,6 @@ export declare class HyHero {
   private _sourceSet;
   sourceSet: ImageSrcSet[] | string;
   componentWillLoad(): Promise<void>;
-  handleHeroImageObjectFitValue(heroSizeVariant: any, heroElement: any): void;
   createImageElement(props: any, srcSet: any, aspectRatio: any): any;
-  setAspectRatio(aspectRatioWidth?: number, aspectRatioHeight?: number): {
-    "--aspectRatio": "aspectRatio";
-  };
   render(): any;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcenteratunihelsinki/huds-lib",
-  "version": "0.8.71",
+  "version": "0.8.73",
   "description": "Helsinki University Design System library",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -68,5 +68,5 @@
       "pre-commit": "pretty-quick --staged"
     }
   },
-  "gitHead": "f9ad9b15fc0ece1b0806cae766d592ac793e9168"
+  "gitHead": "2dfd04a237c480a5956e8e558c41a3e5aec914d5"
 }