npm - @itcenteratunihelsinki/huds-lib - Versions diffs - 0.8.71 → 0.8.73 - Mend

@itcenteratunihelsinki/huds-lib 0.8.71 → 0.8.73

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

Files changed (24) hide show

package/components/hy-content-list.js +26 -31
package/components/hy-content-list.js.map +1 -1
package/components/hy-hero.js +8 -48
package/components/hy-hero.js.map +1 -1
package/dist/cjs/hy-content-list_2.cjs.entry.js +26 -31
package/dist/cjs/hy-content-list_2.cjs.entry.js.map +1 -1
package/dist/cjs/hy-hero.cjs.entry.js +8 -48
package/dist/cjs/hy-hero.cjs.entry.js.map +1 -1
package/dist/collection/components/hy-content-lists/hy-content-list/hy-content-list.js +26 -31
package/dist/collection/components/hy-content-lists/hy-content-list/hy-content-list.js.map +1 -1
package/dist/collection/components/hy-hero/hy-hero.css +17 -1
package/dist/collection/components/hy-hero/hy-hero.js +7 -47
package/dist/collection/components/hy-hero/hy-hero.js.map +1 -1
package/dist/esm/hy-content-list_2.entry.js +26 -31
package/dist/esm/hy-content-list_2.entry.js.map +1 -1
package/dist/esm/hy-hero.entry.js +8 -48
package/dist/esm/hy-hero.entry.js.map +1 -1
package/dist/fonts/fonts.css +12 -10
package/dist/huds-lib/hy-content-list_2.entry.js +1 -1
package/dist/huds-lib/hy-content-list_2.entry.js.map +1 -1
package/dist/huds-lib/hy-hero.entry.js +1 -1
package/dist/huds-lib/hy-hero.entry.js.map +1 -1
package/dist/types/components/hy-hero/hy-hero.d.ts +0 -4
package/package.json +2 -2

