@itcenteratunihelsinki/huds-lib 0.8.71 → 0.8.73

package/components/hy-content-list.js

@@ -51,39 +51,34 @@ const HyContentList$1 = /*@__PURE__*/ proxyCustomElement(class HyContentList ext
         const courseObject = JSON.parse(JSON.stringify(item));
         const courseListType = courseObject["courseListType"];
         this.variant = courseListType == "list" ? CourseVariants.row : CourseVariants.grid;
-        for (const courseProperty in courseObject) {
-          if (courseProperty == "courseListType")
-            continue;
-          const courseItem = courseObject[courseProperty];
-          const courseCode = courseItem["code"];
-          const courseCredits = courseItem["credits"];
-          // Course realisations.
-          if (courseItem["realisations"]) {
-            const realisations = JSON.parse(JSON.stringify(courseItem["realisations"]));
-            for (const realisationProperty in realisations) {
-              const realizationItem = realisations[realisationProperty];
-              const courseRealisationName = realizationItem["name"];
-              const courseRealisationFullName = courseRealisationName + ", " + courseCredits + " " + this.creditsLabel;
-              const courseStudyFormat = realizationItem["studyFormat"];
-              const courseCancelled = realizationItem["cancelled"];
-              const courseStartDate = realizationItem["startDate"];
-              const courseEndDate = realizationItem["endDate"];
-              const formattedTimeRange = realizationItem["formattedTimeRange"];
-              const courseEnrollmentLink = realizationItem["enrolmentLink"];
-              const courseTeachingLanguage = realizationItem["teachingLanguage"];
-              const courseOrganisation = realizationItem["organisation"];
-              let courseTags = [];
-              if (realizationItem["tags"]) {
-                let tags = JSON.parse(JSON.stringify(realizationItem["tags"]));
-                for (let z in tags) {
-                  let tagItem = { name: tags[z] };
-                  courseTags.push(tagItem);
-                }
+        const courseCode = courseObject["code"];
+        const courseCredits = courseObject["credits"];
+        // Course realisations.
+        if (courseObject["realisations"]) {
+          const realisations = JSON.parse(JSON.stringify(courseObject["realisations"]));
+          for (const realisationProperty in realisations) {
+            const realizationItem = realisations[realisationProperty];
+            const courseRealisationName = realizationItem["name"];
+            const courseRealisationFullName = courseRealisationName + ", " + courseCredits + " " + this.creditsLabel;
+            const courseStudyFormat = realizationItem["studyFormat"];
+            const courseCancelled = realizationItem["cancelled"];
+            const courseStartDate = realizationItem["startDate"];
+            const courseEndDate = realizationItem["endDate"];
+            const formattedTimeRange = realizationItem["formattedTimeRange"];
+            const courseEnrollmentLink = realizationItem["enrolmentLink"];
+            const courseTeachingLanguage = realizationItem["teachingLanguage"];
+            const courseOrganisation = realizationItem["organisation"];
+            let courseTags = [];
+            if (realizationItem["tags"]) {
+              let tags = JSON.parse(JSON.stringify(realizationItem["tags"]));
+              for (let z in tags) {
+                let tagItem = { name: tags[z] };
+                courseTags.push(tagItem);
               }
-              const courseTagsJSON = JSON.stringify(courseTags);
-              const contentListItemClassAttributes = ["item", this.variant].join(" ");
-              courseRealisations.push(h("hy-content-list-item", { id: realisationProperty, class: contentListItemClassAttributes, variant: this.variant, "state-variant": this.courseStateVariant, "course-code": courseCode, "course-name": courseRealisationFullName, "is-cancelled": courseCancelled, "cancelled-label": this.cancelledLabel, "course-credits": courseCredits, "course-tags": courseTagsJSON, "course-start-date": courseStartDate, "course-end-date": courseEndDate, "formatted-time-range": formattedTimeRange, "course-study-format": courseStudyFormat, "course-organisation": courseOrganisation, "course-enrollment-link": courseEnrollmentLink, "course-teaching-language": courseTeachingLanguage, "course-link-label": this.linkLabel, "data-location": courseEnrollmentLink, onClick: (e) => this.handleCardClick(e, realisationProperty) }));
             }
+            const courseTagsJSON = JSON.stringify(courseTags);
+            const contentListItemClassAttributes = ["item", this.variant].join(" ");
+            courseRealisations.push(h("hy-content-list-item", { id: realisationProperty, class: contentListItemClassAttributes, variant: this.variant, "state-variant": this.courseStateVariant, "course-code": courseCode, "course-name": courseRealisationFullName, "is-cancelled": courseCancelled, "cancelled-label": this.cancelledLabel, "course-credits": courseCredits, "course-tags": courseTagsJSON, "course-start-date": courseStartDate, "course-end-date": courseEndDate, "formatted-time-range": formattedTimeRange, "course-study-format": courseStudyFormat, "course-organisation": courseOrganisation, "course-enrollment-link": courseEnrollmentLink, "course-teaching-language": courseTeachingLanguage, "course-link-label": this.linkLabel, "data-location": courseEnrollmentLink, onClick: (e) => this.handleCardClick(e, realisationProperty) }));
           }
         }
       });

package/components/hy-content-list.js.map

@@ -1 +1 @@
-{"file":"hy-content-list.js","mappings":"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","names":["HyContentList"],"sources":["./src/components/hy-content-lists/hy-content-list/hy-content-list.scss?tag=hy-content-list","./src/components/hy-content-lists/hy-content-list/hy-content-list.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-content-list {\n  display: flex;\n  font-family: var(--main-font-family);\n  flex-wrap: wrap;\n\n  &--no-result {\n    align-items: center;\n    display: flex;\n  }\n  &--alert {\n    margin-right: 6px;\n    svg {\n      fill: var(--grayscale-dark);\n    }\n    @include breakpoint($xlarge) {\n      svg {\n        height: 18px;\n        width: 18px;\n      }\n    }\n    &--large {\n      @include breakpoint($overwide) {\n        svg {\n          height: 18px;\n          width: 18px;\n        }\n      }\n    }\n  }\n\n  &--alert-label {\n    font-family: var(--main-font-family);\n    @include font-size(15px, 22px);\n    color: var(--grayscale-dark);\n    font-style: italic;\n    letter-spacing: 0;\n\n    @include breakpoint($narrow) {\n      @include font-size(16px, 24px);\n    }\n    @include breakpoint($xlarge) {\n      @include font-size(17px, 26px);\n    }\n    &--large {\n      @include breakpoint($overwide) {\n        @include font-size(17px, 26px);\n      }\n    }\n  }\n}\n\n.hy-content-list.row {\n  flex-direction: column;\n}\n\n.hy-content-list.grid {\n  flex-direction: row;\n}\n","import {CourseStateVariants, CourseVariants} from \"../../../utils/utils\";\nimport {Component, ComponentInterface, Element, h, Host, Prop, State, Watch} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-content-list\",\n  styleUrl: \"hy-content-list.scss\",\n  shadow: false,\n})\nexport class HyContentList implements ComponentInterface {\n  @Prop() linkLabel: string = \"Go to course page\";\n  @Prop() noResultLabel: string = \"No courses scheduled at the moment\";\n  @Prop() creditsLabel: string = \"cr\";\n  @Prop() cancelledLabel: string = \"Cancelled\";\n  @Prop() dataItems: string;\n  @Prop() headerstyle: string = \"common\";\n  @Prop() courseStateVariant: CourseStateVariants = CourseStateVariants.default;\n  private _dataItems: [];\n  private variant: CourseVariants = CourseVariants.default;\n  @State() courseRealisations: Array<object> = [];\n  @Element() el: HTMLElement;\n  /**\n   * Data for links to be displayed.\n   */\n\n  @Watch(\"dataItems\") dataWatcher(data: [] | string) {\n    this._dataItems = typeof data === \"string\" ? JSON.parse(data) : data;\n  }\n\n  componentWillLoad() {\n    this.dataWatcher(this.dataItems);\n  }\n\n  handleCardClick(e, id) {\n    e.preventDefault();\n    let card = this.el.querySelector(`#${id}`) as HTMLElement;\n\n    if (card) {\n      window.open(card.dataset.location, \"_blank\");\n    }\n  }\n\n  async componentDidLoad() {\n    let hyMainDiv = this.el.closest(\".hy-main\");\n    if (hyMainDiv) {\n      if (!hyMainDiv.classList.contains(\"with-sidebar\")) {\n        this.headerstyle = \"large\";\n      }\n    }\n  }\n\n  renderItems() {\n    let courseRealisations = [];\n    if (this._dataItems && this._dataItems.length > 0) {\n      this._dataItems.forEach((item) => {\n        const courseObject = JSON.parse(JSON.stringify(item));\n\n        const courseListType = courseObject[\"courseListType\"];\n        this.variant = courseListType == \"list\" ? CourseVariants.row : CourseVariants.grid;\n\n        for (const courseProperty in courseObject) {\n          if (courseProperty == \"courseListType\") continue;\n\n          const courseItem = courseObject[courseProperty];\n          const courseCode = courseItem[\"code\"];\n          const courseCredits = courseItem[\"credits\"];\n\n          // Course realisations.\n          if (courseItem[\"realisations\"]) {\n            const realisations = JSON.parse(JSON.stringify(courseItem[\"realisations\"]));\n            for (const realisationProperty in realisations) {\n              const realizationItem = realisations[realisationProperty];\n              const courseRealisationName = realizationItem[\"name\"];\n              const courseRealisationFullName = courseRealisationName + \", \" + courseCredits + \" \" + this.creditsLabel;\n              const courseStudyFormat = realizationItem[\"studyFormat\"];\n              const courseCancelled = realizationItem[\"cancelled\"];\n              const courseStartDate = realizationItem[\"startDate\"];\n              const courseEndDate = realizationItem[\"endDate\"];\n              const formattedTimeRange = realizationItem[\"formattedTimeRange\"];\n              const courseEnrollmentLink = realizationItem[\"enrolmentLink\"];\n              const courseTeachingLanguage = realizationItem[\"teachingLanguage\"];\n              const courseOrganisation = realizationItem[\"organisation\"];\n\n              let courseTags = [];\n              if (realizationItem[\"tags\"]) {\n                let tags = JSON.parse(JSON.stringify(realizationItem[\"tags\"]));\n                for (let z in tags) {\n                  let tagItem = {name: tags[z]};\n                  courseTags.push(tagItem);\n                }\n              }\n              const courseTagsJSON = JSON.stringify(courseTags);\n\n              const contentListItemClassAttributes = [\"item\", this.variant].join(\" \");\n\n              courseRealisations.push(\n                <hy-content-list-item\n                  id={realisationProperty}\n                  class={contentListItemClassAttributes}\n                  variant={this.variant}\n                  state-variant={this.courseStateVariant}\n                  course-code={courseCode}\n                  course-name={courseRealisationFullName}\n                  is-cancelled={courseCancelled}\n                  cancelled-label={this.cancelledLabel}\n                  course-credits={courseCredits}\n                  course-tags={courseTagsJSON}\n                  course-start-date={courseStartDate}\n                  course-end-date={courseEndDate}\n                  formatted-time-range={formattedTimeRange}\n                  course-study-format={courseStudyFormat}\n                  course-organisation={courseOrganisation}\n                  course-enrollment-link={courseEnrollmentLink}\n                  course-teaching-language={courseTeachingLanguage}\n                  course-link-label={this.linkLabel}\n                  data-location={courseEnrollmentLink}\n                  onClick={(e) => this.handleCardClick(e, realisationProperty)}\n                  //onKeyDown={() => this.handleKeyDown(window.event, realisationProperty)}\n                ></hy-content-list-item>\n              );\n            }\n          }\n        }\n      });\n    }\n\n    return courseRealisations;\n  }\n\n  render() {\n    const classAttributes = [this.variant, \"hy-content-list\"].join(\" \");\n    const classAlertAttributes = [\"hy-content-list--alert\", `hy-content-list--alert--${this.headerstyle}`].join(\" \");\n    const classAlertLabelAttributes = [\n      \"hy-content-list--alert-label\",\n      `hy-content-list--alert-label--${this.headerstyle}`,\n    ].join(\" \");\n\n    this.courseRealisations = this.renderItems();\n    if (this.courseRealisations && this.courseRealisations.length > 0) {\n      return (\n        <Host>\n          <div class={classAttributes}>{this.courseRealisations}</div>\n        </Host>\n      );\n    } else {\n      return (\n        <Host>\n          <div class={classAttributes}>\n            <div class=\"hy-content-list--no-result\">\n              <span class={classAlertAttributes}>\n                <hy-icon icon={\"hy-icon-info\"} size={16} />\n              </span>\n              <span class={classAlertLabelAttributes}>{this.noResultLabel}</span>\n            </div>\n          </div>\n        </Host>\n      );\n    }\n  }\n}\n"],"version":3}
+{"file":"hy-content-list.js","mappings":"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","names":["HyContentList"],"sources":["./src/components/hy-content-lists/hy-content-list/hy-content-list.scss?tag=hy-content-list","./src/components/hy-content-lists/hy-content-list/hy-content-list.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-content-list {\n  display: flex;\n  font-family: var(--main-font-family);\n  flex-wrap: wrap;\n\n  &--no-result {\n    align-items: center;\n    display: flex;\n  }\n  &--alert {\n    margin-right: 6px;\n    svg {\n      fill: var(--grayscale-dark);\n    }\n    @include breakpoint($xlarge) {\n      svg {\n        height: 18px;\n        width: 18px;\n      }\n    }\n    &--large {\n      @include breakpoint($overwide) {\n        svg {\n          height: 18px;\n          width: 18px;\n        }\n      }\n    }\n  }\n\n  &--alert-label {\n    font-family: var(--main-font-family);\n    @include font-size(15px, 22px);\n    color: var(--grayscale-dark);\n    font-style: italic;\n    letter-spacing: 0;\n\n    @include breakpoint($narrow) {\n      @include font-size(16px, 24px);\n    }\n    @include breakpoint($xlarge) {\n      @include font-size(17px, 26px);\n    }\n    &--large {\n      @include breakpoint($overwide) {\n        @include font-size(17px, 26px);\n      }\n    }\n  }\n}\n\n.hy-content-list.row {\n  flex-direction: column;\n}\n\n.hy-content-list.grid {\n  flex-direction: row;\n}\n","import {CourseStateVariants, CourseVariants} from \"../../../utils/utils\";\nimport {Component, ComponentInterface, Element, h, Host, Prop, State, Watch} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-content-list\",\n  styleUrl: \"hy-content-list.scss\",\n  shadow: false,\n})\nexport class HyContentList implements ComponentInterface {\n  @Prop() linkLabel: string = \"Go to course page\";\n  @Prop() noResultLabel: string = \"No courses scheduled at the moment\";\n  @Prop() creditsLabel: string = \"cr\";\n  @Prop() cancelledLabel: string = \"Cancelled\";\n  @Prop() dataItems: string;\n  @Prop() headerstyle: string = \"common\";\n  @Prop() courseStateVariant: CourseStateVariants = CourseStateVariants.default;\n  private _dataItems: [];\n  private variant: CourseVariants = CourseVariants.default;\n  @State() courseRealisations: Array<object> = [];\n  @Element() el: HTMLElement;\n  /**\n   * Data for links to be displayed.\n   */\n\n  @Watch(\"dataItems\") dataWatcher(data: [] | string) {\n    this._dataItems = typeof data === \"string\" ? JSON.parse(data) : data;\n  }\n\n  componentWillLoad() {\n    this.dataWatcher(this.dataItems);\n  }\n\n  handleCardClick(e, id) {\n    e.preventDefault();\n    let card = this.el.querySelector(`#${id}`) as HTMLElement;\n\n    if (card) {\n      window.open(card.dataset.location, \"_blank\");\n    }\n  }\n\n  async componentDidLoad() {\n    let hyMainDiv = this.el.closest(\".hy-main\");\n    if (hyMainDiv) {\n      if (!hyMainDiv.classList.contains(\"with-sidebar\")) {\n        this.headerstyle = \"large\";\n      }\n    }\n  }\n\n  renderItems() {\n    let courseRealisations = [];\n    if (this._dataItems && this._dataItems.length > 0) {\n      this._dataItems.forEach((item) => {\n        const courseObject = JSON.parse(JSON.stringify(item));\n\n        const courseListType = courseObject[\"courseListType\"];\n        this.variant = courseListType == \"list\" ? CourseVariants.row : CourseVariants.grid;\n\n        const courseCode = courseObject[\"code\"];\n        const courseCredits = courseObject[\"credits\"];\n\n        // Course realisations.\n        if (courseObject[\"realisations\"]) {\n          const realisations = JSON.parse(JSON.stringify(courseObject[\"realisations\"]));\n          for (const realisationProperty in realisations) {\n            const realizationItem = realisations[realisationProperty];\n            const courseRealisationName = realizationItem[\"name\"];\n            const courseRealisationFullName = courseRealisationName + \", \" + courseCredits + \" \" + this.creditsLabel;\n            const courseStudyFormat = realizationItem[\"studyFormat\"];\n            const courseCancelled = realizationItem[\"cancelled\"];\n            const courseStartDate = realizationItem[\"startDate\"];\n            const courseEndDate = realizationItem[\"endDate\"];\n            const formattedTimeRange = realizationItem[\"formattedTimeRange\"];\n            const courseEnrollmentLink = realizationItem[\"enrolmentLink\"];\n            const courseTeachingLanguage = realizationItem[\"teachingLanguage\"];\n            const courseOrganisation = realizationItem[\"organisation\"];\n\n            let courseTags = [];\n            if (realizationItem[\"tags\"]) {\n              let tags = JSON.parse(JSON.stringify(realizationItem[\"tags\"]));\n              for (let z in tags) {\n                let tagItem = {name: tags[z]};\n                courseTags.push(tagItem);\n              }\n            }\n            const courseTagsJSON = JSON.stringify(courseTags);\n\n            const contentListItemClassAttributes = [\"item\", this.variant].join(\" \");\n\n            courseRealisations.push(\n              <hy-content-list-item\n                id={realisationProperty}\n                class={contentListItemClassAttributes}\n                variant={this.variant}\n                state-variant={this.courseStateVariant}\n                course-code={courseCode}\n                course-name={courseRealisationFullName}\n                is-cancelled={courseCancelled}\n                cancelled-label={this.cancelledLabel}\n                course-credits={courseCredits}\n                course-tags={courseTagsJSON}\n                course-start-date={courseStartDate}\n                course-end-date={courseEndDate}\n                formatted-time-range={formattedTimeRange}\n                course-study-format={courseStudyFormat}\n                course-organisation={courseOrganisation}\n                course-enrollment-link={courseEnrollmentLink}\n                course-teaching-language={courseTeachingLanguage}\n                course-link-label={this.linkLabel}\n                data-location={courseEnrollmentLink}\n                onClick={(e) => this.handleCardClick(e, realisationProperty)}\n                //onKeyDown={() => this.handleKeyDown(window.event, realisationProperty)}\n              ></hy-content-list-item>\n            );\n          }\n        }\n      });\n    }\n\n    return courseRealisations;\n  }\n\n  render() {\n    const classAttributes = [this.variant, \"hy-content-list\"].join(\" \");\n    const classAlertAttributes = [\"hy-content-list--alert\", `hy-content-list--alert--${this.headerstyle}`].join(\" \");\n    const classAlertLabelAttributes = [\n      \"hy-content-list--alert-label\",\n      `hy-content-list--alert-label--${this.headerstyle}`,\n    ].join(\" \");\n\n    this.courseRealisations = this.renderItems();\n    if (this.courseRealisations && this.courseRealisations.length > 0) {\n      return (\n        <Host>\n          <div class={classAttributes}>{this.courseRealisations}</div>\n        </Host>\n      );\n    } else {\n      return (\n        <Host>\n          <div class={classAttributes}>\n            <div class=\"hy-content-list--no-result\">\n              <span class={classAlertAttributes}>\n                <hy-icon icon={\"hy-icon-info\"} size={16} />\n              </span>\n              <span class={classAlertLabelAttributes}>{this.noResultLabel}</span>\n            </div>\n          </div>\n        </Host>\n      );\n    }\n  }\n}\n"],"version":3}

package/components/hy-hero.js

@@ -5,10 +5,8 @@ import { d as defineCustomElement$4 } from './hy-box2.js';
 import { d as defineCustomElement$3 } from './cta-button.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
-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)}";
+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)}";
 
