@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.
- 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
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"hy-hero.entry.js","mappings":"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","names":[],"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.js","mappings":"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","names":[],"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/fonts/fonts.css
CHANGED
|
@@ -3,11 +3,11 @@
|
|
|
3
3
|
font-display: swap;
|
|
4
4
|
font-weight: 400;
|
|
5
5
|
font-style: normal;
|
|
6
|
-
src: url("./Open-Sans-regular/Open-Sans-regular.
|
|
7
|
-
src: url("./Open-Sans-regular/Open-Sans-regular.
|
|
8
|
-
local("Open-Sans-regular"), url("./Open-Sans-regular/Open-Sans-regular.ttf") format("truetype"),
|
|
9
|
-
url("./Open-Sans-regular/Open-Sans-regular.woff2") format("woff2"),
|
|
6
|
+
src: url("./Open-Sans-regular/Open-Sans-regular.woff2") format("woff");
|
|
7
|
+
src: url("./Open-Sans-regular/Open-Sans-regular.woff2") format("woff2"),
|
|
10
8
|
url("./Open-Sans-regular/Open-Sans-regular.woff") format("woff"),
|
|
9
|
+
url("./Open-Sans-regular/Open-Sans-regular.eot?#iefix") format("embedded-opentype"), local("Open Sans"),
|
|
10
|
+
local("Open-Sans-regular"), url("./Open-Sans-regular/Open-Sans-regular.ttf") format("truetype"),
|
|
11
11
|
url("./Open-Sans-regular/Open-Sans-regular.svg#OpenSans") format("svg");
|
|
12
12
|
}
|
|
13
13
|
|
|
@@ -16,10 +16,11 @@
|
|
|
16
16
|
font-display: swap;
|
|
17
17
|
font-weight: 600;
|
|
18
18
|
font-style: normal;
|
|
19
|
-
src: url("./Open-Sans-600/Open-Sans-600.
|
|
20
|
-
src: url("./Open-Sans-600/Open-Sans-600.
|
|
19
|
+
src: url("./Open-Sans-600/Open-Sans-600.woff2") format("woff");
|
|
20
|
+
src: url("./Open-Sans-600/Open-Sans-600.woff2") format("woff2"),
|
|
21
|
+
url("./Open-Sans-600/Open-Sans-600.woff") format("woff"),
|
|
22
|
+
url("./Open-Sans-600/Open-Sans-600.eot?#iefix") format("embedded-opentype"), local("Open Sans Semibold"),
|
|
21
23
|
local("Open-Sans-600"), url("./Open-Sans-600/Open-Sans-600.ttf") format("truetype"),
|
|
22
|
-
url("./Open-Sans-600/Open-Sans-600.woff2") format("woff2"), url("./Open-Sans-600/Open-Sans-600.woff") format("woff"),
|
|
23
24
|
url("./Open-Sans-600/Open-Sans-600.svg#OpenSans") format("svg");
|
|
24
25
|
}
|
|
25
26
|
|
|
@@ -28,10 +29,11 @@
|
|
|
28
29
|
font-display: swap;
|
|
29
30
|
font-weight: 700;
|
|
30
31
|
font-style: normal;
|
|
31
|
-
src: url("./Open-Sans-700/Open-Sans-700.
|
|
32
|
-
src: url("./Open-Sans-700/Open-Sans-700.
|
|
32
|
+
src: url("./Open-Sans-700/Open-Sans-700.woff2") format("woff");
|
|
33
|
+
src: url("./Open-Sans-700/Open-Sans-700.woff2") format("woff2"),
|
|
34
|
+
url("./Open-Sans-700/Open-Sans-700.woff") format("woff"),
|
|
35
|
+
url("./Open-Sans-700/Open-Sans-700.eot?#iefix") format("embedded-opentype"), local("Open Sans Bold"),
|
|
33
36
|
local("Open-Sans-700"), url("./Open-Sans-700/Open-Sans-700.ttf") format("truetype"),
|
|
34
|
-
url("./Open-Sans-700/Open-Sans-700.woff2") format("woff2"), url("./Open-Sans-700/Open-Sans-700.woff") format("woff"),
|
|
35
37
|
url("./Open-Sans-700/Open-Sans-700.svg#OpenSans") format("svg");
|
|
36
38
|
}
|
|
37
39
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,h as i,H as e,g as n}from"./index-f84f2a7d.js";import{j as a,k as r}from"./utils-2819fd7e.js";import{j as o}from"./globalScript-5a4b7abf.js";const l=":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-content-list{display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);-ms-flex-wrap:wrap;flex-wrap:wrap}.hy-content-list--no-result{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.hy-content-list--alert{margin-right:6px}.hy-content-list--alert svg{fill:var(--grayscale-dark)}@media (min-width: 1601px){.hy-content-list--alert svg{height:18px;width:18px}}@media (min-width: 87.5rem){.hy-content-list--alert--large svg{height:18px;width:18px}}.hy-content-list--alert-label{font-family:var(--main-font-family);font-size:0.9375rem;line-height:22px;color:var(--grayscale-dark);font-style:italic;letter-spacing:0}@media (min-width: 30rem){.hy-content-list--alert-label{font-size:1rem;line-height:24px}}@media (min-width: 1601px){.hy-content-list--alert-label{font-size:1.0625rem;line-height:26px}}@media (min-width: 87.5rem){.hy-content-list--alert-label--large{font-size:1.0625rem;line-height:26px}}.hy-content-list.row{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.hy-content-list.grid{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}";const s=class{constructor(i){t(this,i);this.variant=a.default;this.linkLabel="Go to course page";this.noResultLabel="No courses scheduled at the moment";this.creditsLabel="cr";this.cancelledLabel="Cancelled";this.dataItems=undefined;this.headerstyle="common";this.courseStateVariant=r.default;this.courseRealisations=[]}dataWatcher(t){this._dataItems=typeof t==="string"?JSON.parse(t):t}componentWillLoad(){this.dataWatcher(this.dataItems)}handleCardClick(t,i){t.preventDefault();let e=this.el.querySelector(`#${i}`);if(e){window.open(e.dataset.location,"_blank")}}async componentDidLoad(){let t=this.el.closest(".hy-main");if(t){if(!t.classList.contains("with-sidebar")){this.headerstyle="large"}}}renderItems(){let t=[];if(this._dataItems&&this._dataItems.length>0){this._dataItems.forEach((e=>{const n=JSON.parse(JSON.stringify(e));const r=n["courseListType"];this.variant=r=="list"?a.row:a.grid;for(const e in n){if(e=="courseListType")continue;const a=n[e];const r=a["code"];const o=a["credits"];if(a["realisations"]){const e=JSON.parse(JSON.stringify(a["realisations"]));for(const n in e){const a=e[n];const l=a["name"];const s=l+", "+o+" "+this.creditsLabel;const d=a["studyFormat"];const c=a["cancelled"];const m=a["startDate"];const h=a["endDate"];const g=a["formattedTimeRange"];const p=a["enrolmentLink"];const b=a["teachingLanguage"];const y=a["organisation"];let x=[];if(a["tags"]){let t=JSON.parse(JSON.stringify(a["tags"]));for(let i in t){let e={name:t[i]};x.push(e)}}const f=JSON.stringify(x);const w=["item",this.variant].join(" ");t.push(i("hy-content-list-item",{id:n,class:w,variant:this.variant,"state-variant":this.courseStateVariant,"course-code":r,"course-name":s,"is-cancelled":c,"cancelled-label":this.cancelledLabel,"course-credits":o,"course-tags":f,"course-start-date":m,"course-end-date":h,"formatted-time-range":g,"course-study-format":d,"course-organisation":y,"course-enrollment-link":p,"course-teaching-language":b,"course-link-label":this.linkLabel,"data-location":p,onClick:t=>this.handleCardClick(t,n)}))}}}}))}return t}render(){const t=[this.variant,"hy-content-list"].join(" ");const n=["hy-content-list--alert",`hy-content-list--alert--${this.headerstyle}`].join(" ");const a=["hy-content-list--alert-label",`hy-content-list--alert-label--${this.headerstyle}`].join(" ");this.courseRealisations=this.renderItems();if(this.courseRealisations&&this.courseRealisations.length>0){return i(e,null,i("div",{class:t},this.courseRealisations))}else{return i(e,null,i("div",{class:t},i("div",{class:"hy-content-list--no-result"},i("span",{class:n},i("hy-icon",{icon:"hy-icon-info",size:16})),i("span",{class:a},this.noResultLabel))))}}get el(){return n(this)}static get watchers(){return{dataItems:["dataWatcher"]}}};s.style=l;const d=':root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}hy-content-list-item{background:radial-gradient(circle, #f8f8f8 0%, #f5f5f5 100%);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:16px;position:relative}@media (min-width: 30rem){hy-content-list-item{margin-bottom:24px}}hy-content-list-item[variant=row],hy-content-list-item.row{max-width:100%;padding:21px 0 60px 12px;width:100%}@media (min-width: 30rem){hy-content-list-item[variant=row],hy-content-list-item.row{padding:21px 0 12px 24px}}@media (min-width: 60rem){hy-content-list-item[variant=row],hy-content-list-item.row{margin-bottom:16px}}hy-content-list-item.grid{max-width:100%;padding:21px 0 60px 12px;width:100%}@media (min-width: 30rem){hy-content-list-item.grid{margin-right:var(--gutter-medium);max-width:calc(((100% - var(--gutter-medium) * 11) / 12) * 6 + var(--gutter-medium) * 5);padding:21px 0 60px 12px;width:calc(((100% - var(--gutter-medium) * 11) / 12) * 6 + var(--gutter-medium) * 5)}}@media (min-width: 60rem){hy-content-list-item.grid{margin-bottom:27px;margin-right:var(--gutter-wide);max-width:calc(((100% - var(--gutter-wide) * 11) / 12) * 4 + var(--gutter-wide) * 3);width:calc(((100% - var(--gutter-wide) * 11) / 12) * 4 + var(--gutter-wide) * 3)}}@media (min-width: 75.0625rem){hy-content-list-item.grid{margin-bottom:32px;margin-right:var(--gutter-extrawide);max-width:calc(((100% - var(--gutter-extrawide) * 11) / 12) * 4 + var(--gutter-extrawide) * 3);width:calc(((100% - var(--gutter-extrawide) * 11) / 12) * 4 + var(--gutter-extrawide) * 3)}}@media (min-width: 30rem){hy-content-list-item.grid:nth-of-type(2n+0){margin-right:0}}@media (min-width: 60rem){hy-content-list-item.grid:nth-of-type(2n+0){margin-right:var(--gutter-wide)}}@media (min-width: 75.0625rem){hy-content-list-item.grid:nth-of-type(2n+0){margin-right:var(--gutter-extrawide)}}@media (min-width: 60rem){hy-content-list-item.grid:nth-of-type(3n+0){margin-right:0}}.hy-content-list-item{font-family:var(--main-font-family);position:relative;width:100%}.hy-content-list-item a{text-decoration:none}.hy-content-list-item--container{cursor:pointer}.hy-content-list-item--item-name{color:var(--link-blue);font-size:1.25rem;line-height:24px;font-weight:700;letter-spacing:-0.6px;margin-bottom:16px;word-break:break-word}.hy-content-list-item--item-name--past-courses{color:var(--grayscale-dark)}.hy-content-list-item--metadata{font-size:0.875rem;line-height:16px;font-weight:600;color:var(--grayscale-black);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;letter-spacing:-0.44px;line-height:16px;margin-bottom:19px;padding-bottom:0}.hy-content-list-item--metadata--item{padding-bottom:6px}@media (min-width: 30rem){.hy-content-list-item--metadata{padding-bottom:1rem}}@media (min-width: 75.0625rem){.hy-content-list-item--metadata{padding-bottom:0}}.hy-content-list-item--metadata--item:after{content:"|";padding:0 8px}.hy-content-list-item--metadata--item--last:after{content:" "}.hy-content-list-item .cancelled span{font-size:0.75rem;line-height:12px;font-weight:700;background-color:var(--additional-red-light);color:var(--grayscale-white);letter-spacing:-0.5px;padding:6px 8px;text-transform:uppercase}.hy-content-list-item .cancelled--past-courses span{background-color:var(--grayscale-dark)}.hy-content-list-item .cancelled:not(.mobile){display:none}.hy-content-list-item .cancelled.mobile{bottom:-50px;display:block;margin:0;padding-bottom:12px;position:absolute}@media (min-width: 30rem){.hy-content-list-item .cancelled{margin-right:8px}.hy-content-list-item .cancelled.mobile{display:none}.hy-content-list-item .cancelled:not(.mobile){display:block}}.hy-content-list-item--link{position:absolute;right:-6px}.hy-content-list-item--link a{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;text-decoration:none}.hy-content-list-item--link a .label{font-size:1rem;line-height:16px;font-weight:700;color:var(--link-blue);letter-spacing:-0.5px;line-height:16px;margin-right:8px;text-align:right}.hy-content-list-item--link a .icon-wrapper{background-color:var(--brand-main-light);z-index:10}.hy-content-list-item--link a .icon-wrapper .icon{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);position:relative;overflow:hidden}.hy-content-list-item--link a .icon-wrapper .icon svg{background-color:transparent;-webkit-box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.1);box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.1);fill:var(--grayscale-white);padding:10.29px}.hy-content-list-item.row .hy-content-list-item--link{bottom:-60px;padding-bottom:12px}@media (min-width: 30rem){.hy-content-list-item.row .hy-content-list-item--link{bottom:0;padding-bottom:0}}.hy-content-list-item.row .hy-content-list-item--tags{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap}@media (min-width: 60rem){.hy-content-list-item.row .hy-content-list-item--tags{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding-right:200px}}.hy-content-list-item.grid .hy-content-list-item--link{bottom:-60px;padding-bottom:12px}.hy-content-list-item.grid .hy-content-list-item--tags{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap}';let c={enter:"Enter"};const m=class{constructor(i){t(this,i);this.variant=a.default;this.stateVariant=r.default;this.courseCode=undefined;this.courseName=undefined;this.isCancelled=undefined;this.cancelledLabel="Cancelled";this.courseCredits=undefined;this.courseTags=undefined;this.courseStartDate=undefined;this.courseEndDate=undefined;this.formattedTimeRange=undefined;this.courseStudyFormat=undefined;this.courseOrganisation=undefined;this.courseEnrollmentLink=undefined;this.courseTeachingLanguage=undefined;this.courseLinkLabel=undefined}async componentWillLoad(){this._courseTags=await o(this.courseTags)}handleKeyDown(t){const i=t.code;if(i==c.enter){let t=this.el;window.open(t.dataset.location,"_blank","noopener")}}render(){const t=[this.variant,"hy-content-list-item"].join(" ");const e="_blank";const n="Link points outside the current website.";const a=["hy-content-list-item--item-name",`hy-content-list-item--item-name--${this.stateVariant}`].join(" ");const r=["cancelled",`cancelled--${this.stateVariant}`].join(" ");return[i("div",{class:t,tabindex:"0"},i("div",{class:a},this.courseName),i("div",{class:"hy-content-list-item--metadata"},this.isCancelled&&i("div",{class:r},i("span",null,this.cancelledLabel)),i("div",{class:"hy-content-list-item--metadata--item hy-content-list-item--metadata--item--first"},i("span",null,this.formattedTimeRange)),this.courseOrganisation?[i("div",{class:"hy-content-list-item--metadata--item"},i("span",null,this.courseStudyFormat)),i("div",{class:"hy-content-list-item--metadata--item hy-content-list-item--metadata--item--last"},i("span",null,this.courseOrganisation))]:[i("div",{class:"hy-content-list-item--metadata--item hy-content-list-item--metadata--item--last"},i("span",null,this.courseStudyFormat))]),this._courseTags&&this._courseTags.length>0&&i("div",{class:"hy-content-list-item--tags"},this._courseTags.map((t=>i("hy-tag",null,t.name)))),this.isCancelled&&i("div",{class:"cancelled mobile"},i("span",null,this.cancelledLabel)),i("div",{class:"hy-content-list-item--link"},i("a",{href:this.courseEnrollmentLink,target:e,"aria-label":n,class:"hy-content-list-item--link--link",tabindex:"-1"},i("span",{class:"label"},this.courseLinkLabel),i("span",{class:"icon-wrapper"},i("div",{class:"icon"},i("hy-icon",{icon:"hy-icon-arrow-to-right",size:40}))))))]}get el(){return n(this)}};m.style=d;export{s as hy_content_list,m as hy_content_list_item};
|
|
1
|
+
import{r as t,h as i,H as e,g as n}from"./index-f84f2a7d.js";import{j as a,k as r}from"./utils-2819fd7e.js";import{j as o}from"./globalScript-5a4b7abf.js";const l=":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-content-list{display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);-ms-flex-wrap:wrap;flex-wrap:wrap}.hy-content-list--no-result{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.hy-content-list--alert{margin-right:6px}.hy-content-list--alert svg{fill:var(--grayscale-dark)}@media (min-width: 1601px){.hy-content-list--alert svg{height:18px;width:18px}}@media (min-width: 87.5rem){.hy-content-list--alert--large svg{height:18px;width:18px}}.hy-content-list--alert-label{font-family:var(--main-font-family);font-size:0.9375rem;line-height:22px;color:var(--grayscale-dark);font-style:italic;letter-spacing:0}@media (min-width: 30rem){.hy-content-list--alert-label{font-size:1rem;line-height:24px}}@media (min-width: 1601px){.hy-content-list--alert-label{font-size:1.0625rem;line-height:26px}}@media (min-width: 87.5rem){.hy-content-list--alert-label--large{font-size:1.0625rem;line-height:26px}}.hy-content-list.row{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.hy-content-list.grid{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}";const s=class{constructor(i){t(this,i);this.variant=a.default;this.linkLabel="Go to course page";this.noResultLabel="No courses scheduled at the moment";this.creditsLabel="cr";this.cancelledLabel="Cancelled";this.dataItems=undefined;this.headerstyle="common";this.courseStateVariant=r.default;this.courseRealisations=[]}dataWatcher(t){this._dataItems=typeof t==="string"?JSON.parse(t):t}componentWillLoad(){this.dataWatcher(this.dataItems)}handleCardClick(t,i){t.preventDefault();let e=this.el.querySelector(`#${i}`);if(e){window.open(e.dataset.location,"_blank")}}async componentDidLoad(){let t=this.el.closest(".hy-main");if(t){if(!t.classList.contains("with-sidebar")){this.headerstyle="large"}}}renderItems(){let t=[];if(this._dataItems&&this._dataItems.length>0){this._dataItems.forEach((e=>{const n=JSON.parse(JSON.stringify(e));const r=n["courseListType"];this.variant=r=="list"?a.row:a.grid;const o=n["code"];const l=n["credits"];if(n["realisations"]){const e=JSON.parse(JSON.stringify(n["realisations"]));for(const n in e){const a=e[n];const r=a["name"];const s=r+", "+l+" "+this.creditsLabel;const d=a["studyFormat"];const c=a["cancelled"];const m=a["startDate"];const h=a["endDate"];const g=a["formattedTimeRange"];const p=a["enrolmentLink"];const b=a["teachingLanguage"];const y=a["organisation"];let x=[];if(a["tags"]){let t=JSON.parse(JSON.stringify(a["tags"]));for(let i in t){let e={name:t[i]};x.push(e)}}const f=JSON.stringify(x);const w=["item",this.variant].join(" ");t.push(i("hy-content-list-item",{id:n,class:w,variant:this.variant,"state-variant":this.courseStateVariant,"course-code":o,"course-name":s,"is-cancelled":c,"cancelled-label":this.cancelledLabel,"course-credits":l,"course-tags":f,"course-start-date":m,"course-end-date":h,"formatted-time-range":g,"course-study-format":d,"course-organisation":y,"course-enrollment-link":p,"course-teaching-language":b,"course-link-label":this.linkLabel,"data-location":p,onClick:t=>this.handleCardClick(t,n)}))}}}))}return t}render(){const t=[this.variant,"hy-content-list"].join(" ");const n=["hy-content-list--alert",`hy-content-list--alert--${this.headerstyle}`].join(" ");const a=["hy-content-list--alert-label",`hy-content-list--alert-label--${this.headerstyle}`].join(" ");this.courseRealisations=this.renderItems();if(this.courseRealisations&&this.courseRealisations.length>0){return i(e,null,i("div",{class:t},this.courseRealisations))}else{return i(e,null,i("div",{class:t},i("div",{class:"hy-content-list--no-result"},i("span",{class:n},i("hy-icon",{icon:"hy-icon-info",size:16})),i("span",{class:a},this.noResultLabel))))}}get el(){return n(this)}static get watchers(){return{dataItems:["dataWatcher"]}}};s.style=l;const d=':root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}hy-content-list-item{background:radial-gradient(circle, #f8f8f8 0%, #f5f5f5 100%);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:16px;position:relative}@media (min-width: 30rem){hy-content-list-item{margin-bottom:24px}}hy-content-list-item[variant=row],hy-content-list-item.row{max-width:100%;padding:21px 0 60px 12px;width:100%}@media (min-width: 30rem){hy-content-list-item[variant=row],hy-content-list-item.row{padding:21px 0 12px 24px}}@media (min-width: 60rem){hy-content-list-item[variant=row],hy-content-list-item.row{margin-bottom:16px}}hy-content-list-item.grid{max-width:100%;padding:21px 0 60px 12px;width:100%}@media (min-width: 30rem){hy-content-list-item.grid{margin-right:var(--gutter-medium);max-width:calc(((100% - var(--gutter-medium) * 11) / 12) * 6 + var(--gutter-medium) * 5);padding:21px 0 60px 12px;width:calc(((100% - var(--gutter-medium) * 11) / 12) * 6 + var(--gutter-medium) * 5)}}@media (min-width: 60rem){hy-content-list-item.grid{margin-bottom:27px;margin-right:var(--gutter-wide);max-width:calc(((100% - var(--gutter-wide) * 11) / 12) * 4 + var(--gutter-wide) * 3);width:calc(((100% - var(--gutter-wide) * 11) / 12) * 4 + var(--gutter-wide) * 3)}}@media (min-width: 75.0625rem){hy-content-list-item.grid{margin-bottom:32px;margin-right:var(--gutter-extrawide);max-width:calc(((100% - var(--gutter-extrawide) * 11) / 12) * 4 + var(--gutter-extrawide) * 3);width:calc(((100% - var(--gutter-extrawide) * 11) / 12) * 4 + var(--gutter-extrawide) * 3)}}@media (min-width: 30rem){hy-content-list-item.grid:nth-of-type(2n+0){margin-right:0}}@media (min-width: 60rem){hy-content-list-item.grid:nth-of-type(2n+0){margin-right:var(--gutter-wide)}}@media (min-width: 75.0625rem){hy-content-list-item.grid:nth-of-type(2n+0){margin-right:var(--gutter-extrawide)}}@media (min-width: 60rem){hy-content-list-item.grid:nth-of-type(3n+0){margin-right:0}}.hy-content-list-item{font-family:var(--main-font-family);position:relative;width:100%}.hy-content-list-item a{text-decoration:none}.hy-content-list-item--container{cursor:pointer}.hy-content-list-item--item-name{color:var(--link-blue);font-size:1.25rem;line-height:24px;font-weight:700;letter-spacing:-0.6px;margin-bottom:16px;word-break:break-word}.hy-content-list-item--item-name--past-courses{color:var(--grayscale-dark)}.hy-content-list-item--metadata{font-size:0.875rem;line-height:16px;font-weight:600;color:var(--grayscale-black);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;letter-spacing:-0.44px;line-height:16px;margin-bottom:19px;padding-bottom:0}.hy-content-list-item--metadata--item{padding-bottom:6px}@media (min-width: 30rem){.hy-content-list-item--metadata{padding-bottom:1rem}}@media (min-width: 75.0625rem){.hy-content-list-item--metadata{padding-bottom:0}}.hy-content-list-item--metadata--item:after{content:"|";padding:0 8px}.hy-content-list-item--metadata--item--last:after{content:" "}.hy-content-list-item .cancelled span{font-size:0.75rem;line-height:12px;font-weight:700;background-color:var(--additional-red-light);color:var(--grayscale-white);letter-spacing:-0.5px;padding:6px 8px;text-transform:uppercase}.hy-content-list-item .cancelled--past-courses span{background-color:var(--grayscale-dark)}.hy-content-list-item .cancelled:not(.mobile){display:none}.hy-content-list-item .cancelled.mobile{bottom:-50px;display:block;margin:0;padding-bottom:12px;position:absolute}@media (min-width: 30rem){.hy-content-list-item .cancelled{margin-right:8px}.hy-content-list-item .cancelled.mobile{display:none}.hy-content-list-item .cancelled:not(.mobile){display:block}}.hy-content-list-item--link{position:absolute;right:-6px}.hy-content-list-item--link a{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;text-decoration:none}.hy-content-list-item--link a .label{font-size:1rem;line-height:16px;font-weight:700;color:var(--link-blue);letter-spacing:-0.5px;line-height:16px;margin-right:8px;text-align:right}.hy-content-list-item--link a .icon-wrapper{background-color:var(--brand-main-light);z-index:10}.hy-content-list-item--link a .icon-wrapper .icon{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);position:relative;overflow:hidden}.hy-content-list-item--link a .icon-wrapper .icon svg{background-color:transparent;-webkit-box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.1);box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.1);fill:var(--grayscale-white);padding:10.29px}.hy-content-list-item.row .hy-content-list-item--link{bottom:-60px;padding-bottom:12px}@media (min-width: 30rem){.hy-content-list-item.row .hy-content-list-item--link{bottom:0;padding-bottom:0}}.hy-content-list-item.row .hy-content-list-item--tags{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap}@media (min-width: 60rem){.hy-content-list-item.row .hy-content-list-item--tags{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding-right:200px}}.hy-content-list-item.grid .hy-content-list-item--link{bottom:-60px;padding-bottom:12px}.hy-content-list-item.grid .hy-content-list-item--tags{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap}';let c={enter:"Enter"};const m=class{constructor(i){t(this,i);this.variant=a.default;this.stateVariant=r.default;this.courseCode=undefined;this.courseName=undefined;this.isCancelled=undefined;this.cancelledLabel="Cancelled";this.courseCredits=undefined;this.courseTags=undefined;this.courseStartDate=undefined;this.courseEndDate=undefined;this.formattedTimeRange=undefined;this.courseStudyFormat=undefined;this.courseOrganisation=undefined;this.courseEnrollmentLink=undefined;this.courseTeachingLanguage=undefined;this.courseLinkLabel=undefined}async componentWillLoad(){this._courseTags=await o(this.courseTags)}handleKeyDown(t){const i=t.code;if(i==c.enter){let t=this.el;window.open(t.dataset.location,"_blank","noopener")}}render(){const t=[this.variant,"hy-content-list-item"].join(" ");const e="_blank";const n="Link points outside the current website.";const a=["hy-content-list-item--item-name",`hy-content-list-item--item-name--${this.stateVariant}`].join(" ");const r=["cancelled",`cancelled--${this.stateVariant}`].join(" ");return[i("div",{class:t,tabindex:"0"},i("div",{class:a},this.courseName),i("div",{class:"hy-content-list-item--metadata"},this.isCancelled&&i("div",{class:r},i("span",null,this.cancelledLabel)),i("div",{class:"hy-content-list-item--metadata--item hy-content-list-item--metadata--item--first"},i("span",null,this.formattedTimeRange)),this.courseOrganisation?[i("div",{class:"hy-content-list-item--metadata--item"},i("span",null,this.courseStudyFormat)),i("div",{class:"hy-content-list-item--metadata--item hy-content-list-item--metadata--item--last"},i("span",null,this.courseOrganisation))]:[i("div",{class:"hy-content-list-item--metadata--item hy-content-list-item--metadata--item--last"},i("span",null,this.courseStudyFormat))]),this._courseTags&&this._courseTags.length>0&&i("div",{class:"hy-content-list-item--tags"},this._courseTags.map((t=>i("hy-tag",null,t.name)))),this.isCancelled&&i("div",{class:"cancelled mobile"},i("span",null,this.cancelledLabel)),i("div",{class:"hy-content-list-item--link"},i("a",{href:this.courseEnrollmentLink,target:e,"aria-label":n,class:"hy-content-list-item--link--link",tabindex:"-1"},i("span",{class:"label"},this.courseLinkLabel),i("span",{class:"icon-wrapper"},i("div",{class:"icon"},i("hy-icon",{icon:"hy-icon-arrow-to-right",size:40}))))))]}get el(){return n(this)}};m.style=d;export{s as hy_content_list,m as hy_content_list_item};
|
|
2
2
|
//# sourceMappingURL=hy-content-list_2.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["hyContentListCss","HyContentList","this","variant","CourseVariants","default","CourseStateVariants","dataWatcher","data","_dataItems","JSON","parse","componentWillLoad","dataItems","handleCardClick","e","id","preventDefault","card","el","querySelector","window","open","dataset","location","async","hyMainDiv","closest","classList","contains","headerstyle","renderItems","courseRealisations","length","forEach","item","courseObject","stringify","courseListType","row","grid","courseProperty","courseItem","courseCode","courseCredits","realisations","realisationProperty","realizationItem","courseRealisationName","courseRealisationFullName","creditsLabel","courseStudyFormat","courseCancelled","courseStartDate","courseEndDate","formattedTimeRange","courseEnrollmentLink","courseTeachingLanguage","courseOrganisation","courseTags","tags","z","tagItem","name","push","courseTagsJSON","contentListItemClassAttributes","join","h","class","courseStateVariant","cancelledLabel","linkLabel","onClick","render","classAttributes","classAlertAttributes","classAlertLabelAttributes","Host","icon","size","noResultLabel","hyContentListItemCss","keys","enter","HyContentLstItem","_courseTags","jsonParserWorker","handleKeyDown","event","key","code","target","ariaLabel","classItemName","stateVariant","classItemCancelled","tabindex","courseName","isCancelled","map","x","href","courseLinkLabel"],"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"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["hyContentListCss","HyContentList","this","variant","CourseVariants","default","CourseStateVariants","dataWatcher","data","_dataItems","JSON","parse","componentWillLoad","dataItems","handleCardClick","e","id","preventDefault","card","el","querySelector","window","open","dataset","location","async","hyMainDiv","closest","classList","contains","headerstyle","renderItems","courseRealisations","length","forEach","item","courseObject","stringify","courseListType","row","grid","courseCode","courseCredits","realisations","realisationProperty","realizationItem","courseRealisationName","courseRealisationFullName","creditsLabel","courseStudyFormat","courseCancelled","courseStartDate","courseEndDate","formattedTimeRange","courseEnrollmentLink","courseTeachingLanguage","courseOrganisation","courseTags","tags","z","tagItem","name","push","courseTagsJSON","contentListItemClassAttributes","join","h","class","courseStateVariant","cancelledLabel","linkLabel","onClick","render","classAttributes","classAlertAttributes","classAlertLabelAttributes","Host","icon","size","noResultLabel","hyContentListItemCss","keys","enter","HyContentLstItem","_courseTags","jsonParserWorker","handleKeyDown","event","key","code","target","ariaLabel","classItemName","stateVariant","classItemCancelled","tabindex","courseName","isCancelled","map","x","href","courseLinkLabel"],"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"],"mappings":"2JAAA,MAAMA,EAAmB,y5E,MCQZC,EAAa,M,yBAShBC,KAAAC,QAA0BC,EAAeC,Q,eARrB,oB,mBACI,qC,kBACD,K,oBACE,Y,0CAEH,S,wBACoBC,EAAoBD,Q,wBAGzB,E,CAMzBE,YAAYC,GAC9BN,KAAKO,kBAAoBD,IAAS,SAAWE,KAAKC,MAAMH,GAAQA,C,CAGlEI,oBACEV,KAAKK,YAAYL,KAAKW,U,CAGxBC,gBAAgBC,EAAGC,GACjBD,EAAEE,iBACF,IAAIC,EAAOhB,KAAKiB,GAAGC,cAAc,IAAIJ,KAErC,GAAIE,EAAM,CACRG,OAAOC,KAAKJ,EAAKK,QAAQC,SAAU,S,EAIvCC,yBACE,IAAIC,EAAYxB,KAAKiB,GAAGQ,QAAQ,YAChC,GAAID,EAAW,CACb,IAAKA,EAAUE,UAAUC,SAAS,gBAAiB,CACjD3B,KAAK4B,YAAc,O,GAKzBC,cACE,IAAIC,EAAqB,GACzB,GAAI9B,KAAKO,YAAcP,KAAKO,WAAWwB,OAAS,EAAG,CACjD/B,KAAKO,WAAWyB,SAASC,IACvB,MAAMC,EAAe1B,KAAKC,MAAMD,KAAK2B,UAAUF,IAE/C,MAAMG,EAAiBF,EAAa,kBACpClC,KAAKC,QAAUmC,GAAkB,OAASlC,EAAemC,IAAMnC,EAAeoC,KAE9E,MAAMC,EAAaL,EAAa,QAChC,MAAMM,EAAgBN,EAAa,WAGnC,GAAIA,EAAa,gBAAiB,CAChC,MAAMO,EAAejC,KAAKC,MAAMD,KAAK2B,UAAUD,EAAa,kBAC5D,IAAK,MAAMQ,KAAuBD,EAAc,CAC9C,MAAME,EAAkBF,EAAaC,GACrC,MAAME,EAAwBD,EAAgB,QAC9C,MAAME,EAA4BD,EAAwB,KAAOJ,EAAgB,IAAMxC,KAAK8C,aAC5F,MAAMC,EAAoBJ,EAAgB,eAC1C,MAAMK,EAAkBL,EAAgB,aACxC,MAAMM,EAAkBN,EAAgB,aACxC,MAAMO,EAAgBP,EAAgB,WACtC,MAAMQ,EAAqBR,EAAgB,sBAC3C,MAAMS,EAAuBT,EAAgB,iBAC7C,MAAMU,EAAyBV,EAAgB,oBAC/C,MAAMW,EAAqBX,EAAgB,gBAE3C,IAAIY,EAAa,GACjB,GAAIZ,EAAgB,QAAS,CAC3B,IAAIa,EAAOhD,KAAKC,MAAMD,KAAK2B,UAAUQ,EAAgB,UACrD,IAAK,IAAIc,KAAKD,EAAM,CAClB,IAAIE,EAAU,CAACC,KAAMH,EAAKC,IAC1BF,EAAWK,KAAKF,E,EAGpB,MAAMG,EAAiBrD,KAAK2B,UAAUoB,GAEtC,MAAMO,EAAiC,CAAC,OAAQ9D,KAAKC,SAAS8D,KAAK,KAEnEjC,EAAmB8B,KACjBI,EAAA,wBACElD,GAAI4B,EACJuB,MAAOH,EACP7D,QAASD,KAAKC,QAAO,gBACND,KAAKkE,mBAAkB,cACzB3B,EAAU,cACVM,EAAyB,eACxBG,EAAe,kBACZhD,KAAKmE,eAAc,iBACpB3B,EAAa,cAChBqB,EAAc,oBACRZ,EAAe,kBACjBC,EAAa,uBACRC,EAAkB,sBACnBJ,EAAiB,sBACjBO,EAAkB,yBACfF,EAAoB,2BAClBC,EAAsB,oBAC7BrD,KAAKoE,UAAS,gBAClBhB,EACfiB,QAAUxD,GAAMb,KAAKY,gBAAgBC,EAAG6B,K,MASpD,OAAOZ,C,CAGTwC,SACE,MAAMC,EAAkB,CAACvE,KAAKC,QAAS,mBAAmB8D,KAAK,KAC/D,MAAMS,EAAuB,CAAC,yBAA0B,2BAA2BxE,KAAK4B,eAAemC,KAAK,KAC5G,MAAMU,EAA4B,CAChC,+BACA,iCAAiCzE,KAAK4B,eACtCmC,KAAK,KAEP/D,KAAK8B,mBAAqB9B,KAAK6B,cAC/B,GAAI7B,KAAK8B,oBAAsB9B,KAAK8B,mBAAmBC,OAAS,EAAG,CACjE,OACEiC,EAACU,EAAI,KACHV,EAAA,OAAKC,MAAOM,GAAkBvE,KAAK8B,oB,KAGlC,CACL,OACEkC,EAACU,EAAI,KACHV,EAAA,OAAKC,MAAOM,GACVP,EAAA,OAAKC,MAAM,8BACTD,EAAA,QAAMC,MAAOO,GACXR,EAAA,WAASW,KAAM,eAAgBC,KAAM,MAEvCZ,EAAA,QAAMC,MAAOQ,GAA4BzE,KAAK6E,iB,8FClJ5D,MAAMC,EAAuB,6sNCQ7B,IAAIC,EAAO,CACTC,MAAO,S,MAQIC,EAAgB,M,sCACO/E,EAAeC,Q,kBACLC,EAAoBD,Q,mGAI/B,Y,iUAejCoB,0BACEvB,KAAKkF,kBAAoBC,EAAiBnF,KAAKuD,W,CAIjD6B,cAAcC,GACZ,MAAMC,EAAOD,EAAwBE,KACrC,GAAID,GAAOP,EAAKC,MAAO,CACrB,IAAIhE,EAAOhB,KAAKiB,GAChBE,OAAOC,KAAKJ,EAAKK,QAAQC,SAAU,SAAU,W,EAIjDgD,SACE,MAAMC,EAAkB,CAACvE,KAAKC,QAAS,wBAAwB8D,KAAK,KAEpE,MAAMyB,EAAS,SACf,MAAMC,EAAY,2CAElB,MAAMC,EAAgB,CACpB,kCACA,oCAAoC1F,KAAK2F,gBACzC5B,KAAK,KACP,MAAM6B,EAAqB,CAAC,YAAa,cAAc5F,KAAK2F,gBAAgB5B,KAAK,KAEjF,MAAO,CACLC,EAAA,OAAKC,MAAOM,EAAiBsB,SAAS,KACpC7B,EAAA,OAAKC,MAAOyB,GAAgB1F,KAAK8F,YACjC9B,EAAA,OAAKC,MAAM,kCACRjE,KAAK+F,aACJ/B,EAAA,OAAKC,MAAO2B,GACV5B,EAAA,YAAOhE,KAAKmE,iBAGhBH,EAAA,OAAKC,MAAM,oFACTD,EAAA,YAAOhE,KAAKmD,qBAEbnD,KAAKsD,mBACF,CACEU,EAAA,OAAKC,MAAM,wCACTD,EAAA,YAAOhE,KAAK+C,oBAEdiB,EAAA,OAAKC,MAAM,mFACTD,EAAA,YAAOhE,KAAKsD,sBAGhB,CACEU,EAAA,OAAKC,MAAM,mFACTD,EAAA,YAAOhE,KAAK+C,sBAIrB/C,KAAKkF,aAAelF,KAAKkF,YAAYnD,OAAS,GAC7CiC,EAAA,OAAKC,MAAM,8BACRjE,KAAKkF,YAAYc,KAAKC,GACdjC,EAAA,cAASiC,EAAEtC,SAIvB3D,KAAK+F,aACJ/B,EAAA,OAAKC,MAAM,oBACTD,EAAA,YAAOhE,KAAKmE,iBAGhBH,EAAA,OAAKC,MAAM,8BACTD,EAAA,KACEkC,KAAMlG,KAAKoD,qBACXoC,OAAQA,EAAM,aACFC,EACZxB,MAAM,mCACN4B,SAAS,MAET7B,EAAA,QAAMC,MAAM,SAASjE,KAAKmG,iBAC1BnC,EAAA,QAAMC,MAAM,gBACVD,EAAA,OAAKC,MAAM,QACTD,EAAA,WAASW,KAAM,yBAA0BC,KAAM,U"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,h as t,H as i,g as h}from"./index-f84f2a7d.js";import{j as r}from"./globalScript-5a4b7abf.js";import{H as o,a,b as n,c as l,d}from"./utils-2819fd7e.js";const g=':root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-hero{position:relative;padding-bottom:0}@media (min-width: 60rem){.hy-hero:not(.hy-hero--full-image){margin-top:32px}}@media (min-width: 60rem){.hy-hero:not(.has-shortcuts){margin-bottom:32px}}@media (min-width: 75.0625rem){.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)}';let y=null;let m=250;const c=class{constructor(t){e(this,t);this.heroType=o.landing;this.heroGroupType=a.default;this.colorVariant=n.blue;this.sizeVariant=l.large;this.heroTextColor=null;this.image=undefined;this.imageHeight=null;this.imageWidth=null;this.imageAltText="";this.disableLazy=false;this.hasShortcuts=false;this.heading=undefined;this.description=undefined;this.subtitle=undefined;this.url=undefined;this.urlTitle=undefined;this.scLabel=undefined;this.isExternal=false;this.sourceSet=undefined}async componentWillLoad(){this._sourceSet=await r(this.sourceSet)}handleHeroImageObjectFitValue(e,t){const i=t.getElementsByClassName("hy-hero__content-container")[0];if(e==="small"){if(i.offsetHeight>=300){t.classList.add("has-cover")}else{t.classList.remove("has-cover")}}if(e==="large"){if(i.offsetHeight>=344){t.classList.add("has-cover")}else{t.classList.remove("has-cover")}}}createImageElement(e,i,h){return t("div",{class:`hy-hero__image-container`,style:h},e.image&&(i?t("picture",null,i.map((e=>t("source",{srcSet:e.src,media:e.media,type:e.type,sizes:e.sizes?e.sizes:""}))),t("img",{loading:e.disableLazy?"eager":"lazy",alt:e.imageAltText,class:`hy-image__image`,src:e.image,height:e.imageHeight,width:e.imageWidth})):t("img",{loading:e.disableLazy?"eager":"lazy",alt:e.imageAltText,class:`hy-image__image`,src:e.image,height:e.imageHeight,width:e.imageWidth})))}setAspectRatio(e=16,t=10){const i=t/e*100;return{"--aspectRatio":`${i}%`}}render(){let e=d.heroWhite;let h=this.colorVariant;let r=this.heroType;if(this.heroType==="minor_landing"){h=n.white;r=o.landing}if(h===n.blue){e=d.heroBlue}if(h===n.black){e=d.heroBlack}if(!h||h==="fp_white"){h=n.white}const a=["hy-hero",`hy-hero--${r}`,`hy-hero--${this.heroGroupType}`,`hy-hero--${h}`,`hy-hero--${this.sizeVariant}`,this.hasShortcuts?"has-shortcuts":""];const l=["hy-hero__title","hy-heading__hero"].join(" ");window.onload=()=>{const e=document.getElementsByClassName("hy-hero")[0];this.handleHeroImageObjectFitValue(this.sizeVariant,e);window.addEventListener("resize",(()=>{clearTimeout(y);y=setTimeout((()=>this.handleHeroImageObjectFitValue(this.sizeVariant,e)),m)}))};if(r==="front_page"&&this.sizeVariant!=="full-image"){return t(i,null,t("div",{class:a.join(" ")},t("div",{class:`hy-hero__container`},this.createImageElement(this,this._sourceSet,this.setAspectRatio()),t("div",{class:`hy-hero__spacer-box`}),t("div",{class:`hy-hero__content-container`},t("div",{class:`hy-hero__content`},t("div",{class:`hy-hero__title-container`},t("h2",{innerHTML:this.heading,class:l})),this.description&&t("p",{class:`hy-hero__description`},this.description),this.url&&t("div",{class:`hy-hero__actions`},t("hy-cta-button",{"link-content":this.urlTitle,"sc-label":this.scLabel,url:this.url,"is-external":this.isExternal,variant:e})))))),t("hy-box",{mb:"2, 2, 1, 1"}))}if(this.sizeVariant==="full-image"){const e=this.isExternal?"_blank":"_self";return t("div",{class:`hy-hero hy-hero--full-image`},t("div",{class:`hy-hero__container`},this.createImageElement(this,this._sourceSet,this.setAspectRatio(16,8)),t("div",{class:`hy-hero__content-container`},t("div",{class:`hy-hero__content`,"data-text-color":this.heroTextColor},this.subtitle&&t("span",{class:`hy-hero__subtitle`},this.subtitle),t("h2",{innerHTML:this.heading,class:l}),this.description&&t("p",{class:`hy-hero__description`},this.description),this.url&&t("div",{class:`hy-hero__actions`},t("a",{class:"hy-hero__link",href:this.url,"aria-label":this.scLabel,target:e,"data-text-color":this.heroTextColor},this.urlTitle,t("hy-icon",{icon:"hy-icon-arrow-right",size:16})))))))}return t(i,null,t("div",{class:a.join(" ")},t("div",{class:`hy-hero__container`},this.createImageElement(this,this._sourceSet,this.setAspectRatio()),t("div",{class:`hy-hero__content-container`},t("div",{class:`hy-hero__content`},t("div",{class:`hy-hero__title-container`},t("h2",{innerHTML:this.heading,class:l})),this.description&&t("p",{class:`hy-hero__description`},this.description),this.url&&t("div",{class:`hy-hero__actions`},t("hy-cta-button",{"link-content":this.urlTitle,"sc-label":this.scLabel,url:this.url,"is-external":this.isExternal,variant:e})))))),t("hy-box",{mb:"2, 2, 1, 1"}))}get el(){return h(this)}};c.style=g;export{c as hy_hero};
|
|
1
|
+
import{r as e,h as t,H as i,g as h}from"./index-f84f2a7d.js";import{j as r}from"./globalScript-5a4b7abf.js";import{H as o,a,b as n,c as l,d}from"./utils-2819fd7e.js";const g=':root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-hero{position:relative;padding-bottom:0;}@media (min-width: 60rem){.hy-hero:not(.hy-hero--full-image){margin-top:32px}}@media (min-width: 60rem){.hy-hero:not(.has-shortcuts){margin-bottom:32px}}@media (min-width: 75.0625rem){.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)}';const y=class{constructor(t){e(this,t);this.heroType=o.landing;this.heroGroupType=a.default;this.colorVariant=n.blue;this.sizeVariant=l.large;this.heroTextColor=null;this.image=undefined;this.imageHeight=null;this.imageWidth=null;this.imageAltText="";this.disableLazy=false;this.hasShortcuts=false;this.heading=undefined;this.description=undefined;this.subtitle=undefined;this.url=undefined;this.urlTitle=undefined;this.scLabel=undefined;this.isExternal=false;this.sourceSet=undefined}async componentWillLoad(){this._sourceSet=await r(this.sourceSet)}createImageElement(e,i,h){return t("div",{class:`hy-hero__image-container`,style:h},e.image&&(i?t("picture",null,i.map((e=>t("source",{srcSet:e.src,media:e.media,type:e.type,sizes:e.sizes?e.sizes:""}))),t("img",{loading:e.disableLazy?"eager":"lazy",alt:e.imageAltText,class:`hy-image__image`,src:e.image,height:e.imageHeight,width:e.imageWidth})):t("img",{loading:e.disableLazy?"eager":"lazy",alt:e.imageAltText,class:`hy-image__image`,src:e.image,height:e.imageHeight,width:e.imageWidth})))}render(){let e=d.heroWhite;let h=this.colorVariant;let r=this.heroType;if(this.heroType==="minor_landing"){h=n.white;r=o.landing}if(h===n.blue){e=d.heroBlue}if(h===n.black){e=d.heroBlack}if(!h||h==="fp_white"){h=n.white}const a=["hy-hero",`hy-hero--${r}`,`hy-hero--${this.heroGroupType}`,`hy-hero--${h}`,`hy-hero--${this.sizeVariant}`,this.hasShortcuts?"has-shortcuts":""];const l=["hy-hero__title","hy-heading__hero"].join(" ");if(r==="front_page"&&this.sizeVariant!=="full-image"){return t(i,null,t("div",{class:a.join(" ")},t("div",{class:`hy-hero__container`},this.createImageElement(this,this._sourceSet,{"--aspect-ratio":"16 / 10"}),t("div",{class:`hy-hero__spacer-box`}),t("div",{class:`hy-hero__content-container`},t("div",{class:`hy-hero__content`},t("div",{class:`hy-hero__title-container`},t("h2",{innerHTML:this.heading,class:l})),this.description&&t("p",{class:`hy-hero__description`},this.description),this.url&&t("div",{class:`hy-hero__actions`},t("hy-cta-button",{"link-content":this.urlTitle,"sc-label":this.scLabel,url:this.url,"is-external":this.isExternal,variant:e})))))),t("hy-box",{mb:"2, 2, 1, 1"}))}if(this.sizeVariant==="full-image"){const e=this.isExternal?"_blank":"_self";return t("div",{class:`hy-hero hy-hero--full-image`},t("div",{class:`hy-hero__container`},this.createImageElement(this,this._sourceSet,{"--aspect-ratio":"16 / 8"}),t("div",{class:`hy-hero__content-container`},t("div",{class:`hy-hero__content`,"data-text-color":this.heroTextColor},this.subtitle&&t("span",{class:`hy-hero__subtitle`},this.subtitle),t("h2",{innerHTML:this.heading,class:l}),this.description&&t("p",{class:`hy-hero__description`},this.description),this.url&&t("div",{class:`hy-hero__actions`},t("a",{class:"hy-hero__link",href:this.url,"aria-label":this.scLabel,target:e,"data-text-color":this.heroTextColor},this.urlTitle,t("hy-icon",{icon:"hy-icon-arrow-right",size:16})))))))}return t(i,null,t("div",{class:a.join(" ")},t("div",{class:`hy-hero__container`},this.createImageElement(this,this._sourceSet,{"--aspect-ratio":"16 / 10"}),t("div",{class:`hy-hero__content-container`},t("div",{class:`hy-hero__content`},t("div",{class:`hy-hero__title-container`},t("h2",{innerHTML:this.heading,class:l})),this.description&&t("p",{class:`hy-hero__description`},this.description),this.url&&t("div",{class:`hy-hero__actions`},t("hy-cta-button",{"link-content":this.urlTitle,"sc-label":this.scLabel,url:this.url,"is-external":this.isExternal,variant:e})))))),t("hy-box",{mb:"2, 2, 1, 1"}))}get el(){return h(this)}};y.style=g;export{y as hy_hero};
|
|
2
2
|
//# sourceMappingURL=hy-hero.entry.js.map
|