package/dist/cjs/hy-content-list_2.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"hy-content-list.hy-content-list-item.entry.cjs.js","mappings":"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","names":["CourseVariants","CourseStateVariants","h","Host","jsonParserWorker"],"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","./src/components/hy-content-lists/hy-content-list-item/hy-content-list-item.scss?tag=hy-content-list-item","./src/components/hy-content-lists/hy-content-list-item/hy-content-list-item.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","hy-content-list-item {\n background: radial-gradient(circle, #f8f8f8 0%, #f5f5f5 100%);\n cursor: pointer;\n display: flex;\n margin-bottom: 16px;\n position: relative;\n //width: 100%;\n\n @include breakpoint($narrow) {\n margin-bottom: 24px;\n }\n}\nhy-content-list-item[variant=\"row\"],\nhy-content-list-item.row {\n max-width: 100%;\n padding: 21px 0 60px 12px;\n width: 100%;\n\n @include breakpoint($narrow) {\n padding: 21px 0 12px 24px;\n }\n @include breakpoint($wide) {\n margin-bottom: 16px;\n }\n}\nhy-content-list-item.grid {\n max-width: 100%;\n padding: 21px 0 60px 12px;\n width: 100%;\n\n @include breakpoint($narrow) {\n margin-right: var(--gutter-medium);\n max-width: calc(((100% - #{var(--gutter-medium)} 11) / 12) * 6 + #{var(--gutter-medium)} * 5);\n padding: 21px 0 60px 12px;\n width: calc(((100% - #{var(--gutter-medium)} * 11) / 12) * 6 + #{var(--gutter-medium)} * 5);\n }\n @include breakpoint($wide) {\n margin-bottom: 27px;\n margin-right: var(--gutter-wide);\n max-width: calc(((100% - #{var(--gutter-wide)} * 11) / 12) * 4 + #{var(--gutter-wide)} * 3);\n width: calc(((100% - #{var(--gutter-wide)} * 11) / 12) * 4 + #{var(--gutter-wide)} * 3);\n }\n @include breakpoint($extrawide) {\n margin-bottom: 32px;\n margin-right: var(--gutter-extrawide);\n max-width: calc(((100% - #{var(--gutter-extrawide)} * 11) / 12) * 4 + #{var(--gutter-extrawide)} * 3);\n width: calc(((100% - #{var(--gutter-extrawide)} * 11) / 12) * 4 + #{var(--gutter-extrawide)} * 3);\n }\n}\n\nhy-content-list-item.grid:nth-of-type(2n + 0) {\n @include breakpoint($narrow) {\n margin-right: 0;\n }\n @include breakpoint($wide) {\n margin-right: var(--gutter-wide);\n }\n @include breakpoint($extrawide) {\n margin-right: var(--gutter-extrawide);\n }\n}\n\nhy-content-list-item.grid:nth-of-type(3n + 0) {\n @include breakpoint($wide) {\n margin-right: 0;\n }\n}\n\n.hy-content-list-item {\n font-family: var(--main-font-family);\n position: relative;\n width: 100%;\n\n a {\n text-decoration: none;\n }\n\n &--container {\n cursor: pointer;\n }\n\n &--item-name {\n color: var(--link-blue);\n @include font-size(20px, 24px);\n @include font-weight($bold);\n letter-spacing: -0.6px;\n margin-bottom: 16px;\n word-break: break-word;\n\n &--past-courses {\n color: var(--grayscale-dark);\n }\n }\n\n &--metadata {\n @include font-size(14px, 16px);\n @include font-weight($semibold);\n\n color: var(--grayscale-black);\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n letter-spacing: -0.44px;\n line-height: 16px;\n margin-bottom: 19px;\n padding-bottom: 0;\n\n &--item {\n padding-bottom: 6px;\n }\n\n @include breakpoint($narrow) {\n padding-bottom: 1rem;\n }\n @include breakpoint($extrawide) {\n padding-bottom: 0;\n }\n\n &--item:after {\n content: \"\|\";\n padding: 0 8px;\n }\n &--item--last:after {\n content: \" \";\n }\n }\n\n .cancelled {\n span {\n @include font-size(12px, 12px);\n @include font-weight($bold);\n background-color: var(--additional-red-light);\n color: var(--grayscale-white);\n letter-spacing: -0.5px;\n padding: 6px 8px;\n text-transform: uppercase;\n }\n &--past-courses {\n span {\n background-color: var(--grayscale-dark);\n }\n }\n\n &:not(.mobile) {\n display: none;\n }\n\n &.mobile {\n bottom: -50px;\n display: block;\n margin: 0;\n padding-bottom: 12px;\n position: absolute;\n }\n\n @include breakpoint($narrow) {\n margin-right: 8px;\n\n &.mobile {\n display: none;\n }\n &:not(.mobile) {\n display: block;\n }\n }\n }\n\n &--link {\n position: absolute;\n right: -6px;\n\n a {\n align-items: center;\n display: flex;\n flex-direction: row;\n text-decoration: none;\n\n .label {\n @include font-size(16px, 16px);\n @include font-weight($bold);\n color: var(--link-blue);\n letter-spacing: -0.5px;\n line-height: 16px;\n margin-right: 8px;\n text-align: right;\n }\n\n .icon-wrapper {\n background-color: var(--brand-main-light);\n z-index: 10;\n\n .icon {\n transform: rotate(-45deg);\n position: relative;\n overflow: hidden;\n\n svg {\n background-color: transparent;\n box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);\n fill: var(--grayscale-white);\n padding: 10.29px;\n }\n }\n }\n }\n }\n}\n\n.hy-content-list-item.row {\n .hy-content-list-item--link {\n bottom: -60px;\n padding-bottom: 12px;\n\n @include breakpoint($narrow) {\n bottom: 0;\n padding-bottom: 0;\n }\n }\n\n .hy-content-list-item--tags {\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n @include breakpoint($wide) {\n flex-direction: row;\n padding-right: 200px;\n }\n }\n}\n\n.hy-content-list-item.grid {\n .hy-content-list-item--link {\n bottom: -60px;\n padding-bottom: 12px;\n }\n\n .hy-content-list-item--tags {\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n }\n}\n","export interface TagValue {\n name: string;\n}\n\nimport {Component, Element, h, Listen, Prop} from \"@stencil/core\";\nimport {CourseStateVariants, CourseVariants} from \"../../../utils/utils\";\nimport {jsonParserWorker} from \"../../../global/globalScript\";\n\nlet keys = {\n enter: \"Enter\",\n};\n\n@Component({\n tag: \"hy-content-list-item\",\n styleUrl: \"hy-content-list-item.scss\",\n shadow: false,\n})\nexport class HyContentLstItem {\n @Prop() variant: CourseVariants = CourseVariants.default;\n @Prop() stateVariant: CourseStateVariants = CourseStateVariants.default;\n @Prop() courseCode?: string;\n @Prop() courseName?: string;\n @Prop() isCancelled?: boolean;\n @Prop() cancelledLabel: string = \"Cancelled\";\n @Prop() courseCredits?: string;\n private _courseTags: TagValue[];\n @Prop() courseTags: TagValue[] \| string;\n @Prop() courseStartDate?: string;\n @Prop() courseEndDate?: string;\n @Prop() formattedTimeRange?: string;\n @Prop() courseStudyFormat?: string;\n @Prop() courseOrganisation?: string;\n @Prop() courseEnrollmentLink?: string;\n @Prop() courseTeachingLanguage?: string;\n @Prop() courseLinkLabel?: string;\n\n @Element() el: HTMLElement;\n\n async componentWillLoad() {\n this._courseTags = await jsonParserWorker(this.courseTags);\n }\n\n @Listen(\"keydown\")\n handleKeyDown(event) {\n const key = (event as KeyboardEvent).code;\n if (key == keys.enter) {\n let card = this.el;\n window.open(card.dataset.location, \"_blank\", \"noopener\");\n }\n }\n\n render() {\n const classAttributes = [this.variant, \"hy-content-list-item\"].join(\" \");\n\n const target = \"_blank\";\n const ariaLabel = \"Link points outside the current website.\";\n\n const classItemName = [\n \"hy-content-list-item--item-name\",\n `hy-content-list-item--item-name--${this.stateVariant}`,\n ].join(\" \");\n const classItemCancelled = [\"cancelled\", `cancelled--${this.stateVariant}`].join(\" \");\n\n return [\n <div class={classAttributes} tabindex=\"0\">\n <div class={classItemName}>{this.courseName}</div>\n <div class=\"hy-content-list-item--metadata\">\n {this.isCancelled && (\n <div class={classItemCancelled}>\n <span>{this.cancelledLabel}</span>\n </div>\n )}\n <div class=\"hy-content-list-item--metadata--item hy-content-list-item--metadata--item--first\">\n <span>{this.formattedTimeRange}</span>\n </div>\n {this.courseOrganisation\n ? [\n <div class=\"hy-content-list-item--metadata--item\">\n <span>{this.courseStudyFormat}</span>\n </div>,\n <div class=\"hy-content-list-item--metadata--item hy-content-list-item--metadata--item--last\">\n <span>{this.courseOrganisation}</span>\n </div>,\n ]\n : [\n <div class=\"hy-content-list-item--metadata--item hy-content-list-item--metadata--item--last\">\n <span>{this.courseStudyFormat}</span>\n </div>,\n ]}\n </div>\n {this._courseTags && this._courseTags.length > 0 && (\n <div class=\"hy-content-list-item--tags\">\n {this._courseTags.map((x) => {\n return <hy-tag>{x.name}</hy-tag>;\n })}\n </div>\n )}\n {this.isCancelled && (\n <div class=\"cancelled mobile\">\n <span>{this.cancelledLabel}</span>\n </div>\n )}\n <div class=\"hy-content-list-item--link\">\n <a\n href={this.courseEnrollmentLink}\n target={target}\n aria-label={ariaLabel}\n class=\"hy-content-list-item--link--link\"\n tabindex=\"-1\"\n >\n <span class=\"label\">{this.courseLinkLabel}</span>\n <span class=\"icon-wrapper\">\n <div class=\"icon\">\n <hy-icon icon={\"hy-icon-arrow-to-right\"} size={40} />\n </div>\n </span>\n </a>\n </div>\n </div>,\n ];\n }\n}\n"],"version":3}
1	+ {"file":"hy-content-list.hy-content-list-item.entry.cjs.js","mappings":"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","names":["CourseVariants","CourseStateVariants","h","Host","jsonParserWorker"],"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","./src/components/hy-content-lists/hy-content-list-item/hy-content-list-item.scss?tag=hy-content-list-item","./src/components/hy-content-lists/hy-content-list-item/hy-content-list-item.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","hy-content-list-item {\n background: radial-gradient(circle, #f8f8f8 0%, #f5f5f5 100%);\n cursor: pointer;\n display: flex;\n margin-bottom: 16px;\n position: relative;\n //width: 100%;\n\n @include breakpoint($narrow) {\n margin-bottom: 24px;\n }\n}\nhy-content-list-item[variant=\"row\"],\nhy-content-list-item.row {\n max-width: 100%;\n padding: 21px 0 60px 12px;\n width: 100%;\n\n @include breakpoint($narrow) {\n padding: 21px 0 12px 24px;\n }\n @include breakpoint($wide) {\n margin-bottom: 16px;\n }\n}\nhy-content-list-item.grid {\n max-width: 100%;\n padding: 21px 0 60px 12px;\n width: 100%;\n\n @include breakpoint($narrow) {\n margin-right: var(--gutter-medium);\n max-width: calc(((100% - #{var(--gutter-medium)} 11) / 12) * 6 + #{var(--gutter-medium)} * 5);\n padding: 21px 0 60px 12px;\n width: calc(((100% - #{var(--gutter-medium)} * 11) / 12) * 6 + #{var(--gutter-medium)} * 5);\n }\n @include breakpoint($wide) {\n margin-bottom: 27px;\n margin-right: var(--gutter-wide);\n max-width: calc(((100% - #{var(--gutter-wide)} * 11) / 12) * 4 + #{var(--gutter-wide)} * 3);\n width: calc(((100% - #{var(--gutter-wide)} * 11) / 12) * 4 + #{var(--gutter-wide)} * 3);\n }\n @include breakpoint($extrawide) {\n margin-bottom: 32px;\n margin-right: var(--gutter-extrawide);\n max-width: calc(((100% - #{var(--gutter-extrawide)} * 11) / 12) * 4 + #{var(--gutter-extrawide)} * 3);\n width: calc(((100% - #{var(--gutter-extrawide)} * 11) / 12) * 4 + #{var(--gutter-extrawide)} * 3);\n }\n}\n\nhy-content-list-item.grid:nth-of-type(2n + 0) {\n @include breakpoint($narrow) {\n margin-right: 0;\n }\n @include breakpoint($wide) {\n margin-right: var(--gutter-wide);\n }\n @include breakpoint($extrawide) {\n margin-right: var(--gutter-extrawide);\n }\n}\n\nhy-content-list-item.grid:nth-of-type(3n + 0) {\n @include breakpoint($wide) {\n margin-right: 0;\n }\n}\n\n.hy-content-list-item {\n font-family: var(--main-font-family);\n position: relative;\n width: 100%;\n\n a {\n text-decoration: none;\n }\n\n &--container {\n cursor: pointer;\n }\n\n &--item-name {\n color: var(--link-blue);\n @include font-size(20px, 24px);\n @include font-weight($bold);\n letter-spacing: -0.6px;\n margin-bottom: 16px;\n word-break: break-word;\n\n &--past-courses {\n color: var(--grayscale-dark);\n }\n }\n\n &--metadata {\n @include font-size(14px, 16px);\n @include font-weight($semibold);\n\n color: var(--grayscale-black);\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n letter-spacing: -0.44px;\n line-height: 16px;\n margin-bottom: 19px;\n padding-bottom: 0;\n\n &--item {\n padding-bottom: 6px;\n }\n\n @include breakpoint($narrow) {\n padding-bottom: 1rem;\n }\n @include breakpoint($extrawide) {\n padding-bottom: 0;\n }\n\n &--item:after {\n content: \"\|\";\n padding: 0 8px;\n }\n &--item--last:after {\n content: \" \";\n }\n }\n\n .cancelled {\n span {\n @include font-size(12px, 12px);\n @include font-weight($bold);\n background-color: var(--additional-red-light);\n color: var(--grayscale-white);\n letter-spacing: -0.5px;\n padding: 6px 8px;\n text-transform: uppercase;\n }\n &--past-courses {\n span {\n background-color: var(--grayscale-dark);\n }\n }\n\n &:not(.mobile) {\n display: none;\n }\n\n &.mobile {\n bottom: -50px;\n display: block;\n margin: 0;\n padding-bottom: 12px;\n position: absolute;\n }\n\n @include breakpoint($narrow) {\n margin-right: 8px;\n\n &.mobile {\n display: none;\n }\n &:not(.mobile) {\n display: block;\n }\n }\n }\n\n &--link {\n position: absolute;\n right: -6px;\n\n a {\n align-items: center;\n display: flex;\n flex-direction: row;\n text-decoration: none;\n\n .label {\n @include font-size(16px, 16px);\n @include font-weight($bold);\n color: var(--link-blue);\n letter-spacing: -0.5px;\n line-height: 16px;\n margin-right: 8px;\n text-align: right;\n }\n\n .icon-wrapper {\n background-color: var(--brand-main-light);\n z-index: 10;\n\n .icon {\n transform: rotate(-45deg);\n position: relative;\n overflow: hidden;\n\n svg {\n background-color: transparent;\n box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);\n fill: var(--grayscale-white);\n padding: 10.29px;\n }\n }\n }\n }\n }\n}\n\n.hy-content-list-item.row {\n .hy-content-list-item--link {\n bottom: -60px;\n padding-bottom: 12px;\n\n @include breakpoint($narrow) {\n bottom: 0;\n padding-bottom: 0;\n }\n }\n\n .hy-content-list-item--tags {\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n @include breakpoint($wide) {\n flex-direction: row;\n padding-right: 200px;\n }\n }\n}\n\n.hy-content-list-item.grid {\n .hy-content-list-item--link {\n bottom: -60px;\n padding-bottom: 12px;\n }\n\n .hy-content-list-item--tags {\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n }\n}\n","export interface TagValue {\n name: string;\n}\n\nimport {Component, Element, h, Listen, Prop} from \"@stencil/core\";\nimport {CourseStateVariants, CourseVariants} from \"../../../utils/utils\";\nimport {jsonParserWorker} from \"../../../global/globalScript\";\n\nlet keys = {\n enter: \"Enter\",\n};\n\n@Component({\n tag: \"hy-content-list-item\",\n styleUrl: \"hy-content-list-item.scss\",\n shadow: false,\n})\nexport class HyContentLstItem {\n @Prop() variant: CourseVariants = CourseVariants.default;\n @Prop() stateVariant: CourseStateVariants = CourseStateVariants.default;\n @Prop() courseCode?: string;\n @Prop() courseName?: string;\n @Prop() isCancelled?: boolean;\n @Prop() cancelledLabel: string = \"Cancelled\";\n @Prop() courseCredits?: string;\n private _courseTags: TagValue[];\n @Prop() courseTags: TagValue[] \| string;\n @Prop() courseStartDate?: string;\n @Prop() courseEndDate?: string;\n @Prop() formattedTimeRange?: string;\n @Prop() courseStudyFormat?: string;\n @Prop() courseOrganisation?: string;\n @Prop() courseEnrollmentLink?: string;\n @Prop() courseTeachingLanguage?: string;\n @Prop() courseLinkLabel?: string;\n\n @Element() el: HTMLElement;\n\n async componentWillLoad() {\n this._courseTags = await jsonParserWorker(this.courseTags);\n }\n\n @Listen(\"keydown\")\n handleKeyDown(event) {\n const key = (event as KeyboardEvent).code;\n if (key == keys.enter) {\n let card = this.el;\n window.open(card.dataset.location, \"_blank\", \"noopener\");\n }\n }\n\n render() {\n const classAttributes = [this.variant, \"hy-content-list-item\"].join(\" \");\n\n const target = \"_blank\";\n const ariaLabel = \"Link points outside the current website.\";\n\n const classItemName = [\n \"hy-content-list-item--item-name\",\n `hy-content-list-item--item-name--${this.stateVariant}`,\n ].join(\" \");\n const classItemCancelled = [\"cancelled\", `cancelled--${this.stateVariant}`].join(\" \");\n\n return [\n <div class={classAttributes} tabindex=\"0\">\n <div class={classItemName}>{this.courseName}</div>\n <div class=\"hy-content-list-item--metadata\">\n {this.isCancelled && (\n <div class={classItemCancelled}>\n <span>{this.cancelledLabel}</span>\n </div>\n )}\n <div class=\"hy-content-list-item--metadata--item hy-content-list-item--metadata--item--first\">\n <span>{this.formattedTimeRange}</span>\n </div>\n {this.courseOrganisation\n ? [\n <div class=\"hy-content-list-item--metadata--item\">\n <span>{this.courseStudyFormat}</span>\n </div>,\n <div class=\"hy-content-list-item--metadata--item hy-content-list-item--metadata--item--last\">\n <span>{this.courseOrganisation}</span>\n </div>,\n ]\n : [\n <div class=\"hy-content-list-item--metadata--item hy-content-list-item--metadata--item--last\">\n <span>{this.courseStudyFormat}</span>\n </div>,\n ]}\n </div>\n {this._courseTags && this._courseTags.length > 0 && (\n <div class=\"hy-content-list-item--tags\">\n {this._courseTags.map((x) => {\n return <hy-tag>{x.name}</hy-tag>;\n })}\n </div>\n )}\n {this.isCancelled && (\n <div class=\"cancelled mobile\">\n <span>{this.cancelledLabel}</span>\n </div>\n )}\n <div class=\"hy-content-list-item--link\">\n <a\n href={this.courseEnrollmentLink}\n target={target}\n aria-label={ariaLabel}\n class=\"hy-content-list-item--link--link\"\n tabindex=\"-1\"\n >\n <span class=\"label\">{this.courseLinkLabel}</span>\n <span class=\"icon-wrapper\">\n <div class=\"icon\">\n <hy-icon icon={\"hy-icon-arrow-to-right\"} size={40} />\n </div>\n </span>\n </a>\n </div>\n </div>,\n ];\n }\n}\n"],"version":3}