-let timeout = null;
-let delay = 250;
 const HyHero$1 = /*@__PURE__*/ proxyCustomElement(class HyHero extends HTMLElement {
   constructor() {
     super();
@@ -36,43 +34,14 @@ const HyHero$1 = /*@__PURE__*/ proxyCustomElement(class HyHero extends HTMLEleme
   async componentWillLoad() {
     this._sourceSet = await jsonParserWorker(this.sourceSet);
   }
-  // TODO: Refactor, find way to get rid of this.
-  handleHeroImageObjectFitValue(heroSizeVariant, heroElement) {
-    const heroContentContainerElement = heroElement.getElementsByClassName("hy-hero__content-container")[0];
-    if (heroSizeVariant === "small") {
-      if (heroContentContainerElement.offsetHeight >= 300) {
-        heroElement.classList.add("has-cover");
-      }
-      else {
-        heroElement.classList.remove("has-cover");
-      }
-    }
-    if (heroSizeVariant === "large") {
-      if (heroContentContainerElement.offsetHeight >= 344) {
-        heroElement.classList.add("has-cover");
-      }
-      else {
-        heroElement.classList.remove("has-cover");
-      }
-    }
-  }
   createImageElement(props, srcSet, aspectRatio) {
     return (h("div", { class: `hy-hero__image-container`, style: aspectRatio }, props.image &&
       (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 })))));
   }
-  // TODO: Refactor, is this still even used?
-  setAspectRatio(aspectRatioWidth = 16, aspectRatioHeight = 10) {
-    const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;
-    return {
-      "--aspectRatio": `${aspect}%`,
-      //"aspect-ratio": `${aspectRatioWidth} / ${aspectRatioHeight}` as "aspectRatio",
-    };
-  }
   render() {
     let variant = CtaLinkButtonVariants.heroWhite;
     let colorVariantValue = this.colorVariant;
     let heroTypeValue = this.heroType;
-    //TODO: Refactor
     if (this.heroType === "minor_landing") {
       colorVariantValue = HeroColorVariant.white;
       heroTypeValue = HeroTypeVariant.landing;
@@ -92,26 +61,17 @@ const HyHero$1 = /*@__PURE__*/ proxyCustomElement(class HyHero extends HTMLEleme
       `hy-hero--${this.heroGroupType}`,
       `hy-hero--${colorVariantValue}`,
       `hy-hero--${this.sizeVariant}`,
-      this.hasShortcuts ? 'has-shortcuts' : '',
+      this.hasShortcuts ? "has-shortcuts" : "",
     ];
     const heroTitleClasses = ["hy-hero__title", "hy-heading__hero"].join(" ");
-    // TODO: Refactor, find way to get rid of this.
-    window.onload = () => {
-      const heroElement = document.getElementsByClassName("hy-hero")[0];
-      this.handleHeroImageObjectFitValue(this.sizeVariant, heroElement);
-      window.addEventListener("resize", () => {
-        clearTimeout(timeout);
-        timeout = setTimeout(() => this.handleHeroImageObjectFitValue(this.sizeVariant, heroElement), delay);
-      });
-    };
-    if (heroTypeValue === "front_page" && this.sizeVariant !== 'full-image') {
-      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" })));
+    if (heroTypeValue === "front_page" && this.sizeVariant !== "full-image") {
+      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" })));
     }
-    if (this.sizeVariant === 'full-image') {
-      const linkTarget = this.isExternal ? '_blank' : '_self';
-      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 })))))))));
+    if (this.sizeVariant === "full-image") {
+      const linkTarget = this.isExternal ? "_blank" : "_self";
+      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 })))))))));
     }