package/dist/cjs/hy-hero.cjs.entry.js CHANGED Viewed

@@ -6,10 +6,8 @@ const index = require('./index-32830401.js');
 const globalScript = require('./globalScript-9994473d.js');
 const utils = require('./utils-56f3464c.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 = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -36,43 +34,14 @@ const HyHero = class {
   async componentWillLoad() {
     this._sourceSet = await globalScript.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 (index.h("div", { class: `hy-hero__image-container`, style: aspectRatio }, props.image &&
       (srcSet ? (index.h("picture", null, srcSet.map((item) => (index.h("source", { srcSet: item.src, media: item.media, type: item.type, sizes: item.sizes ? item.sizes : "" }))), index.h("img", { loading: props.disableLazy ? "eager" : "lazy", alt: props.imageAltText, class: `hy-image__image`, src: props.image, height: props.imageHeight, width: props.imageWidth }))) : (index.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 = utils.CtaLinkButtonVariants.heroWhite;
     let colorVariantValue = this.colorVariant;
     let heroTypeValue = this.heroType;
-    //TODO: Refactor
     if (this.heroType === "minor_landing") {
       colorVariantValue = utils.HeroColorVariant.white;
       heroTypeValue = utils.HeroTypeVariant.landing;
@@ -92,26 +61,17 @@ const HyHero = class {
       `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 (index.h(index.Host, null, index.h("div", { class: hyHeroClasses.join(" ") }, index.h("div", { class: `hy-hero__container` }, this.createImageElement(this, this._sourceSet, this.setAspectRatio()), index.h("div", { class: `hy-hero__spacer-box` }), index.h("div", { class: `hy-hero__content-container` }, index.h("div", { class: `hy-hero__content` }, index.h("div", { class: `hy-hero__title-container` }, index.h("h2", { innerHTML: this.heading, class: heroTitleClasses })), this.description && index.h("p", { class: `hy-hero__description` }, this.description), this.url && (index.h("div", { class: `hy-hero__actions` }, index.h("hy-cta-button", { "link-content": this.urlTitle, "sc-label": this.scLabel, url: this.url, "is-external": this.isExternal, variant: variant }))))))), index.h("hy-box", { mb: "2, 2, 1, 1" })));
+    if (heroTypeValue === "front_page" && this.sizeVariant !== "full-image") {
+      return (index.h(index.Host, null, index.h("div", { class: hyHeroClasses.join(" ") }, index.h("div", { class: `hy-hero__container` }, this.createImageElement(this, this._sourceSet, { "--aspect-ratio": "16 / 10" }), index.h("div", { class: `hy-hero__spacer-box` }), index.h("div", { class: `hy-hero__content-container` }, index.h("div", { class: `hy-hero__content` }, index.h("div", { class: `hy-hero__title-container` }, index.h("h2", { innerHTML: this.heading, class: heroTitleClasses })), this.description && index.h("p", { class: `hy-hero__description` }, this.description), this.url && (index.h("div", { class: `hy-hero__actions` }, index.h("hy-cta-button", { "link-content": this.urlTitle, "sc-label": this.scLabel, url: this.url, "is-external": this.isExternal, variant: variant }))))))), index.h("hy-box", { mb: "2, 2, 1, 1" })));
     }
-    if (this.sizeVariant === 'full-image') {
-      const linkTarget = this.isExternal ? '_blank' : '_self';
-      return (index.h("div", { class: `hy-hero hy-hero--full-image` }, index.h("div", { class: `hy-hero__container` }, this.createImageElement(this, this._sourceSet, this.setAspectRatio(16, 8)), index.h("div", { class: `hy-hero__content-container` }, index.h("div", { class: `hy-hero__content`, "data-text-color": this.heroTextColor }, this.subtitle && index.h("span", { class: `hy-hero__subtitle` }, this.subtitle), index.h("h2", { innerHTML: this.heading, class: heroTitleClasses }), this.description && index.h("p", { class: `hy-hero__description` }, this.description), this.url && (index.h("div", { class: `hy-hero__actions` }, index.h("a", { class: "hy-hero__link", href: this.url, "aria-label": this.scLabel, target: linkTarget, "data-text-color": this.heroTextColor }, this.urlTitle, index.h("hy-icon", { icon: "hy-icon-arrow-right", size: 16 })))))))));
+    if (this.sizeVariant === "full-image") {
+      const linkTarget = this.isExternal ? "_blank" : "_self";
+      return (index.h("div", { class: `hy-hero hy-hero--full-image` }, index.h("div", { class: `hy-hero__container` }, this.createImageElement(this, this._sourceSet, { "--aspect-ratio": "16 / 8" }), index.h("div", { class: `hy-hero__content-container` }, index.h("div", { class: `hy-hero__content`, "data-text-color": this.heroTextColor }, this.subtitle && index.h("span", { class: `hy-hero__subtitle` }, this.subtitle), index.h("h2", { innerHTML: this.heading, class: heroTitleClasses }), this.description && index.h("p", { class: `hy-hero__description` }, this.description), this.url && (index.h("div", { class: `hy-hero__actions` }, index.h("a", { class: "hy-hero__link", href: this.url, "aria-label": this.scLabel, target: linkTarget, "data-text-color": this.heroTextColor }, this.urlTitle, index.h("hy-icon", { icon: "hy-icon-arrow-right", size: 16 })))))))));
     }
-    return (index.h(index.Host, null, index.h("div", { class: hyHeroClasses.join(" ") }, index.h("div", { class: `hy-hero__container` }, this.createImageElement(this, this._sourceSet, this.setAspectRatio()), index.h("div", { class: `hy-hero__content-container` }, index.h("div", { class: `hy-hero__content` }, index.h("div", { class: `hy-hero__title-container` }, index.h("h2", { innerHTML: this.heading, class: heroTitleClasses })), this.description && index.h("p", { class: `hy-hero__description` }, this.description), this.url && (index.h("div", { class: `hy-hero__actions` }, index.h("hy-cta-button", { "link-content": this.urlTitle, "sc-label": this.scLabel, url: this.url, "is-external": this.isExternal, variant: variant }))))))), index.h("hy-box", { mb: "2, 2, 1, 1" })));
+    return (index.h(index.Host, null, index.h("div", { class: hyHeroClasses.join(" ") }, index.h("div", { class: `hy-hero__container` }, this.createImageElement(this, this._sourceSet, { "--aspect-ratio": "16 / 10" }), index.h("div", { class: `hy-hero__content-container` }, index.h("div", { class: `hy-hero__content` }, index.h("div", { class: `hy-hero__title-container` }, index.h("h2", { innerHTML: this.heading, class: heroTitleClasses })), this.description && index.h("p", { class: `hy-hero__description` }, this.description), this.url && (index.h("div", { class: `hy-hero__actions` }, index.h("hy-cta-button", { "link-content": this.urlTitle, "sc-label": this.scLabel, url: this.url, "is-external": this.isExternal, variant: variant }))))))), index.h("hy-box", { mb: "2, 2, 1, 1" })));
   }
   get el() { return index.getElement(this); }
 };

package/dist/cjs/hy-hero.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"hy-hero.entry.cjs.js","mappings":"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","names":["HeroTypeVariant","HeroGroupTypeVariant","HeroColorVariant","HeroSizeVariant","jsonParserWorker","h","CtaLinkButtonVariants","Host"],"sources":["./src/components/hy-hero/hy-hero.scss?tag=hy-hero","./src/components/hy-hero/hy-hero.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-hero {\n position: relative;\n padding-bottom: 0;\n\n &:not(.hy-hero--full-image) {\n @include breakpoint($wide) {\n margin-top: 32px;\n }\n }\n\n &:not(.has-shortcuts) {\n @include breakpoint($wide) {\n margin-bottom: 32px;\n }\n }\n\n .without-sidebar & {\n @include breakpoint($extrawide) {\n max-width: 1216px;\n margin-right: auto;\n margin-left: auto;\n }\n }\n\n .with-sidebar:not(.hy-hero--full-image) & {\n @include breakpoint($extrawide) {\n padding-left: 32px;\n padding-right: 32px;\n }\n\n @include breakpoint($xlarge) {\n padding-right: 0;\n padding-left: 0;\n max-width: 1216px;\n margin-right: auto;\n margin-left: auto;\n }\n }\n\n &--full-image {\n --dark-bg: rgba(0, 0, 0, 0.55);\n --light-bg: rgba(255, 255, 255, 0.50);\n --dark-text: var(--brand-main-nearly-black);\n --light-text: var(--grayscale-white);\n \n border-bottom: 1px solid var(--grayscale-medium-dark);\n \n @include breakpoint($wide) {\n border-bottom: 4px solid var(--grayscale-black);\n margin-left: -2rem;\n margin-right: -2rem;\n }\n\n .without-sidebar & {\n @include breakpoint($extrawide) {\n max-width: none;\n margin-left: -2rem;\n margin-right: -2rem;\n }\n }\n\n .hy-hero__container {\n grid-template-columns: repeat(4 , 1fr);\n grid-template-rows: 1fr;\n }\n\n .hy-hero__image-container {\n grid-column: 1 / -1;\n grid-row: 1 / -1;\n object-fit: cover;\n padding: 0;\n width: 100%;\n img {\n aspect-ratio: 16 / 8;\n }\n }\n\n .hy-hero__content-container {\n padding: 0;\n\n @include breakpoint($wide) {\n align-self: center;\n grid-column: 1 / 3;\n grid-row: 1 / -1;\n margin-left: 32px;\n max-width: 95%;\n z-index: 2;\n }\n @include breakpoint($extrawide) {\n margin-left: 0;\n }\n }\n\n .hy-hero__content {\n display: flex;\n flex-direction: column;\n gap: 24px;\n padding: 16px 16px 32px 16px;\n \n @include breakpoint($wide) {\n margin-left: 32px;\n gap: 24px;\n padding: 32px;\n }\n @include breakpoint($extrawide) {\n margin-left: 64px;\n gap: 32px;\n }\n @include breakpoint($xlarge) {\n margin-left: 96px;\n }\n\n @include breakpoint($wide) {\n \n }\n\n &[data-text-color=\"dark_text_light_bg\"] {\n backdrop-filter: blur(250px);\n background-color: var(--grayscale-white);\n color: var(--dark-text);\n\n @include breakpoint($wide) {\n background: var(--light-bg);\n }\n }\n &[data-text-color=\"light_text_dark_bg\"] {\n backdrop-filter: blur(250px);\n background: var(--grayscale-black);\n color: var(--light-text);\n\n @include breakpoint($wide) {\n background: var(--dark-bg);\n }\n }\n &[data-text-color=\"dark_text_no_bg\"] {\n background-color: var(--grayscale-white);\n color: var(--dark-text);\n\n @include breakpoint($wide) {\n background: transparent;\n text-shadow: 0 0 5px var(--grayscale-white);\n }\n }\n &[data-text-color=\"light_text_no_bg\"] {\n background-color: var(--grayscale-black);\n color: var(--light-text);\n\n @include breakpoint($wide) {\n background: transparent;\n text-shadow: 0 0 5px var(--grayscale-black);\n }\n }\n }\n\n .hy-hero__subtitle {\n font-family: var(--main-font-family);\n font-size: 18px;\n font-weight: 700;\n line-height: 1.2;\n position: relative;\n\n &::after {\n aspect-ratio: 1;\n background-color: currentColor;\n bottom: -10px;\n content: '';\n display: block;\n height: 4px;\n left: 0;\n position: absolute;\n width: 64px;\n }\n\n @include breakpoint($wide) {\n font-size: 20px;\n }\n }\n\n h2.hy-hero__title.hy-heading__hero {\n color: inherit !important;\n font-family: var(--main-font-family);\n font-size: 32px;\n font-weight: 700; \n line-height: 1.2;\n\n @include breakpoint($extrawide) {\n font-size: 36px;\n }\n\n @include breakpoint($xlarge) {\n font-size: 64px;\n }\n }\n\n .hy-hero__description {\n font-family: var(--main-font-family);\n font-size: 16px;\n font-weight: 400; \n line-height: 1.5;\n margin: 0;\n padding: 0;\n\n @include breakpoint($xlarge) {\n font-size: 17px;\n }\n }\n\n .hy-hero__actions {\n margin: 0;\n\n .hy-hero__link {\n --light-bg: var(--grayscale-white);\n --dark-bg: var(--grayscale-black);\n --light-text: var(--grayscale-white);\n --dark-text: var(--grayscale-black);\n\n align-items: center;\n display: flex;\n font-family: var(--main-font-family);\n font-size: 16px;\n font-weight: 700;\n gap: 8px;\n line-height: 18px;\n padding: 13px 16px;\n text-decoration: none;\n width: fit-content;\n\n &:hover {\n text-decoration: underline;\n }\n\n svg {\n width: 16px;\n height: 16px;\n }\n\n &[data-text-color=\"dark_text_light_bg\"] {\n background: var(--dark-bg);\n color: var(--light-text);\n svg {fill: var(--light-text)}\n }\n &[data-text-color=\"light_text_dark_bg\"] {\n background: var(--light-bg);\n color: var(--dark-text);\n svg {fill: var(--dark-text)}\n }\n &[data-text-color=\"dark_text_no_bg\"] {\n background: var(--dark-bg);\n color: var(--light-text);\n text-shadow: none;\n svg {fill: var(--light-text)}\n }\n &[data-text-color=\"light_text_no_bg\"] {\n background: var(--light-bg);\n color: var(--dark-text);\n text-shadow: none;\n svg {fill: var(--dark-text)}\n }\n }\n }\n\n .hy-image__image {\n object-fit: cover;\n }\n }\n\n &--white {\n @include breakpoint($wide) {\n margin-top: 0;\n }\n\n &:not(.has-shortcuts) {\n @include breakpoint($wide) {\n padding-bottom: 48px;\n }\n }\n\n &:not(.has-shortcuts):after {\n width: 100%;\n background-color: var(--grayscale-medium-dark);\n height: 1px;\n content: \"\";\n margin: 0 auto;\n display: block;\n\n @include breakpoint($wide) {\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n }\n }\n\n &:not(.hy-hero--front_page):after {\n max-width: 1216px;\n }\n }\n}\n\n.hy-hero__container {\n position: relative;\n\n @include breakpoint($wide) {\n display: grid;\n position: relative;\n }\n\n .hy-hero--small & {\n @include breakpoint($wide) {\n grid-template-columns: 60% 1fr;\n }\n }\n\n .hy-hero--large & {\n @include breakpoint($wide) {\n grid-template-columns: repeat(2, 1fr);\n }\n }\n}\n\n.hy-hero__content-container {\n padding: 24px 1rem 40px;\n margin: 0 auto;\n width: 100%;\n\n @include breakpoint($narrow) {\n padding: 40px 2rem;\n }\n\n @include breakpoint($extrawide) {\n align-items: center;\n display: flex;\n padding: 40px 24px;\n }\n\n @include breakpoint($xlarge) {\n max-width: 1216px;\n }\n\n .hy-hero--black & {\n background-color: var(--grayscale-black);\n }\n\n .hy-hero--blue & {\n background-color: var(--brand-main);\n }\n\n .hy-hero--white & {\n background-color: var(--grayscale-white);\n\n @include breakpoint($extrawide) {\n padding: 40px 24px 40px 0;\n }\n }\n}\n\n.hy-hero__content {\n position: relative;\n}\n\nh2.hy-hero__title {\n hyphens: auto;\n display: flex;\n flex-grow: 1;\n flex-shrink: 0;\n max-width: 100%;\n width: auto;\n\n .hy-hero--blue & {\n color: var(--grayscale-white) !important;\n }\n\n .hy-hero--black & {\n color: var(--grayscale-white) !important;\n }\n\n .hy-hero--white & {\n color: var(--grayscale-black) !important;\n }\n\n &.hy-heading__hero {\n @include font-size(36px, 33px);\n @include font-weight($bold);\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n letter-spacing: -0.8px;\n margin-bottom: 0;\n text-transform: none;\n text-wrap: balance;\n\n @include breakpoint(1024px) {\n @include font-size(36px, 40px);\n letter-spacing: -1.15px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(38px, 48px);\n letter-spacing: -1.3px;\n }\n }\n}\n\n.hy-hero__description {\n @include font-size(16px, 24px);\n font-family: var(--main-font-family);\n margin: 16px 0 0 0;\n padding: 0;\n position: relative;\n text-wrap: pretty;\n\n @include breakpoint($xlarge) {\n @include font-size(17px, 26px);\n }\n\n .hy-hero--black & {\n color: var(--grayscale-white);\n }\n\n .hy-hero--blue & {\n color: var(--grayscale-white);\n }\n\n .hy-hero--white & {\n color: var(--grayscale-black);\n }\n}\n\n.hy-hero__actions {\n margin-top: 24px;\n}\n\n.hy-hero__image-container {\n margin: 0;\n padding: 0;\n position: relative;\n\n figure {\n margin: 0;\n }\n\n @include breakpoint($wide) {\n order: 2;\n padding: 8px 0;\n }\n\n .hy-hero--front_page & {\n @include breakpoint($wide) {\n padding: 0;\n }\n }\n}\n\n.hy-image__image {\n display: block;\n height: 100%;\n min-height: 205px;\n object-fit: contain;\n width: 100%;\n\n .has-cover & {\n object-fit: cover;\n }\n}\n\n// Research group and generic with minor landing\n.hy-hero.hy-hero--group_landing.hy-hero--generic_site_group,\n.hy-hero.hy-hero--research_group {\n h2.hy-hero__title.hy-heading__hero {\n @include font-size(32px, 38px);\n @include font-weight($bold);\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n letter-spacing: -0.8px;\n margin-bottom: 0;\n text-transform: uppercase;\n\n @include breakpoint(1024px) {\n @include font-size(46px, 54px);\n letter-spacing: -1.15px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(52px, 60px);\n letter-spacing: -1.3px;\n }\n }\n}\n\n// FRONTPAGE VARIATION\n\n.hy-hero.hy-hero--front_page {\n &.hy-hero--white {\n @include breakpoint($wide) {\n padding-top: 40px;\n margin-top: 0;\n }\n }\n\n h2.hy-hero__title.hy-heading__hero {\n @include font-size(32px, 38px);\n @include font-weight($bold);\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n letter-spacing: -0.8px;\n margin-bottom: 0;\n text-transform: uppercase;\n\n @include breakpoint(1024px) {\n @include font-size(46px, 54px);\n letter-spacing: -1.15px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(52px, 60px);\n letter-spacing: -1.3px;\n }\n }\n\n @include breakpoint($extrawide) {\n margin-left: -32px;\n margin-right: -32px;\n max-width: none;\n }\n\n .hy-hero__container {\n position: relative;\n\n @include breakpoint($wide) {\n display: flex;\n position: relative;\n }\n }\n\n .hy-hero__content-container {\n padding: 24px 1rem 40px;\n margin: 0 auto;\n width: 100%;\n\n .hy-hero--black & {\n background-color: var(--grayscale-black);\n }\n\n .hy-hero--blue & {\n background-color: var(--brand-main);\n }\n\n .hy-hero--white & {\n background-color: var(--grayscale-white);\n }\n\n @include breakpoint($narrow) {\n padding: 24px 2rem 40px;\n }\n\n @include breakpoint($wide) {\n align-items: center;\n display: flex;\n min-height: 330px;\n padding: 56px 2rem;\n }\n\n @include breakpoint(1060px) {\n min-height: 373px;\n }\n\n @include breakpoint(1160px) {\n min-height: 480px;\n }\n\n @include breakpoint($extrawide) {\n padding-left: 32px;\n padding-right: 8px;\n }\n\n @include breakpoint(1260px) {\n min-height: 443px;\n }\n\n @include breakpoint(1280px) {\n max-width: 1216px;\n padding-left: 0;\n }\n\n @include breakpoint(1360px) {\n min-height: 478px;\n }\n\n @include breakpoint(1460px) {\n min-height: 513px;\n }\n\n @include breakpoint(1560px) {\n min-height: 548px;\n }\n\n @include breakpoint($xlarge) {\n padding-left: 0;\n }\n\n @include breakpoint(1660px) {\n min-height: 583px;\n }\n\n @include breakpoint(1760px) {\n min-height: 619px;\n }\n\n @include breakpoint(1860px) {\n min-height: 654px;\n }\n\n @include breakpoint(1920px) {\n min-height: 675px;\n }\n }\n\n &.hy-hero--small {\n .hy-hero__image-container {\n @include breakpoint($wide) {\n width: 40%;\n }\n }\n\n .hy-hero__content {\n @include breakpoint($wide) {\n max-width: 60%;\n }\n }\n }\n\n &.hy-hero--large {\n .hy-hero__image-container {\n @include breakpoint($wide) {\n width: 50%;\n }\n }\n\n .hy-hero__content {\n @include breakpoint($wide) {\n max-width: 50%;\n }\n }\n }\n\n .hy-hero__image-container {\n background-position: 50% 50%;\n background-size: cover;\n background: transparent;\n margin: 0;\n padding: 0;\n position: relative;\n\n figure {\n margin: 0;\n }\n\n @include breakpoint($wide) {\n background-color: var(--grayscale-white);\n bottom: 0;\n order: 2;\n padding: 8px 0;\n position: absolute;\n right: 0;\n top: 0;\n }\n }\n\n .hy-hero__content {\n position: relative;\n\n @include breakpoint($wide) {\n padding-right: 24px;\n }\n }\n\n .hy-image__image {\n display: block;\n height: 100%;\n min-height: 205px;\n object-fit: cover;\n width: 100%;\n }\n}\n\n.hy-hero__spacer-box {\n display: none;\n\n @include breakpoint($wide) {\n display: block;\n order: 1;\n position: absolute;\n inset: 0;\n }\n\n .hy-hero--small & {\n @include breakpoint($wide) {\n width: 60%;\n }\n }\n\n .hy-hero--large & {\n @include breakpoint($wide) {\n width: 50%;\n }\n }\n\n .hy-hero--black & {\n background-color: var(--grayscale-black);\n }\n\n .hy-hero--blue & {\n background-color: var(--brand-main);\n }\n\n .hy-hero--white & {\n background-color: var(--grayscale-white);\n }\n}\n","export interface ImageSrcSet {\n src: any;\n media: string;\n type: string;\n sizes: string \| null;\n}\nlet timeout = null;\nlet delay = 250;\n\nimport {Component, Element, h, Host, Prop} from \"@stencil/core\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\nimport {\n CtaLinkButtonVariants,\n HeroColorVariant,\n HeroSizeVariant,\n HeroGroupTypeVariant,\n HeroTypeVariant,\n HeroTextColor,\n} from \"../../utils/utils\";\n\n@Component({\n tag: \"hy-hero\",\n styleUrl: \"hy-hero.scss\",\n shadow: false,\n})\nexport class HyHero {\n @Element() el: HTMLElement;\n @Prop() heroType: HeroTypeVariant = HeroTypeVariant.landing;\n @Prop() heroGroupType: HeroGroupTypeVariant = HeroGroupTypeVariant.default;\n @Prop() colorVariant: HeroColorVariant = HeroColorVariant.blue;\n @Prop() sizeVariant: HeroSizeVariant = HeroSizeVariant.large;\n @Prop() heroTextColor: HeroTextColor = null;\n @Prop() image: string;\n @Prop() imageHeight: number = null;\n @Prop() imageWidth: number = null;\n @Prop() imageAltText: string = \"\";\n @Prop() disableLazy: boolean = false;\n @Prop() hasShortcuts: boolean = false;\n @Prop() heading: string;\n @Prop() description: string;\n @Prop() subtitle: string;\n @Prop() url: string;\n @Prop() urlTitle: string;\n @Prop() scLabel?: string;\n @Prop() isExternal: boolean = false;\n private _sourceSet: ImageSrcSet[];\n @Prop() sourceSet: ImageSrcSet[] \| string;\n\n async componentWillLoad() {\n this._sourceSet = await jsonParserWorker(this.sourceSet);\n }\n\n // TODO: Refactor, find way to get rid of this.\n handleHeroImageObjectFitValue(heroSizeVariant, heroElement) {\n const heroContentContainerElement = heroElement.getElementsByClassName(\n \"hy-hero__content-container\"\n )[0] as HTMLElement;\n\n if (heroSizeVariant === \"small\") {\n if (heroContentContainerElement.offsetHeight >= 300) {\n heroElement.classList.add(\"has-cover\");\n } else {\n heroElement.classList.remove(\"has-cover\");\n }\n }\n\n if (heroSizeVariant === \"large\") {\n if (heroContentContainerElement.offsetHeight >= 344) {\n heroElement.classList.add(\"has-cover\");\n } else {\n heroElement.classList.remove(\"has-cover\");\n }\n }\n }\n\n createImageElement(props, srcSet, aspectRatio) {\n return (\n <div class={`hy-hero__image-container`} style={aspectRatio}>\n {props.image &&\n (srcSet ? (\n <picture>\n {srcSet.map((item) => (\n <source\n srcSet={item.src}\n media={item.media}\n type={item.type}\n sizes={item.sizes ? item.sizes : \"\"}\n />\n ))}\n <img\n loading={props.disableLazy ? \"eager\" : \"lazy\"}\n alt={props.imageAltText}\n class={`hy-image__image`}\n src={props.image}\n height={props.imageHeight}\n width={props.imageWidth}\n />\n </picture>\n ) : (\n <img\n loading={props.disableLazy ? \"eager\" : \"lazy\"}\n alt={props.imageAltText}\n class={`hy-image__image`}\n src={props.image}\n height={props.imageHeight}\n width={props.imageWidth}\n />\n ))}\n </div>\n );\n }\n\n // TODO: Refactor, is this still even used?\n setAspectRatio(aspectRatioWidth = 16, aspectRatioHeight = 10) {\n const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;\n return {\n \"--aspectRatio\": `${aspect}%` as \"aspectRatio\",\n //\"aspect-ratio\": `${aspectRatioWidth} / ${aspectRatioHeight}` as \"aspectRatio\",\n };\n }\n\n render() {\n let variant = CtaLinkButtonVariants.heroWhite;\n let colorVariantValue = this.colorVariant;\n let heroTypeValue = this.heroType;\n\n //TODO: Refactor\n if (this.heroType === \"minor_landing\") {\n colorVariantValue = HeroColorVariant.white;\n heroTypeValue = HeroTypeVariant.landing;\n }\n\n if (colorVariantValue === HeroColorVariant.blue) {\n variant = CtaLinkButtonVariants.heroBlue;\n }\n\n if (colorVariantValue === HeroColorVariant.black) {\n variant = CtaLinkButtonVariants.heroBlack;\n }\n\n if (!colorVariantValue \|\| colorVariantValue === \"fp_white\") {\n colorVariantValue = HeroColorVariant.white;\n }\n\n const hyHeroClasses = [\n \"hy-hero\",\n `hy-hero--${heroTypeValue}`,\n `hy-hero--${this.heroGroupType}`,\n `hy-hero--${colorVariantValue}`,\n `hy-hero--${this.sizeVariant}`,\n this.hasShortcuts ? 'has-shortcuts' : '',\n ];\n\n const heroTitleClasses = [\"hy-hero__title\", \"hy-heading__hero\"].join(\" \");\n\n // TODO: Refactor, find way to get rid of this.\n window.onload = () => {\n const heroElement = document.getElementsByClassName(\"hy-hero\")[0] as HTMLElement;\n this.handleHeroImageObjectFitValue(this.sizeVariant, heroElement);\n window.addEventListener(\"resize\", () => {\n clearTimeout(timeout);\n timeout = setTimeout(() => this.handleHeroImageObjectFitValue(this.sizeVariant, heroElement), delay);\n });\n };\n\n if (heroTypeValue === \"front_page\" && this.sizeVariant !== 'full-image') {\n return (\n <Host>\n <div class={hyHeroClasses.join(\" \")}>\n <div class={`hy-hero__container`}>\n {this.createImageElement(this, this._sourceSet, this.setAspectRatio())}\n <div class={`hy-hero__spacer-box`}></div>\n <div class={`hy-hero__content-container`}>\n <div class={`hy-hero__content`}>\n <div class={`hy-hero__title-container`}>\n <h2 innerHTML={this.heading} class={heroTitleClasses}></h2>\n </div>\n {this.description && <p class={`hy-hero__description`}>{this.description}</p>}\n {this.url && (\n <div class={`hy-hero__actions`}>\n <hy-cta-button\n link-content={this.urlTitle}\n sc-label={this.scLabel}\n url={this.url}\n is-external={this.isExternal}\n variant={variant}\n />\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n <hy-box mb=\"2, 2, 1, 1\" />\n </Host>\n );\n }\n\n if (this.sizeVariant === 'full-image') {\n const linkTarget = this.isExternal ? '_blank' : '_self';\n return (\n <div class={`hy-hero hy-hero--full-image`}>\n <div class={`hy-hero__container`}>\n {this.createImageElement(this, this._sourceSet, this.setAspectRatio(16, 8))}\n <div class={`hy-hero__content-container`}>\n <div class={`hy-hero__content`} data-text-color={this.heroTextColor}>\n {this.subtitle && <span class={`hy-hero__subtitle`}>{this.subtitle}</span>}\n <h2 innerHTML={this.heading} class={heroTitleClasses}></h2>\n {this.description && <p class={`hy-hero__description`}>{this.description}</p>}\n {this.url && (\n <div class={`hy-hero__actions`}>\n <a class=\"hy-hero__link\" href={this.url} aria-label={this.scLabel} target={linkTarget} data-text-color={this.heroTextColor}>\n {this.urlTitle}\n <hy-icon icon={\"hy-icon-arrow-right\"} size={16} />\n </a>\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n );\n }\n\n return (\n <Host>\n <div class={hyHeroClasses.join(\" \")}>\n <div class={`hy-hero__container`}>\n {this.createImageElement(this, this._sourceSet, this.setAspectRatio())}\n <div class={`hy-hero__content-container`}>\n <div class={`hy-hero__content`}>\n <div class={`hy-hero__title-container`}>\n <h2 innerHTML={this.heading} class={heroTitleClasses}></h2>\n </div>\n {this.description && <p class={`hy-hero__description`}>{this.description}</p>}\n {this.url && (\n <div class={`hy-hero__actions`}>\n <hy-cta-button\n link-content={this.urlTitle}\n sc-label={this.scLabel}\n url={this.url}\n is-external={this.isExternal}\n variant={variant}\n />\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n <hy-box mb=\"2, 2, 1, 1\" />\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"hy-hero.entry.cjs.js","mappings":"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","names":["HeroTypeVariant","HeroGroupTypeVariant","HeroColorVariant","HeroSizeVariant","jsonParserWorker","h","CtaLinkButtonVariants","Host"],"sources":["./src/components/hy-hero/hy-hero.scss?tag=hy-hero","./src/components/hy-hero/hy-hero.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-hero {\n position: relative;\n padding-bottom: 0;\n\n &:not(.hy-hero--full-image) {\n @include breakpoint($wide) {\n margin-top: 32px;\n }\n }\n\n &:not(.has-shortcuts) {\n @include breakpoint($wide) {\n margin-bottom: 32px;\n }\n }\n\n .without-sidebar & {\n @include breakpoint($extrawide) {\n max-width: 1216px;\n margin-right: auto;\n margin-left: auto;\n }\n }\n\n .with-sidebar:not(.hy-hero--full-image) & {\n @include breakpoint($extrawide) {\n padding-left: 32px;\n padding-right: 32px;\n }\n\n @include breakpoint($xlarge) {\n padding-right: 0;\n padding-left: 0;\n max-width: 1216px;\n margin-right: auto;\n margin-left: auto;\n }\n }\n\n /*\n Full image variation\n /\n &--full-image {\n --dark-bg: rgba(0, 0, 0, 0.55);\n --light-bg: rgba(255, 255, 255, 0.5);\n --dark-text: var(--brand-main-nearly-black);\n --light-text: var(--grayscale-white);\n\n border-bottom: 1px solid var(--grayscale-medium-dark);\n\n @include breakpoint($wide) {\n border-bottom: 4px solid var(--grayscale-black);\n margin-left: -2rem;\n margin-right: -2rem;\n }\n\n .without-sidebar & {\n @include breakpoint($extrawide) {\n max-width: none;\n margin-left: -2rem;\n margin-right: -2rem;\n }\n }\n\n .hy-hero__container {\n grid-template-columns: repeat(4, 1fr);\n grid-template-rows: 1fr;\n }\n\n .hy-hero__image-container {\n grid-column: 1 / -1;\n grid-row: 1 / -1;\n object-fit: cover;\n padding: 0;\n width: 100%;\n img {\n aspect-ratio: 16 / 8;\n }\n }\n\n .hy-hero__content-container {\n padding: 0;\n\n @include breakpoint($wide) {\n align-self: center;\n grid-column: 1 / 3;\n grid-row: 1 / -1;\n margin-left: 32px;\n max-width: 95%;\n z-index: 2;\n }\n @include breakpoint($extrawide) {\n margin-left: 0;\n }\n }\n\n .hy-hero__content {\n display: flex;\n flex-direction: column;\n gap: 24px;\n padding: 16px 16px 32px 16px;\n\n @include breakpoint($wide) {\n margin-left: 32px;\n gap: 24px;\n padding: 32px;\n }\n @include breakpoint($extrawide) {\n margin-left: 64px;\n gap: 32px;\n }\n @include breakpoint($xlarge) {\n margin-left: 96px;\n }\n\n &[data-text-color=\"dark_text_light_bg\"] {\n backdrop-filter: blur(250px);\n background-color: var(--grayscale-white);\n color: var(--dark-text);\n\n @include breakpoint($wide) {\n background: var(--light-bg);\n }\n }\n &[data-text-color=\"light_text_dark_bg\"] {\n backdrop-filter: blur(250px);\n background: var(--grayscale-black);\n color: var(--light-text);\n\n @include breakpoint($wide) {\n background: var(--dark-bg);\n }\n }\n &[data-text-color=\"dark_text_no_bg\"] {\n background-color: var(--grayscale-white);\n color: var(--dark-text);\n\n @include breakpoint($wide) {\n background: transparent;\n text-shadow: 0 0 5px var(--grayscale-white);\n }\n }\n &[data-text-color=\"light_text_no_bg\"] {\n background-color: var(--grayscale-black);\n color: var(--light-text);\n\n @include breakpoint($wide) {\n background: transparent;\n text-shadow: 0 0 5px var(--grayscale-black);\n }\n }\n }\n\n .hy-hero__subtitle {\n font-family: var(--main-font-family);\n font-size: 18px;\n font-weight: 700;\n line-height: 1.2;\n position: relative;\n\n &::after {\n aspect-ratio: 1;\n background-color: currentColor;\n bottom: -10px;\n content: \"\";\n display: block;\n height: 4px;\n left: 0;\n position: absolute;\n width: 64px;\n }\n\n @include breakpoint($wide) {\n font-size: 20px;\n }\n }\n\n h2.hy-hero__title.hy-heading__hero {\n color: inherit !important;\n font-family: var(--main-font-family);\n font-size: 32px;\n font-weight: 700;\n line-height: 1.2;\n\n @include breakpoint($extrawide) {\n font-size: 36px;\n }\n\n @include breakpoint($xlarge) {\n font-size: 64px;\n }\n }\n\n .hy-hero__description {\n font-family: var(--main-font-family);\n font-size: 16px;\n font-weight: 400;\n line-height: 1.5;\n margin: 0;\n padding: 0;\n\n @include breakpoint($xlarge) {\n font-size: 17px;\n }\n }\n\n .hy-hero__actions {\n margin: 0;\n\n .hy-hero__link {\n --light-bg: var(--grayscale-white);\n --dark-bg: var(--grayscale-black);\n --light-text: var(--grayscale-white);\n --dark-text: var(--grayscale-black);\n\n align-items: center;\n display: flex;\n font-family: var(--main-font-family);\n font-size: 16px;\n font-weight: 700;\n gap: 8px;\n line-height: 18px;\n padding: 13px 16px;\n text-decoration: none;\n width: fit-content;\n\n &:hover {\n text-decoration: underline;\n }\n\n svg {\n width: 16px;\n height: 16px;\n }\n\n &[data-text-color=\"dark_text_light_bg\"] {\n background: var(--dark-bg);\n color: var(--light-text);\n svg {\n fill: var(--light-text);\n }\n }\n &[data-text-color=\"light_text_dark_bg\"] {\n background: var(--light-bg);\n color: var(--dark-text);\n svg {\n fill: var(--dark-text);\n }\n }\n &[data-text-color=\"dark_text_no_bg\"] {\n background: var(--dark-bg);\n color: var(--light-text);\n text-shadow: none;\n svg {\n fill: var(--light-text);\n }\n }\n &[data-text-color=\"light_text_no_bg\"] {\n background: var(--light-bg);\n color: var(--dark-text);\n text-shadow: none;\n svg {\n fill: var(--dark-text);\n }\n }\n }\n }\n\n .hy-image__image {\n object-fit: cover;\n }\n }\n\n /\n * White variation\n /\n &--white {\n @include breakpoint($wide) {\n margin-top: 0;\n }\n\n &:not(.has-shortcuts) {\n @include breakpoint($wide) {\n padding-bottom: 48px;\n }\n }\n\n &:not(.has-shortcuts):after {\n width: 100%;\n background-color: var(--grayscale-medium-dark);\n height: 1px;\n content: \"\";\n margin: 0 auto;\n display: block;\n\n @include breakpoint($wide) {\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n }\n }\n\n &:not(.hy-hero--front_page):after {\n max-width: 1216px;\n }\n }\n}\n\n.hy-hero__container {\n position: relative;\n\n @include breakpoint($wide) {\n display: grid;\n position: relative;\n }\n\n .hy-hero--small & {\n @include breakpoint($wide) {\n grid-template-columns: 60% 1fr;\n }\n }\n\n .hy-hero--large & {\n @include breakpoint($wide) {\n grid-template-columns: repeat(2, 1fr);\n }\n }\n}\n\n.hy-hero__content-container {\n padding: 24px 1rem 40px;\n margin: 0 auto;\n width: 100%;\n\n @include breakpoint($narrow) {\n padding: 40px 2rem;\n }\n\n @include breakpoint($extrawide) {\n align-items: center;\n display: flex;\n padding: 40px 24px;\n }\n\n @include breakpoint($xlarge) {\n max-width: 1216px;\n }\n\n .hy-hero--black & {\n background-color: var(--grayscale-black);\n }\n\n .hy-hero--blue & {\n background-color: var(--brand-main);\n }\n\n .hy-hero--white & {\n background-color: var(--grayscale-white);\n\n @include breakpoint($extrawide) {\n padding: 40px 24px 40px 0;\n }\n }\n}\n\n.hy-hero__content {\n position: relative;\n}\n\nh2.hy-hero__title {\n hyphens: auto;\n display: flex;\n flex-grow: 1;\n flex-shrink: 0;\n max-width: 100%;\n width: auto;\n\n .hy-hero--blue & {\n color: var(--grayscale-white) !important;\n }\n\n .hy-hero--black & {\n color: var(--grayscale-white) !important;\n }\n\n .hy-hero--white & {\n color: var(--grayscale-black) !important;\n }\n\n &.hy-heading__hero {\n @include font-size(36px, 33px);\n @include font-weight($bold);\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n letter-spacing: -0.8px;\n margin-bottom: 0;\n text-transform: none;\n text-wrap: balance;\n\n @include breakpoint(1024px) {\n @include font-size(36px, 40px);\n letter-spacing: -1.15px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(38px, 48px);\n letter-spacing: -1.3px;\n }\n }\n}\n\n.hy-hero__description {\n @include font-size(16px, 24px);\n font-family: var(--main-font-family);\n margin: 16px 0 0 0;\n padding: 0;\n position: relative;\n text-wrap: pretty;\n\n @include breakpoint($xlarge) {\n @include font-size(17px, 26px);\n }\n\n .hy-hero--black & {\n color: var(--grayscale-white);\n }\n\n .hy-hero--blue & {\n color: var(--grayscale-white);\n }\n\n .hy-hero--white & {\n color: var(--grayscale-black);\n }\n}\n\n.hy-hero__actions {\n margin-top: 24px;\n}\n\n.hy-hero__image-container {\n margin: 0;\n padding: 0;\n position: relative;\n\n figure {\n margin: 0;\n }\n\n @include breakpoint($wide) {\n order: 2;\n padding: 8px 0;\n }\n\n .hy-hero--front_page & {\n @include breakpoint($wide) {\n padding: 0;\n }\n }\n}\n\n.hy-image__image {\n aspect-ratio: var(--aspect-ratio);\n display: block;\n height: 100%;\n min-height: 205px;\n object-fit: contain;\n width: 100%;\n\n .has-cover & {\n object-fit: cover;\n }\n}\n\n/\n* Research group and generic with minor landing\n/\n.hy-hero.hy-hero--group_landing.hy-hero--generic_site_group,\n.hy-hero.hy-hero--research_group {\n h2.hy-hero__title.hy-heading__hero {\n @include font-size(32px, 38px);\n @include font-weight($bold);\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n letter-spacing: -0.8px;\n margin-bottom: 0;\n text-transform: uppercase;\n\n @include breakpoint(1024px) {\n @include font-size(46px, 54px);\n letter-spacing: -1.15px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(52px, 60px);\n letter-spacing: -1.3px;\n }\n }\n}\n\n/\n* FRONTPAGE VARIATION\n**/\n.hy-hero.hy-hero--front_page {\n &.hy-hero--white {\n @include breakpoint($wide) {\n padding-top: 40px;\n margin-top: 0;\n }\n }\n\n h2.hy-hero__title.hy-heading__hero {\n @include font-size(32px, 38px);\n @include font-weight($bold);\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n letter-spacing: -0.8px;\n margin-bottom: 0;\n text-transform: uppercase;\n\n @include breakpoint(1024px) {\n @include font-size(46px, 54px);\n letter-spacing: -1.15px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(52px, 60px);\n letter-spacing: -1.3px;\n }\n }\n\n @include breakpoint($extrawide) {\n margin-left: -32px;\n margin-right: -32px;\n max-width: none;\n }\n\n .hy-hero__container {\n position: relative;\n\n @include breakpoint($wide) {\n display: flex;\n position: relative;\n }\n }\n\n .hy-hero__content-container {\n padding: 24px 1rem 40px;\n margin: 0 auto;\n width: 100%;\n min-height: clamp(330px, 50%, 675px);\n .hy-hero--black & {\n background-color: var(--grayscale-black);\n }\n\n .hy-hero--blue & {\n background-color: var(--brand-main);\n }\n\n .hy-hero--white & {\n background-color: var(--grayscale-white);\n }\n\n @include breakpoint($narrow) {\n padding: 24px 2rem 40px;\n }\n\n @include breakpoint($wide) {\n align-items: center;\n display: flex;\n min-height: 330px;\n padding: 56px 2rem;\n }\n\n @include breakpoint(1060px) {\n min-height: 373px;\n }\n\n @include breakpoint(1160px) {\n min-height: 480px;\n }\n\n @include breakpoint($extrawide) {\n padding-left: 32px;\n padding-right: 8px;\n }\n\n @include breakpoint(1260px) {\n min-height: 443px;\n }\n\n @include breakpoint(1280px) {\n max-width: 1216px;\n padding-left: 0;\n }\n\n @include breakpoint(1360px) {\n min-height: 478px;\n }\n\n @include breakpoint(1460px) {\n min-height: 513px;\n }\n\n @include breakpoint(1560px) {\n min-height: 548px;\n }\n\n @include breakpoint($xlarge) {\n padding-left: 0;\n }\n\n @include breakpoint(1660px) {\n min-height: 583px;\n }\n\n @include breakpoint(1760px) {\n min-height: 619px;\n }\n\n @include breakpoint(1860px) {\n min-height: 654px;\n }\n\n @include breakpoint(1920px) {\n min-height: 675px;\n }\n }\n\n &.hy-hero--small {\n .hy-hero__image-container {\n @include breakpoint($wide) {\n width: 40%;\n }\n }\n\n .hy-hero__content {\n @include breakpoint($wide) {\n max-width: 60%;\n }\n }\n }\n\n &.hy-hero--large {\n .hy-hero__image-container {\n @include breakpoint($wide) {\n width: 50%;\n }\n }\n\n .hy-hero__content {\n @include breakpoint($wide) {\n max-width: 50%;\n }\n }\n }\n\n .hy-hero__image-container {\n background-position: 50% 50%;\n background-size: cover;\n background: transparent;\n margin: 0;\n padding: 0;\n position: relative;\n\n figure {\n margin: 0;\n }\n\n @include breakpoint($wide) {\n background-color: var(--grayscale-white);\n bottom: 0;\n order: 2;\n padding: 8px 0;\n position: absolute;\n right: 0;\n top: 0;\n }\n }\n\n .hy-hero__content {\n position: relative;\n\n @include breakpoint($wide) {\n padding-right: 24px;\n }\n }\n\n .hy-image__image {\n display: block;\n height: 100%;\n min-height: 205px;\n object-fit: cover;\n width: 100%;\n }\n}\n\n.hy-hero__spacer-box {\n display: none;\n\n @include breakpoint($wide) {\n display: block;\n order: 1;\n position: absolute;\n inset: 0;\n }\n\n .hy-hero--small & {\n @include breakpoint($wide) {\n width: 60%;\n }\n }\n\n .hy-hero--large & {\n @include breakpoint($wide) {\n width: 50%;\n }\n }\n\n .hy-hero--black & {\n background-color: var(--grayscale-black);\n }\n\n .hy-hero--blue & {\n background-color: var(--brand-main);\n }\n\n .hy-hero--white & {\n background-color: var(--grayscale-white);\n }\n}\n","export interface ImageSrcSet {\n src: any;\n media: string;\n type: string;\n sizes: string \| null;\n}\n\nimport {Component, Element, h, Host, Prop} from \"@stencil/core\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\nimport {\n CtaLinkButtonVariants,\n HeroColorVariant,\n HeroSizeVariant,\n HeroGroupTypeVariant,\n HeroTypeVariant,\n HeroTextColor,\n} from \"../../utils/utils\";\n\n@Component({\n tag: \"hy-hero\",\n styleUrl: \"hy-hero.scss\",\n shadow: false,\n})\nexport class HyHero {\n @Element() el: HTMLElement;\n @Prop() heroType: HeroTypeVariant = HeroTypeVariant.landing;\n @Prop() heroGroupType: HeroGroupTypeVariant = HeroGroupTypeVariant.default;\n @Prop() colorVariant: HeroColorVariant = HeroColorVariant.blue;\n @Prop() sizeVariant: HeroSizeVariant = HeroSizeVariant.large;\n @Prop() heroTextColor: HeroTextColor = null;\n @Prop() image: string;\n @Prop() imageHeight: number = null;\n @Prop() imageWidth: number = null;\n @Prop() imageAltText: string = \"\";\n @Prop() disableLazy: boolean = false;\n @Prop() hasShortcuts: boolean = false;\n @Prop() heading: string;\n @Prop() description: string;\n @Prop() subtitle: string;\n @Prop() url: string;\n @Prop() urlTitle: string;\n @Prop() scLabel?: string;\n @Prop() isExternal: boolean = false;\n private _sourceSet: ImageSrcSet[];\n @Prop() sourceSet: ImageSrcSet[] \| string;\n\n async componentWillLoad() {\n this._sourceSet = await jsonParserWorker(this.sourceSet);\n }\n\n createImageElement(props, srcSet, aspectRatio) {\n return (\n <div class={`hy-hero__image-container`} style={aspectRatio}>\n {props.image &&\n (srcSet ? (\n <picture>\n {srcSet.map((item) => (\n <source srcSet={item.src} media={item.media} type={item.type} sizes={item.sizes ? item.sizes : \"\"} />\n ))}\n <img\n loading={props.disableLazy ? \"eager\" : \"lazy\"}\n alt={props.imageAltText}\n class={`hy-image__image`}\n src={props.image}\n height={props.imageHeight}\n width={props.imageWidth}\n />\n </picture>\n ) : (\n <img\n loading={props.disableLazy ? \"eager\" : \"lazy\"}\n alt={props.imageAltText}\n class={`hy-image__image`}\n src={props.image}\n height={props.imageHeight}\n width={props.imageWidth}\n />\n ))}\n </div>\n );\n }\n\n render() {\n let variant = CtaLinkButtonVariants.heroWhite;\n let colorVariantValue = this.colorVariant;\n let heroTypeValue = this.heroType;\n\n if (this.heroType === \"minor_landing\") {\n colorVariantValue = HeroColorVariant.white;\n heroTypeValue = HeroTypeVariant.landing;\n }\n\n if (colorVariantValue === HeroColorVariant.blue) {\n variant = CtaLinkButtonVariants.heroBlue;\n }\n\n if (colorVariantValue === HeroColorVariant.black) {\n variant = CtaLinkButtonVariants.heroBlack;\n }\n\n if (!colorVariantValue \|\| colorVariantValue === \"fp_white\") {\n colorVariantValue = HeroColorVariant.white;\n }\n\n const hyHeroClasses = [\n \"hy-hero\",\n `hy-hero--${heroTypeValue}`,\n `hy-hero--${this.heroGroupType}`,\n `hy-hero--${colorVariantValue}`,\n `hy-hero--${this.sizeVariant}`,\n this.hasShortcuts ? \"has-shortcuts\" : \"\",\n ];\n\n const heroTitleClasses = [\"hy-hero__title\", \"hy-heading__hero\"].join(\" \");\n\n if (heroTypeValue === \"front_page\" && this.sizeVariant !== \"full-image\") {\n return (\n <Host>\n <div class={hyHeroClasses.join(\" \")}>\n <div class={`hy-hero__container`}>\n {this.createImageElement(this, this._sourceSet, {\"--aspect-ratio\": \"16 / 10\"})}\n <div class={`hy-hero__spacer-box`}></div>\n <div class={`hy-hero__content-container`}>\n <div class={`hy-hero__content`}>\n <div class={`hy-hero__title-container`}>\n <h2 innerHTML={this.heading} class={heroTitleClasses}></h2>\n </div>\n {this.description && <p class={`hy-hero__description`}>{this.description}</p>}\n {this.url && (\n <div class={`hy-hero__actions`}>\n <hy-cta-button\n link-content={this.urlTitle}\n sc-label={this.scLabel}\n url={this.url}\n is-external={this.isExternal}\n variant={variant}\n />\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n <hy-box mb=\"2, 2, 1, 1\" />\n </Host>\n );\n }\n\n if (this.sizeVariant === \"full-image\") {\n const linkTarget = this.isExternal ? \"_blank\" : \"_self\";\n return (\n <div class={`hy-hero hy-hero--full-image`}>\n <div class={`hy-hero__container`}>\n {this.createImageElement(this, this._sourceSet, {\"--aspect-ratio\": \"16 / 8\"})}\n <div class={`hy-hero__content-container`}>\n <div class={`hy-hero__content`} data-text-color={this.heroTextColor}>\n {this.subtitle && <span class={`hy-hero__subtitle`}>{this.subtitle}</span>}\n <h2 innerHTML={this.heading} class={heroTitleClasses}></h2>\n {this.description && <p class={`hy-hero__description`}>{this.description}</p>}\n {this.url && (\n <div class={`hy-hero__actions`}>\n <a\n class=\"hy-hero__link\"\n href={this.url}\n aria-label={this.scLabel}\n target={linkTarget}\n data-text-color={this.heroTextColor}\n >\n {this.urlTitle}\n <hy-icon icon={\"hy-icon-arrow-right\"} size={16} />\n </a>\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n );\n }\n\n return (\n <Host>\n <div class={hyHeroClasses.join(\" \")}>\n <div class={`hy-hero__container`}>\n {this.createImageElement(this, this._sourceSet, {\"--aspect-ratio\": \"16 / 10\"})}\n <div class={`hy-hero__content-container`}>\n <div class={`hy-hero__content`}>\n <div class={`hy-hero__title-container`}>\n <h2 innerHTML={this.heading} class={heroTitleClasses}></h2>\n </div>\n {this.description && <p class={`hy-hero__description`}>{this.description}</p>}\n {this.url && (\n <div class={`hy-hero__actions`}>\n <hy-cta-button\n link-content={this.urlTitle}\n sc-label={this.scLabel}\n url={this.url}\n is-external={this.isExternal}\n variant={variant}\n />\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n <hy-box mb=\"2, 2, 1, 1\" />\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/collection/components/hy-content-lists/hy-content-list/hy-content-list.js CHANGED Viewed

@@ -43,39 +43,34 @@ export class HyContentList {
         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/dist/collection/components/hy-content-lists/hy-content-list/hy-content-list.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hy-content-list.js","sourceRoot":"","sources":["../../../../src/components/hy-content-lists/hy-content-list/hy-content-list.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
1	+ {"version":3,"file":"hy-content-list.js","sourceRoot":"","sources":["../../../../src/components/hy-content-lists/hy-content-list/hy-content-list.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}