-    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" })));
+    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" })));
   }
   get el() { return this; }
   static get style() { return hyHeroCss; }

package/components/hy-hero.js.map

@@ -1 +1 @@
-{"file":"hy-hero.js","mappings":"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","names":["HyHero"],"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}
+{"file":"hy-hero.js","mappings":"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","names":["HyHero"],"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/cjs/hy-content-list_2.cjs.entry.js

@@ -52,39 +52,34 @@ const HyContentList = class {
         const courseObject = JSON.parse(JSON.stringify(item));
         const courseListType = courseObject["courseListType"];
         this.variant = courseListType == "list" ? utils.CourseVariants.row : utils.CourseVariants.grid;
-        for (const courseProperty in courseObject) {
-          if (courseProperty == "courseListType")
-            continue;
-          const courseItem = courseObject[courseProperty];
-          const courseCode = courseItem["code"];
-          const courseCredits = courseItem["credits"];
-          // Course realisations.
-          if (courseItem["realisations"]) {
-            const realisations = JSON.parse(JSON.stringify(courseItem["realisations"]));
-            for (const realisationProperty in realisations) {
-              const realizationItem = realisations[realisationProperty];
-              const courseRealisationName = realizationItem["name"];
-              const courseRealisationFullName = courseRealisationName + ", " + courseCredits + " " + this.creditsLabel;
-              const courseStudyFormat = realizationItem["studyFormat"];
-              const courseCancelled = realizationItem["cancelled"];
-              const courseStartDate = realizationItem["startDate"];
-              const courseEndDate = realizationItem["endDate"];
-              const formattedTimeRange = realizationItem["formattedTimeRange"];
-              const courseEnrollmentLink = realizationItem["enrolmentLink"];
-              const courseTeachingLanguage = realizationItem["teachingLanguage"];
-              const courseOrganisation = realizationItem["organisation"];
-              let courseTags = [];
-              if (realizationItem["tags"]) {
-                let tags = JSON.parse(JSON.stringify(realizationItem["tags"]));
-                for (let z in tags) {
-                  let tagItem = { name: tags[z] };
-                  courseTags.push(tagItem);
-                }
+        const courseCode = courseObject["code"];
+        const courseCredits = courseObject["credits"];
+        // Course realisations.
+        if (courseObject["realisations"]) {
+          const realisations = JSON.parse(JSON.stringify(courseObject["realisations"]));
+          for (const realisationProperty in realisations) {
+            const realizationItem = realisations[realisationProperty];
+            const courseRealisationName = realizationItem["name"];
+            const courseRealisationFullName = courseRealisationName + ", " + courseCredits + " " + this.creditsLabel;
+            const courseStudyFormat = realizationItem["studyFormat"];
+            const courseCancelled = realizationItem["cancelled"];
+            const courseStartDate = realizationItem["startDate"];
+            const courseEndDate = realizationItem["endDate"];
+            const formattedTimeRange = realizationItem["formattedTimeRange"];
+            const courseEnrollmentLink = realizationItem["enrolmentLink"];
+            const courseTeachingLanguage = realizationItem["teachingLanguage"];
+            const courseOrganisation = realizationItem["organisation"];
+            let courseTags = [];
+            if (realizationItem["tags"]) {
+              let tags = JSON.parse(JSON.stringify(realizationItem["tags"]));
+              for (let z in tags) {
+                let tagItem = { name: tags[z] };
+                courseTags.push(tagItem);
               }
-              const courseTagsJSON = JSON.stringify(courseTags);
-              const contentListItemClassAttributes = ["item", this.variant].join(" ");
-              courseRealisations.push(index.h("hy-content-list-item", { id: realisationProperty, class: contentListItemClassAttributes, variant: this.variant, "state-variant": this.courseStateVariant, "course-code": courseCode, "course-name": courseRealisationFullName, "is-cancelled": courseCancelled, "cancelled-label": this.cancelledLabel, "course-credits": courseCredits, "course-tags": courseTagsJSON, "course-start-date": courseStartDate, "course-end-date": courseEndDate, "formatted-time-range": formattedTimeRange, "course-study-format": courseStudyFormat, "course-organisation": courseOrganisation, "course-enrollment-link": courseEnrollmentLink, "course-teaching-language": courseTeachingLanguage, "course-link-label": this.linkLabel, "data-location": courseEnrollmentLink, onClick: (e) => this.handleCardClick(e, realisationProperty) }));
             }
+            const courseTagsJSON = JSON.stringify(courseTags);
+            const contentListItemClassAttributes = ["item", this.variant].join(" ");
+            courseRealisations.push(index.h("hy-content-list-item", { id: realisationProperty, class: contentListItemClassAttributes, variant: this.variant, "state-variant": this.courseStateVariant, "course-code": courseCode, "course-name": courseRealisationFullName, "is-cancelled": courseCancelled, "cancelled-label": this.cancelledLabel, "course-credits": courseCredits, "course-tags": courseTagsJSON, "course-start-date": courseStartDate, "course-end-date": courseEndDate, "formatted-time-range": formattedTimeRange, "course-study-format": courseStudyFormat, "course-organisation": courseOrganisation, "course-enrollment-link": courseEnrollmentLink, "course-teaching-language": courseTeachingLanguage, "course-link-label": this.linkLabel, "data-location": courseEnrollmentLink, onClick: (e) => this.handleCardClick(e, realisationProperty) }));
           }
         }
       });