npm - @itcenteratunihelsinki/huds-lib - Versions diffs - 0.8.58 → 0.8.60 - Mend

@itcenteratunihelsinki/huds-lib 0.8.58 → 0.8.60

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

Files changed (1074) hide show

package/components/image.js CHANGED Viewed

@@ -7,16 +7,22 @@ const Image = /*@__PURE__*/ proxyCustomElement(class Image extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.imageUrl = null;
-    this.imageAlt = null;
+    this.imageUrl = '';
+    this.imageAlt = '';
     this.disableLazy = false;
+    this.fetchPriority = 'auto';
     this.caption = null;
     this.aspectRatioWidth = 16;
     this.aspectRatioHeight = 9;
     this.sourceSet = undefined;
   }
   srcSetWatcher(data) {
-    this._sourceSet = typeof data === "string" ? JSON.parse(data) : data;
+    try {
+      this._sourceSet = typeof data === "string" ? JSON.parse(data) : data;
+    }
+    catch (error) {
+      console.error("Error parsing sourceSet:", error);
+    }
   }
   componentWillLoad() {
     this.srcSetWatcher(this.sourceSet);
@@ -29,14 +35,14 @@ const Image = /*@__PURE__*/ proxyCustomElement(class Image extends HTMLElement {
         "--aspectRatio": `${aspect}%`,
       };
     }
-    const classAttributes = ["hy-image", this.caption ? "hy-image--with-caption" : null].join(" ");
+    const classAttributes = ["hy-image", this.caption && this.caption.length > 0 ? "hy-image--with-caption" : null].filter(Boolean).join(" ");
     const containerClasses = [
       "hy-image__image-container",
       aspectRatio !== null ? "hy-image--with-aspect" : "hy-image--no-aspect",
-    ].join(" ");
+    ].filter(Boolean).join(" ");
     return [
       h("div", { class: classAttributes }, h("div", { class: containerClasses, style: aspectRatio !== null ? aspectRatio : "" }, this.imageUrl &&
-        (this._sourceSet ? (h("picture", null, this._sourceSet.map(({ src, media, type, sizes }) => (h("source", { srcSet: src, media: media, type: type, sizes: sizes || "" }))), h("img", { loading: this.disableLazy ? "eager" : "lazy", alt: this.imageAlt, class: "hy-image__image", src: this.imageUrl }))) : (h("img", { loading: this.disableLazy ? "eager" : "lazy", alt: this.imageAlt, class: "hy-image__image", src: this.imageUrl })))), this.caption && h("div", { class: "hy-image__caption" }, this.caption)),
+        (this._sourceSet ? (h("picture", null, this._sourceSet.map(({ src, media, type, sizes }) => (h("source", { srcSet: src, media: media, type: type, sizes: sizes || "" }))), h("img", { "fetch-priority": this.fetchPriority, loading: this.disableLazy ? "eager" : "lazy", alt: this.imageAlt, class: "hy-image__image", src: this.imageUrl }))) : (h("img", { "fetch-priority": this.fetchPriority, loading: this.disableLazy ? "eager" : "lazy", alt: this.imageAlt, class: "hy-image__image", src: this.imageUrl })))), this.caption && h("div", { class: "hy-image__caption" }, this.caption)),
       h("hy-box", { mb: "1.75, 1.75, 2, 2.5" }),
     ];
   }
@@ -48,6 +54,7 @@ const Image = /*@__PURE__*/ proxyCustomElement(class Image extends HTMLElement {
     "imageUrl": [1, "image-url"],
     "imageAlt": [1, "image-alt"],
     "disableLazy": [4, "disable-lazy"],
+    "fetchPriority": [1, "fetch-priority"],
     "caption": [1],
     "aspectRatioWidth": [2, "aspect-ratio-width"],
     "aspectRatioHeight": [2, "aspect-ratio-height"],

package/components/image.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"image.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,ojEAAojE;;~~MCcxjE~~,KAAK;;;;oBACW,~~IAAI~~;~~oBACJ~~,~~IAAI~~;~~uBACA~~,KAAK;~~mBACV~~,IAAI;4BACK,EAAE;6BACD,CAAC;;;EAIjB,aAAa,CAAC,IAA4B;IAC5D,IAAI,CAAC,UAAU,GAAG,OAAO,IAAI,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;~~GACtE~~;EAED,iBAAiB;IACf,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;GACpC;EAED,MAAM;IACJ,IAAI,WAAW,GAAG,IAAI,CAAC;IACvB,IAAI,IAAI,CAAC,gBAAgB,KAAK,CAAC,IAAI,IAAI,CAAC,gBAAgB,KAAK,CAAC,EAAE;MAC9D,MAAM,MAAM,GAAG,CAAC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,gBAAgB,IAAI,GAAG,CAAC;MACtE,WAAW,GAAG;QACZ,eAAe,EAAE,GAAG,MAAM,GAAoB;OAC/C,CAAC;KACH;IACD,MAAM,eAAe,GAAG,CAAC,UAAU,~~EAAE~~,IAAI,CAAC,OAAO,GAAG,wBAAwB,GAAG,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;~~IAE/F~~,MAAM,gBAAgB,GAAG;MACvB,2BAA2B;MAC3B,WAAW,KAAK,IAAI,GAAG,uBAAuB,GAAG,qBAAqB;KACvE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;~~IAEZ~~,OAAO;MACL,WAAK,KAAK,EAAE,eAAe,IACzB,WAAK,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,WAAW,KAAK,IAAI,GAAG,WAAW,GAAG,EAAE,IACzE,IAAI,CAAC,QAAQ;SACX,IAAI,CAAC,UAAU,IACd,mBACG,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAC,MAC7C,cAAQ,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,IAAI,EAAE,GAAI,CACtE,CAAC,EACF,~~WACE~~,OAAO,EAAE,IAAI,CAAC,WAAW,GAAG,OAAO,GAAG,MAAM,EAC5C,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAC,iBAAiB,EACvB,GAAG,EAAE,IAAI,CAAC,QAAQ,GAClB,CACM,KAEV,~~WACE~~,OAAO,EAAE,IAAI,CAAC,WAAW,GAAG,OAAO,GAAG,MAAM,EAC5C,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAC,iBAAiB,EACvB,GAAG,EAAE,IAAI,CAAC,QAAQ,GAClB,CACH,CAAC,CACA,EACL,IAAI,CAAC,OAAO,IAAI,WAAK,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,OAAO,CAAO,CAChE;MACN,cAAQ,EAAE,EAAC,oBAAoB,GAAG;KACnC,CAAC;GACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["./src/components/image/image.scss?tag=hy-image","./src/components/image/image.tsx"],"sourcesContent":[".hy-image {\n width: 100%;\n}\n\n.hy-image__image-container {\n &.hy-image--no-aspect {\n img {\n height: auto;\n width: auto;\n max-width: 100%;\n }\n }\n\n &.hy-image--with-aspect {\n display: flex;\n justify-content: stretch;\n margin-bottom: 0;\n min-height: 10rem;\n position: relative;\n\n &:before {\n content: \"\";\n display: block;\n padding-top: var(--aspectRatio);\n }\n\n img {\n bottom: 0;\n height: 100%;\n left: 0;\n object-fit: cover;\n position: absolute;\n right: 0;\n top: 0;\n width: 100%;\n\n .hy-two-columns & {\n object-fit: contain;\n object-position: top;\n }\n }\n }\n}\n\n.hy-image__caption {\n color: var(--grayscale-dark);\n font-family: var(--main-font-family);\n font-size: 12px;\n letter-spacing: -0.07px;\n line-height: 16px;\n padding: 19px 0;\n}\n","export interface ImageSrcSet {\n src: any;\n media: string;\n type: string;\n sizes: string \| null;\n}\n\nimport {Component, ComponentInterface, Prop, h, Watch} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-image\",\n styleUrl: \"image.scss\",\n shadow: false,\n})\nexport class Image implements ComponentInterface {\n @Prop() imageUrl: string = ~~null~~;\n @Prop() imageAlt: string = ~~null~~;\n @Prop() disableLazy: boolean = false;\n @Prop() caption: string = null;\n @Prop() aspectRatioWidth: number = 16;\n @Prop() aspectRatioHeight: number = 9;\n private _sourceSet: ImageSrcSet[];\n @Prop() sourceSet: ImageSrcSet[] \| string;\n\n @Watch(\"sourceSet\") srcSetWatcher(data: ImageSrcSet[] \| string) {\n this._sourceSet = typeof data === \"string\" ? JSON.parse(data) : data;\n }\n\n componentWillLoad() {\n this.srcSetWatcher(this.sourceSet);\n }\n\n render() {\n let aspectRatio = null;\n if (this.aspectRatioWidth !== 0 && this.aspectRatioWidth !== 0) {\n const aspect = (this.aspectRatioHeight / this.aspectRatioWidth) * 100;\n aspectRatio = {\n \"--aspectRatio\": `${aspect}%` as \"aspectRatio\",\n };\n }\n const classAttributes = [\"hy-image\", this.caption ? \"hy-image--with-caption\" : null].join(\" \");\n\n const containerClasses = [\n \"hy-image__image-container\",\n aspectRatio !== null ? \"hy-image--with-aspect\" : \"hy-image--no-aspect\",\n ].join(\" \");\n\n return [\n <div class={classAttributes}>\n <div class={containerClasses} style={aspectRatio !== null ? aspectRatio : \"\"}>\n {this.imageUrl &&\n (this._sourceSet ? (\n <picture>\n {this._sourceSet.map(({src, media, type, sizes}) => (\n <source srcSet={src} media={media} type={type} sizes={sizes \|\| \"\"} />\n ))}\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n alt={this.imageAlt}\n class=\"hy-image__image\"\n src={this.imageUrl}\n />\n </picture>\n ) : (\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n alt={this.imageAlt}\n class=\"hy-image__image\"\n src={this.imageUrl}\n />\n ))}\n </div>\n {this.caption && <div class=\"hy-image__caption\">{this.caption}</div>}\n </div>,\n <hy-box mb=\"1.75, 1.75, 2, 2.5\" />,\n ];\n }\n}\n"],"version":3}
1	+ {"file":"image.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,ojEAAojE;;MCexjE,KAAK;;;;oBACW,EAAE;oBACF,EAAE;uBACE,KAAK;yBACQ,MAAM;mBACxB,IAAI;4BACK,EAAE;6BACD,CAAC;;;EAIjB,aAAa,CAAC,IAA4B;IAC5D,IAAI;MACF,IAAI,CAAC,UAAU,GAAG,OAAO,IAAI,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;KACtE;IAAC,OAAO,KAAK,EAAE;MACd,OAAO,CAAC,KAAK,CAAC,0BAA0B,EAAE,KAAK,CAAC,CAAC;KAClD;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;GACpC;EAED,MAAM;IACJ,IAAI,WAAW,GAAG,IAAI,CAAC;IACvB,IAAI,IAAI,CAAC,gBAAgB,KAAK,CAAC,IAAI,IAAI,CAAC,gBAAgB,KAAK,CAAC,EAAE;MAC9D,MAAM,MAAM,GAAG,CAAC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,gBAAgB,IAAI,GAAG,CAAC;MACtE,WAAW,GAAG;QACZ,eAAe,EAAE,GAAG,MAAM,GAAoB;OAC/C,CAAC;KACH;IACD,MAAM,eAAe,GAAG,CAAC,UAAU,EAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,GAAG,wBAAwB,GAAG,IAAI,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEzI,MAAM,gBAAgB,GAAG;MACvB,2BAA2B;MAC3B,WAAW,KAAK,IAAI,GAAG,uBAAuB,GAAG,qBAAqB;KACvE,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO;MACL,WAAK,KAAK,EAAE,eAAe,IACzB,WAAK,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,WAAW,KAAK,IAAI,GAAG,WAAW,GAAG,EAAE,IACzE,IAAI,CAAC,QAAQ;SACX,IAAI,CAAC,UAAU,IACd,mBACG,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAC,MAC7C,cAAQ,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,IAAI,EAAE,GAAI,CACtE,CAAC,EACF,6BACkB,IAAI,CAAC,aAAa,EAClC,OAAO,EAAE,IAAI,CAAC,WAAW,GAAG,OAAO,GAAG,MAAM,EAC5C,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAC,iBAAiB,EACvB,GAAG,EAAE,IAAI,CAAC,QAAQ,GAClB,CACM,KAEV,6BACkB,IAAI,CAAC,aAAa,EAClC,OAAO,EAAE,IAAI,CAAC,WAAW,GAAG,OAAO,GAAG,MAAM,EAC5C,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAC,iBAAiB,EACvB,GAAG,EAAE,IAAI,CAAC,QAAQ,GAClB,CACH,CAAC,CACA,EACL,IAAI,CAAC,OAAO,IAAI,WAAK,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,OAAO,CAAO,CAChE;MACN,cAAQ,EAAE,EAAC,oBAAoB,GAAG;KACnC,CAAC;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/hy-image/image.scss?tag=hy-image","./src/components/hy-image/image.tsx"],"sourcesContent":[".hy-image {\n width: 100%;\n}\n\n.hy-image__image-container {\n &.hy-image--no-aspect {\n img {\n height: auto;\n width: auto;\n max-width: 100%;\n }\n }\n\n &.hy-image--with-aspect {\n display: flex;\n justify-content: stretch;\n margin-bottom: 0;\n min-height: 10rem;\n position: relative;\n\n &:before {\n content: \"\";\n display: block;\n padding-top: var(--aspectRatio);\n }\n\n img {\n bottom: 0;\n height: 100%;\n left: 0;\n object-fit: cover;\n position: absolute;\n right: 0;\n top: 0;\n width: 100%;\n\n .hy-two-columns & {\n object-fit: contain;\n object-position: top;\n }\n }\n }\n}\n\n.hy-image__caption {\n color: var(--grayscale-dark);\n font-family: var(--main-font-family);\n font-size: 12px;\n letter-spacing: -0.07px;\n line-height: 16px;\n padding: 19px 0;\n}\n","export interface ImageSrcSet {\n src: any;\n media: string;\n type: string;\n sizes: string \| null;\n}\n\nimport {Component, ComponentInterface, Prop, h, Watch} from \"@stencil/core\";\nimport { FetchPriorityRange } from \"../../utils/utils\";\n\n@Component({\n tag: \"hy-image\",\n styleUrl: \"image.scss\",\n shadow: false,\n})\nexport class Image implements ComponentInterface {\n @Prop() imageUrl: string = '';\n @Prop() imageAlt: string = '';\n @Prop() disableLazy: boolean = false;\n @Prop() fetchPriority: FetchPriorityRange = 'auto';\n @Prop() caption: string = null;\n @Prop() aspectRatioWidth: number = 16;\n @Prop() aspectRatioHeight: number = 9;\n private _sourceSet: ImageSrcSet[];\n @Prop() sourceSet: ImageSrcSet[] \| string;\n\n @Watch(\"sourceSet\") srcSetWatcher(data: ImageSrcSet[] \| string) {\n try {\n this._sourceSet = typeof data === \"string\" ? JSON.parse(data) : data;\n } catch (error) {\n console.error(\"Error parsing sourceSet:\", error);\n }\n }\n\n componentWillLoad() {\n this.srcSetWatcher(this.sourceSet);\n }\n\n render() {\n let aspectRatio = null;\n if (this.aspectRatioWidth !== 0 && this.aspectRatioWidth !== 0) {\n const aspect = (this.aspectRatioHeight / this.aspectRatioWidth) * 100;\n aspectRatio = {\n \"--aspectRatio\": `${aspect}%` as \"aspectRatio\",\n };\n }\n const classAttributes = [\"hy-image\",this.caption && this.caption.length > 0 ? \"hy-image--with-caption\" : null].filter(Boolean).join(\" \");\n\n const containerClasses = [\n \"hy-image__image-container\",\n aspectRatio !== null ? \"hy-image--with-aspect\" : \"hy-image--no-aspect\",\n ].filter(Boolean).join(\" \");\n\n return [\n <div class={classAttributes}>\n <div class={containerClasses} style={aspectRatio !== null ? aspectRatio : \"\"}>\n {this.imageUrl &&\n (this._sourceSet ? (\n <picture>\n {this._sourceSet.map(({src, media, type, sizes}) => (\n <source srcSet={src} media={media} type={type} sizes={sizes \|\| \"\"} />\n ))}\n <img\n fetch-priority={this.fetchPriority}\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n alt={this.imageAlt}\n class=\"hy-image__image\"\n src={this.imageUrl}\n />\n </picture>\n ) : (\n <img\n fetch-priority={this.fetchPriority}\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n alt={this.imageAlt}\n class=\"hy-image__image\"\n src={this.imageUrl}\n />\n ))}\n </div>\n {this.caption && <div class=\"hy-image__caption\">{this.caption}</div>}\n </div>,\n <hy-box mb=\"1.75, 1.75, 2, 2.5\" />,\n ];\n }\n}\n"],"version":3}

package/components/link-box.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { r as LinkBoxVariants } from './utils.js';
+import { n as LinkBoxVariants } from './utils.js';
 import { d as defineCustomElement$1 } from './icon.js';
-const linkBoxCss = ":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{height:100%}.hy-link-box-container{background:var(--grayscale-background-box);width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;height:100%;position:relative}.hy-link-box-container:focus-within{outline:auto}.hy-link-box-container:hover{cursor:pointer}.hy-link-box-container:hover .hy-link-box__text-container__title{color:var(--brand-main);text-decoration:underline}.hy-link-box-container:hover .hy-cta-link{text-decoration:underline}.hy-link-box-container:hover .hy-cta-link .hy-cta-link__icon{background-color:var(--brand-main)}.hy-link-box__image-container{margin:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:stretch;-ms-flex-pack:stretch;justify-content:stretch;min-height:10rem;position:relative}.hy-link-box__image-container:before{content:\"\";display:block;padding-top:62.5%;width:100%}.hy-link-box__image-container img{bottom:0;height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;right:0;top:0;width:100%}.hy-link-box__image-container.is-image-missing svg{position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);left:50%;width:85px;height:auto;fill:#d2d2d2}.hy-link-box__text-container{padding:16px}.hy-link-box__text-container__title{font-size:1.3125rem;line-height:28px;font-weight:700;color:var(--brand-main-nearly-black);font-family:var(--main-font-family);letter-spacing:-0.42px;-ms-hyphens:auto;hyphens:auto;word-break:break-word;margin:0 0 16px}@media screen and (min-width: 1024px){.hy-link-box__text-container__title{font-size:1.5625rem;line-height:32px;letter-spacing:-0.5px}}.hy-link-box__text-container__description{font-size:0.9375rem;line-height:22px;color:var(--grayscale-black);font-family:var(--main-font-family);margin:0}@media screen and (min-width: 1024px){.hy-link-box__text-container__description{font-size:1.0625rem;line-height:26px}}.hy-cta-link{font-weight:600;font-size:1rem;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--brand-main);display:inline-grid;font-family:var(--main-font-family);gap:16px;grid-auto-flow:column;letter-spacing:-0.5px;overflow:hidden;text-decoration:none;margin:0 -8px 24px 0;align-self:flex-end}.hy-cta-link span[aria-hidden=true]{position:absolute;inset:0}.hy-cta-link:focus{outline:none}.hy-cta-link__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--brand-main-light);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:40px}.hy-cta-link__icon svg{fill:var(--grayscale-white)}.hy-cta-link__icon--external svg{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}";
+const linkBoxCss = ":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{height:100%}.hy-link-box-container{background:var(--grayscale-background-box);width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;height:100%;position:relative}.hy-link-box-container:focus-within{outline:auto}.hy-link-box-container:hover{cursor:pointer}.hy-link-box-container:hover .hy-link-box__text-container__title{color:var(--brand-main);text-decoration:underline}.hy-link-box-container:hover .hy-cta-link{text-decoration:underline}.hy-link-box-container:hover .hy-cta-link .hy-cta-link__icon{background-color:var(--brand-main)}.hy-link-box__image-container{margin:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:stretch;-ms-flex-pack:stretch;justify-content:stretch;min-height:10rem;position:relative}.hy-link-box__image-container:before{content:\"\";display:block;padding-top:62.5%;width:100%}.hy-link-box__image-container img{bottom:0;height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;right:0;top:0;width:100%}.hy-link-box__image-container.is-image-missing svg{position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);left:50%;width:85px;height:auto;fill:#d2d2d2}.hy-link-box__text-container{padding:16px}.hy-link-box__text-container__title{font-size:1.3125rem;line-height:28px;font-weight:700;color:var(--brand-main-nearly-black);font-family:var(--main-font-family);letter-spacing:-0.42px;-ms-hyphens:auto;hyphens:auto;word-break:break-word;margin:0 0 16px;text-wrap:balance}@media screen and (min-width: 1024px){.hy-link-box__text-container__title{font-size:1.5625rem;line-height:32px;letter-spacing:-0.5px}}.hy-link-box__text-container__description{font-size:0.9375rem;line-height:22px;color:var(--grayscale-black);font-family:var(--main-font-family);margin:0;text-wrap:pretty}@media screen and (min-width: 1024px){.hy-link-box__text-container__description{font-size:1.0625rem;line-height:26px}}.hy-cta-link{font-weight:600;font-size:1rem;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--brand-main);display:inline-grid;font-family:var(--main-font-family);gap:16px;grid-auto-flow:column;letter-spacing:-0.5px;overflow:hidden;text-decoration:none;margin:0 -8px 24px 0;align-self:flex-end}.hy-cta-link span[aria-hidden=true]{position:absolute;inset:0}.hy-cta-link:focus{outline:none}.hy-cta-link__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--brand-main-light);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:40px}.hy-cta-link__icon svg{fill:var(--grayscale-white)}.hy-cta-link__icon--external svg{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}";
 const LinkBox = /*@__PURE__*/ proxyCustomElement(class LinkBox extends HTMLElement {
   constructor() {

package/components/link-box.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"link-box.js","mappings":"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","names":[],"sources":["./src/components/link-box/link-box.scss?tag=hy-link-box","./src/components/link-box/link-box.tsx"],"sourcesContent":[":host {\n height: 100%;\n}\n\n.hy-link-box-container {\n background: var(--grayscale-background-box);\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100%;\n position: relative;\n\n &:focus-within {\n outline: auto;\n }\n\n &:hover {\n cursor: pointer;\n\n .hy-link-box__text-container__title {\n color: var(--brand-main);\n text-decoration: underline;\n }\n\n .hy-cta-link {\n text-decoration: underline;\n\n .hy-cta-link__icon {\n background-color: var(--brand-main);\n }\n }\n }\n}\n\n.hy-link-box__image-container {\n margin: 0;\n display: flex;\n justify-content: stretch;\n min-height: 10rem;\n position: relative;\n\n &:before {\n content: \"\";\n display: block;\n padding-top: calc(10 / 16) * 100%;\n width: 100%;\n }\n\n img {\n bottom: 0;\n height: 100%;\n left: 0;\n object-fit: cover;\n position: absolute;\n right: 0;\n top: 0;\n width: 100%;\n }\n\n &.is-image-missing {\n svg {\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n left: 50%;\n width: 85px;\n height: auto;\n fill: #d2d2d2;\n }\n }\n}\n\n.hy-link-box__text-container {\n padding: 16px;\n}\n\n.hy-link-box__text-container__title {\n @include font-size(21px, 28px);\n @include font-weight($bold);\n color: var(--brand-main-nearly-black);\n font-family: var(--main-font-family);\n letter-spacing: -0.42px;\n hyphens: auto;\n word-break: break-word;\n margin: 0 0 16px;\n\n @media screen and (min-width: 1024px) {\n @include font-size(25px, 32px);\n letter-spacing: -0.5px;\n }\n}\n\n.hy-link-box__text-container__description {\n @include font-size(15px, 22px);\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n margin: 0;\n\n @media screen and (min-width: 1024px) {\n @include font-size(17px, 26px);\n }\n}\n\n.hy-cta-link {\n @include font-weight($semibold);\n @include font-size(16px, 24px);\n align-items: center;\n color: var(--brand-main);\n display: inline-grid;\n font-family: var(--main-font-family);\n gap: 16px;\n grid-auto-flow: column;\n letter-spacing: -0.5px;\n overflow: hidden;\n text-decoration: none;\n margin: 0 -8px 24px 0;\n align-self: flex-end;\n\n span[aria-hidden=\"true\"] {\n position: absolute;\n inset: 0;\n }\n\n &:focus {\n outline: none;\n }\n}\n\n.hy-cta-link__icon {\n align-items: center;\n background-color: var(--brand-main-light);\n display: inline-flex;\n height: 40px;\n justify-content: center;\n width: 40px;\n\n svg {\n fill: var(--grayscale-white);\n }\n\n &--external {\n svg {\n transform: rotate(-45deg);\n }\n }\n}\n","export interface ImageSrcSet {\n src: any;\n media: string;\n type: string;\n sizes: string \| null;\n}\n\nimport {Component, ComponentInterface, Element, Prop, h, Watch} from \"@stencil/core\";\nimport {LinkBoxVariants} from \"../../utils/utils\";\n\n@Component({\n tag: \"hy-link-box\",\n styleUrl: \"link-box.scss\",\n shadow: false,\n})\nexport class LinkBox implements ComponentInterface {\n @Prop() variant: LinkBoxVariants = LinkBoxVariants.default;\n @Prop() imageUrl: string = null;\n @Prop() imageAlt: string = null;\n @Prop() disableLazy: boolean = false;\n @Prop() useSlot: boolean = false;\n @Prop() showLogo: boolean = false;\n @Prop() textTitle?: string;\n @Prop() textDescription: string = null;\n @Prop() url?: string;\n @Prop() isExternal: boolean = false;\n @Prop() scLabel?: string;\n @Prop() readMoreLabel: string;\n @Prop() headerstyle: string = \"common\";\n private _sourceSet: ImageSrcSet[];\n @Prop() sourceSet: ImageSrcSet[] \| string;\n @Element() el: HTMLElement;\n\n @Watch(\"sourceSet\") srcSetWatcher(data: ImageSrcSet[] \| string) {\n this._sourceSet = typeof data === \"string\" ? JSON.parse(data) : data;\n }\n\n componentWillLoad() {\n this.srcSetWatcher(this.sourceSet);\n }\n\n 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 render() {\n const classContainerAttributes = [\"hy-link-box-container\"].join(\" \");\n const classAttributes = [\n \"hy-link-box\",\n this.variant,\n `hy-link-box__${this.variant}`,\n this.headerstyle,\n `hy-link-box__${this.headerstyle}`,\n this.imageUrl ? \"hy-link-box--with-image\" : null,\n ].join(\" \");\n\n const classTextContainer = [\"hy-link-box__text-container\", this.imageUrl ? \"hy-link-box--with-image\" : null].join(\n \" \"\n );\n\n const classTitle = [\n \"hy-link-box__text-container__title\",\n `hy-link-box__text-container__title__${this.variant}`,\n `hy-link-box__text-container__title__${this.headerstyle}`,\n this.imageUrl ? \"hy-link-box__text-container__title__image\" : \"\",\n this.imageUrl ? \"image\" : \"\",\n ].join(\" \");\n\n const classDescription = [\n \"hy-link-box__text-container__description\",\n `hy-link-box__text-container__description__${this.variant}`,\n `hy-link-box__text-container__description__${this.headerstyle}`,\n ].join(\" \");\n\n const target = this.isExternal ? \"_blank\" : \"_self\";\n\n const aspectRatioWidth = 16;\n const aspectRatioHeight = 10;\n const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;\n const aspectRatio = {\n \"--aspectRatio\": `${aspect}%` as \"aspectRatio\",\n };\n\n return [\n <article class={classContainerAttributes}>\n <div class={classAttributes}>\n {this.imageUrl &&\n (this._sourceSet ? (\n <figure class=\"hy-link-box__image-container\" style={aspectRatio}>\n <picture>\n {this._sourceSet.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={this.disableLazy ? \"eager\" : \"lazy\"}\n aria-hidden=\"true\"\n src={this.imageUrl}\n alt={this.imageAlt}\n />\n </picture>\n </figure>\n ) : (\n <figure class=\"hy-link-box__image-container\" style={aspectRatio}>\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n aria-hidden=\"true\"\n src={this.imageUrl}\n alt={this.imageAlt}\n />\n </figure>\n ))}\n {!this.imageUrl && this.showLogo && (\n <div aria-hidden=\"true\" class=\"hy-link-box__image-container is-image-missing\">\n <hy-icon class={{\"hy-site-logo__icon\": true}} icon={\"hy-icon-hy-logo\"} />\n </div>\n )}\n <div class={classTextContainer}>\n <h3 class={classTitle}>{this.textTitle}</h3>\n {this.textDescription && (\n <p class={classDescription}>\n {this.textDescription.length >= 141 ? this.textDescription.slice(0, 140) + \"...\" : this.textDescription}\n </p>\n )}\n </div>\n </div>\n <a\n aria-label={this.scLabel \|\| `${this.readMoreLabel} - ${this.textTitle}`}\n title={this.scLabel \|\| `${this.readMoreLabel} - ${this.textTitle}`}\n href={this.url}\n target={target}\n class={`hy-cta-link hy-cta-link--default`}\n >\n <span aria-hidden=\"true\"></span>\n <span>{this.readMoreLabel}</span>\n <span class={`hy-cta-link__icon ${this.isExternal ? \"hy-cta-link__icon--external\" : \"\"}`}>\n <hy-icon icon={\"hy-icon-arrow-to-right\"} size={24} />\n </span>\n </a>\n </article>,\n ];\n }\n}\n"],"version":3}
1	+ {"file":"link-box.js","mappings":"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","names":[],"sources":["./src/components/hy-link-box/link-box.scss?tag=hy-link-box","./src/components/hy-link-box/link-box.tsx"],"sourcesContent":[":host {\n height: 100%;\n}\n\n.hy-link-box-container {\n background: var(--grayscale-background-box);\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100%;\n position: relative;\n\n &:focus-within {\n outline: auto;\n }\n\n &:hover {\n cursor: pointer;\n\n .hy-link-box__text-container__title {\n color: var(--brand-main);\n text-decoration: underline;\n }\n\n .hy-cta-link {\n text-decoration: underline;\n\n .hy-cta-link__icon {\n background-color: var(--brand-main);\n }\n }\n }\n}\n\n.hy-link-box__image-container {\n margin: 0;\n display: flex;\n justify-content: stretch;\n min-height: 10rem;\n position: relative;\n\n &:before {\n content: \"\";\n display: block;\n padding-top: calc(10 / 16) * 100%;\n width: 100%;\n }\n\n img {\n bottom: 0;\n height: 100%;\n left: 0;\n object-fit: cover;\n position: absolute;\n right: 0;\n top: 0;\n width: 100%;\n }\n\n &.is-image-missing {\n svg {\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n left: 50%;\n width: 85px;\n height: auto;\n fill: #d2d2d2;\n }\n }\n}\n\n.hy-link-box__text-container {\n padding: 16px;\n}\n\n.hy-link-box__text-container__title {\n @include font-size(21px, 28px);\n @include font-weight($bold);\n color: var(--brand-main-nearly-black);\n font-family: var(--main-font-family);\n letter-spacing: -0.42px;\n hyphens: auto;\n word-break: break-word;\n margin: 0 0 16px;\n text-wrap: balance;\n\n @media screen and (min-width: 1024px) {\n @include font-size(25px, 32px);\n letter-spacing: -0.5px;\n }\n}\n\n.hy-link-box__text-container__description {\n @include font-size(15px, 22px);\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n margin: 0;\n text-wrap: pretty;\n\n @media screen and (min-width: 1024px) {\n @include font-size(17px, 26px);\n }\n}\n\n.hy-cta-link {\n @include font-weight($semibold);\n @include font-size(16px, 24px);\n align-items: center;\n color: var(--brand-main);\n display: inline-grid;\n font-family: var(--main-font-family);\n gap: 16px;\n grid-auto-flow: column;\n letter-spacing: -0.5px;\n overflow: hidden;\n text-decoration: none;\n margin: 0 -8px 24px 0;\n align-self: flex-end;\n\n span[aria-hidden=\"true\"] {\n position: absolute;\n inset: 0;\n }\n\n &:focus {\n outline: none;\n }\n}\n\n.hy-cta-link__icon {\n align-items: center;\n background-color: var(--brand-main-light);\n display: inline-flex;\n height: 40px;\n justify-content: center;\n width: 40px;\n\n svg {\n fill: var(--grayscale-white);\n }\n\n &--external {\n svg {\n transform: rotate(-45deg);\n }\n }\n}\n","export interface ImageSrcSet {\n src: any;\n media: string;\n type: string;\n sizes: string \| null;\n}\n\nimport {Component, ComponentInterface, Element, Prop, h, Watch} from \"@stencil/core\";\nimport {LinkBoxVariants} from \"../../utils/utils\";\n\n@Component({\n tag: \"hy-link-box\",\n styleUrl: \"link-box.scss\",\n shadow: false,\n})\nexport class LinkBox implements ComponentInterface {\n @Prop() variant: LinkBoxVariants = LinkBoxVariants.default;\n @Prop() imageUrl: string = null;\n @Prop() imageAlt: string = null;\n @Prop() disableLazy: boolean = false;\n @Prop() useSlot: boolean = false;\n @Prop() showLogo: boolean = false;\n @Prop() textTitle?: string;\n @Prop() textDescription: string = null;\n @Prop() url?: string;\n @Prop() isExternal: boolean = false;\n @Prop() scLabel?: string;\n @Prop() readMoreLabel: string;\n @Prop() headerstyle: string = \"common\";\n private _sourceSet: ImageSrcSet[];\n @Prop() sourceSet: ImageSrcSet[] \| string;\n @Element() el: HTMLElement;\n\n @Watch(\"sourceSet\") srcSetWatcher(data: ImageSrcSet[] \| string) {\n this._sourceSet = typeof data === \"string\" ? JSON.parse(data) : data;\n }\n\n componentWillLoad() {\n this.srcSetWatcher(this.sourceSet);\n }\n\n 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 render() {\n const classContainerAttributes = [\"hy-link-box-container\"].join(\" \");\n const classAttributes = [\n \"hy-link-box\",\n this.variant,\n `hy-link-box__${this.variant}`,\n this.headerstyle,\n `hy-link-box__${this.headerstyle}`,\n this.imageUrl ? \"hy-link-box--with-image\" : null,\n ].join(\" \");\n\n const classTextContainer = [\"hy-link-box__text-container\", this.imageUrl ? \"hy-link-box--with-image\" : null].join(\n \" \"\n );\n\n const classTitle = [\n \"hy-link-box__text-container__title\",\n `hy-link-box__text-container__title__${this.variant}`,\n `hy-link-box__text-container__title__${this.headerstyle}`,\n this.imageUrl ? \"hy-link-box__text-container__title__image\" : \"\",\n this.imageUrl ? \"image\" : \"\",\n ].join(\" \");\n\n const classDescription = [\n \"hy-link-box__text-container__description\",\n `hy-link-box__text-container__description__${this.variant}`,\n `hy-link-box__text-container__description__${this.headerstyle}`,\n ].join(\" \");\n\n const target = this.isExternal ? \"_blank\" : \"_self\";\n\n const aspectRatioWidth = 16;\n const aspectRatioHeight = 10;\n const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;\n const aspectRatio = {\n \"--aspectRatio\": `${aspect}%` as \"aspectRatio\",\n };\n\n return [\n <article class={classContainerAttributes}>\n <div class={classAttributes}>\n {this.imageUrl &&\n (this._sourceSet ? (\n <figure class=\"hy-link-box__image-container\" style={aspectRatio}>\n <picture>\n {this._sourceSet.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={this.disableLazy ? \"eager\" : \"lazy\"}\n aria-hidden=\"true\"\n src={this.imageUrl}\n alt={this.imageAlt}\n />\n </picture>\n </figure>\n ) : (\n <figure class=\"hy-link-box__image-container\" style={aspectRatio}>\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n aria-hidden=\"true\"\n src={this.imageUrl}\n alt={this.imageAlt}\n />\n </figure>\n ))}\n {!this.imageUrl && this.showLogo && (\n <div aria-hidden=\"true\" class=\"hy-link-box__image-container is-image-missing\">\n <hy-icon class={{\"hy-site-logo__icon\": true}} icon={\"hy-icon-hy-logo\"} />\n </div>\n )}\n <div class={classTextContainer}>\n <h3 class={classTitle}>{this.textTitle}</h3>\n {this.textDescription && (\n <p class={classDescription}>\n {this.textDescription.length >= 141 ? this.textDescription.slice(0, 140) + \"...\" : this.textDescription}\n </p>\n )}\n </div>\n </div>\n <a\n aria-label={this.scLabel \|\| `${this.readMoreLabel} - ${this.textTitle}`}\n title={this.scLabel \|\| `${this.readMoreLabel} - ${this.textTitle}`}\n href={this.url}\n target={target}\n class={`hy-cta-link hy-cta-link--default`}\n >\n <span aria-hidden=\"true\"></span>\n <span>{this.readMoreLabel}</span>\n <span class={`hy-cta-link__icon ${this.isExternal ? \"hy-cta-link__icon--external\" : \"\"}`}>\n <hy-icon icon={\"hy-icon-arrow-to-right\"} size={24} />\n </span>\n </a>\n </article>,\n ];\n }\n}\n"],"version":3}

package/components/menu-language-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"menu-language-item.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,suDAAsuD;;MCOrvD,YAAY;;;;;;oBAEK,KAAK;sBACH,KAAK;;;;;EAKnC,MAAM;IACJ,QACE,UAAI,KAAK,EAAE,2BAA2B,IACpC,SACE,IAAI,EAAE,IAAI,CAAC,GAAG,EACd,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,KAAK,EAAE;QACL,WAAW,EAAE,IAAI,CAAC,QAAQ;QAC1B,aAAa,EAAE,IAAI,CAAC,UAAU;QAC9B,qBAAqB,EAAE,IAAI;OAC5B,IAEA,IAAI,CAAC,KAAK,CACT,CACD,EACL;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/navigation/menu-language-item/menu-language-item.scss?tag=hy-menu-language-item&encapsulation=shadow","./src/components/navigation/menu-language-item/menu-language-item.tsx"],"sourcesContent":[".menu-language__link {\n @include font-size(16px, 24px);\n @include font-weight($semibold);\n color: var(--brand-main-light);\n font-family: var(--main-font-family);\n letter-spacing: -0.5px;\n overflow: hidden;\n text-decoration: none;\n padding: 12px 12px;\n display: block;\n\n &:hover {\n background-color: var(--grayscale-background-box);\n color: var(--brand-main);\n }\n\n &.is-active {\n color: var(--grayscale-black);\n border: 2px solid var(--grayscale-black);\n }\n\n &.is-disabled {\n color: var(--link-disabled);\n\n &:hover {\n background-color: transparent;\n color: var(--link-disabled);\n }\n }\n}\n","import {Component, h, Prop} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-menu-language-item\",\n styleUrl: \"menu-language-item.scss\",\n shadow: true,\n})\nexport class SiteLanguage {\n @Prop() abbr: string;\n @Prop() isActive: boolean = false;\n @Prop() isDisabled: boolean = false;\n @Prop() label: string;\n @Prop() langCode: string;\n @Prop() url: string;\n\n render() {\n return (\n <li class={`menu-language__links-item`}>\n <a\n href={this.url}\n lang={this.langCode}\n class={{\n \"is-active\": this.isActive,\n \"is-disabled\": this.isDisabled,\n \"menu-language__link\": true,\n }}\n >\n {this.label}\n </a>\n </li>\n );\n }\n}\n"],"version":3}
1	+ {"file":"menu-language-item.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,suDAAsuD;;MCOrvD,YAAY;;;;;;oBAEK,KAAK;sBACH,KAAK;;;;;EAKnC,MAAM;IACJ,QACE,UAAI,KAAK,EAAE,2BAA2B,IACpC,SACE,IAAI,EAAE,IAAI,CAAC,GAAG,EACd,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,KAAK,EAAE;QACL,WAAW,EAAE,IAAI,CAAC,QAAQ;QAC1B,aAAa,EAAE,IAAI,CAAC,UAAU;QAC9B,qBAAqB,EAAE,IAAI;OAC5B,IAEA,IAAI,CAAC,KAAK,CACT,CACD,EACL;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/hy-navigation/menu-language-item/menu-language-item.scss?tag=hy-menu-language-item&encapsulation=shadow","./src/components/hy-navigation/menu-language-item/menu-language-item.tsx"],"sourcesContent":[".menu-language__link {\n @include font-size(16px, 24px);\n @include font-weight($semibold);\n color: var(--brand-main-light);\n font-family: var(--main-font-family);\n letter-spacing: -0.5px;\n overflow: hidden;\n text-decoration: none;\n padding: 12px 12px;\n display: block;\n\n &:hover {\n background-color: var(--grayscale-background-box);\n color: var(--brand-main);\n }\n\n &.is-active {\n color: var(--grayscale-black);\n border: 2px solid var(--grayscale-black);\n }\n\n &.is-disabled {\n color: var(--link-disabled);\n\n &:hover {\n background-color: transparent;\n color: var(--link-disabled);\n }\n }\n}\n","import {Component, h, Prop} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-menu-language-item\",\n styleUrl: \"menu-language-item.scss\",\n shadow: true,\n})\nexport class SiteLanguage {\n @Prop() abbr: string;\n @Prop() isActive: boolean = false;\n @Prop() isDisabled: boolean = false;\n @Prop() label: string;\n @Prop() langCode: string;\n @Prop() url: string;\n\n render() {\n return (\n <li class={`menu-language__links-item`}>\n <a\n href={this.url}\n lang={this.langCode}\n class={{\n \"is-active\": this.isActive,\n \"is-disabled\": this.isDisabled,\n \"menu-language__link\": true,\n }}\n >\n {this.label}\n </a>\n </li>\n );\n }\n}\n"],"version":3}

package/components/menu-language.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"menu-language.js","mappings":"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","names":[],"sources":["./src/components/navigation/menu-language/menu-language.scss?tag=hy-menu-language&encapsulation=shadow","./src/components/navigation/menu-language/menu-language.tsx"],"sourcesContent":[".menu-language {\n position: relative;\n align-items: center;\n display: flex;\n height: 100%;\n}\n\n.menu-language__toggle {\n @include font-size(16px, 16px);\n @include font-weight($bold);\n color: var(--grayscale-black);\n align-items: center;\n background-color: transparent;\n border: 0;\n display: inline-grid;\n font-family: var(--main-font-family);\n gap: 4px;\n grid-template-columns: repeat(2, auto);\n letter-spacing: -0.7px;\n margin: 0;\n padding: 14px 10px;\n text-transform: uppercase;\n height: 100%;\n\n @include breakpoint($extrawide) {\n @include font-size(12px, 24px);\n @include font-weight($regular);\n color: var(--brand-main-nearly-black);\n letter-spacing: -0.5px;\n grid-template-columns: repeat(3, auto);\n padding: 0;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(14px, 24px);\n }\n\n &:hover {\n color: var(--brand-main);\n cursor: pointer;\n\n svg {\n fill: var(--brand-main);\n }\n }\n\n &:focus {\n outline: solid 2px var(--additional-yellow);\n outline-offset: 2px;\n }\n\n hy-icon {\n &:first-of-type {\n display: none !important;\n\n @include breakpoint($extrawide) {\n display: inline-flex !important;\n }\n }\n }\n\n &[aria-expanded=\"true\"] {\n position: relative;\n\n &:after {\n content: \"\";\n position: absolute;\n height: 4px;\n right: 0;\n bottom: -1px;\n left: 0;\n background-color: var(--grayscale-black);\n }\n\n span + hy-icon {\n transform: rotate(180deg);\n }\n }\n\n .is-group & {\n color: var(--grayscale-white);\n\n &:hover {\n color: var(--grayscale-medium);\n cursor: pointer;\n\n svg {\n fill: var(--grayscale-medium);\n }\n }\n }\n}\n\n.menu-language__dropdown {\n background-color: var(--grayscale-white);\n border-radius: 0 0 5px 5px;\n box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);\n display: flex;\n flex-flow: column;\n justify-items: center;\n right: -15px;\n margin: 0;\n padding: 8px;\n position: absolute;\n text-transform: uppercase;\n visibility: visible;\n width: max-content;\n z-index: 100;\n min-width: 160px;\n\n &[aria-hidden=\"true\"] {\n display: none;\n }\n\n @include breakpoint($extrawide) {\n left: -15px;\n right: 0;\n }\n}\n\n.menu-language__links {\n margin: 0;\n padding: 0;\n list-style: none;\n display: grid;\n gap: 4px;\n}\n","import {ComponentLabels} from \"../../site-header/site-header\";\n\nexport interface MenuLanguage {\n langCode: string;\n url: string;\n abbr: string;\n label: string;\n isActive?: boolean;\n isDisabled?: boolean;\n}\n\nimport {Component, h, Prop, Element, Listen, State, Event, EventEmitter} from \"@stencil/core\";\nimport {jsonParserWorker} from \"../../../global/globalScript\";\n\n@Component({\n tag: \"hy-menu-language\",\n styleUrl: \"menu-language.scss\",\n shadow: true,\n})\nexport class MenuLanguage {\n @Element() el: HTMLElement;\n @Prop() dataMenuLanguage: MenuLanguage[] \| string;\n @Prop() isGroup: boolean = false;\n @Prop() labels?: ComponentLabels[] \| string;\n @State() isMenuOpen: boolean = false;\n\n @Event() menuLanguageToggled: EventEmitter;\n\n private _dataMenuLanguage: MenuLanguage[];\n private _labels: ComponentLabels[];\n\n // Close the language menu if user clicks anywhere outside the Menu language component.\n @Listen(\"click\", {target: \"window\"})\n handleOutsideMenuClick(event) {\n this.isMenuOpen = false;\n event.stopPropagation();\n }\n\n // CLose the language menu if user opens the desktop menu panel.\n @Listen(\"menuDesktopToggled\", {target: \"document\"})\n desktopMenuToggled() {\n this.isMenuOpen = false;\n }\n\n // CLose the language menu if user opens the search panel\n @Listen(\"searchPanelToggled\", {target: \"document\"})\n searchPanelToggled() {\n this.isMenuOpen = false;\n }\n\n // Close the language menu if user opens University main menu\n @Listen(\"universityMainMenuToggled\", {target: \"document\"})\n universityMainMenuPanelToggled() {\n this.isMenuOpen = false;\n }\n\n @Listen(\"focus\")\n handleComponentFocus(event) {\n // Close desktop menu panel if it's open.\n this.menuLanguageToggled.emit();\n\n event.stopPropagation();\n }\n\n @Listen(\"click\")\n handleComponentClick(event) {\n this.isMenuOpen = !this.isMenuOpen;\n\n if (this.isMenuOpen) {\n // Close desktop menu panel if it's open.\n this.menuLanguageToggled.emit();\n\n const languageMenuSelector = event.target as HTMLElement;\n this.adjustPosition(languageMenuSelector, this.el);\n }\n\n event.stopPropagation();\n }\n\n adjustPosition(languageMenuSelector, target) {\n const languagePanel = languageMenuSelector.shadowRoot.querySelectorAll(\n `.menu-language__dropdown`\n )[0] as HTMLElement;\n let headerHeight = \"0\";\n let hyHeader = this.isGroup\n ? (target.closest(\".hy-site-header__content-top\") as HTMLElement)\n : (target.closest(\".hy-site-header\") as HTMLElement);\n\n if (hyHeader) {\n let rectHeader = hyHeader.getBoundingClientRect();\n let rectLangMenu = languageMenuSelector.getBoundingClientRect();\n\n headerHeight = `${languageMenuSelector.offsetHeight + rectHeader.bottom + 8 - rectLangMenu.bottom}px`;\n }\n\n languagePanel.style.top = headerHeight;\n }\n\n async componentWillLoad() {\n this._dataMenuLanguage = await jsonParserWorker(this.dataMenuLanguage);\n this._labels = await jsonParserWorker(this.labels);\n }\n\n render() {\n const black = \"var(--brand-main-nearly-black)\";\n const white = \"var(--grayscale-white)\";\n const svgColor = this.isGroup ? white : black;\n const globeIconSize = this.isGroup ? 16 : 14;\n\n return (\n <div\n class={{\n \"menu-language\": true,\n \"is-open\": this.isMenuOpen,\n \"is-group\": this.isGroup,\n }}\n >\n <button\n class={{\n \"menu-language__toggle\": true,\n }}\n aria-label={this.isMenuOpen ? this._labels[\"close\"] : this._labels[\"open\"]}\n >\n <hy-icon icon={\"hy-icon-globe\"} size={globeIconSize} fill={svgColor} />\n <span>\n {this._dataMenuLanguage.map(({isActive, langCode}) => {\n if (isActive) {\n return langCode;\n }\n })}\n </span>\n <hy-icon icon={\"hy-icon-caret-down\"} size={8} fill={svgColor} />\n </button>\n <div\n class={{\n \"menu-language__dropdown\": true,\n }}\n aria-hidden={`${!this.isMenuOpen}`}\n >\n <ul class=\"menu-language__links\">\n {this._dataMenuLanguage.map((item) => {\n return (\n <hy-menu-language-item\n lang-code={item.langCode}\n url={item.url}\n label={item.label}\n abbr={item.abbr}\n is-active={item.isActive}\n is-disabled={item.isDisabled}\n />\n );\n })}\n </ul>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"menu-language.js","mappings":"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","names":[],"sources":["./src/components/hy-navigation/menu-language/menu-language.scss?tag=hy-menu-language&encapsulation=shadow","./src/components/hy-navigation/menu-language/menu-language.tsx"],"sourcesContent":[".menu-language {\n position: relative;\n align-items: center;\n display: flex;\n height: 100%;\n}\n\n.menu-language__toggle {\n @include font-size(16px, 16px);\n @include font-weight($bold);\n color: var(--grayscale-black);\n align-items: center;\n background-color: transparent;\n border: 0;\n display: inline-grid;\n font-family: var(--main-font-family);\n gap: 4px;\n grid-template-columns: repeat(2, auto);\n letter-spacing: -0.7px;\n margin: 0;\n padding: 14px 10px;\n text-transform: uppercase;\n height: 100%;\n\n @include breakpoint($extrawide) {\n @include font-size(12px, 24px);\n @include font-weight($regular);\n color: var(--brand-main-nearly-black);\n letter-spacing: -0.5px;\n grid-template-columns: repeat(3, auto);\n padding: 0;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(14px, 24px);\n }\n\n &:hover {\n color: var(--brand-main);\n cursor: pointer;\n\n svg {\n fill: var(--brand-main);\n }\n }\n\n &:focus {\n outline: solid 2px var(--additional-yellow);\n outline-offset: 2px;\n }\n\n hy-icon {\n &:first-of-type {\n display: none !important;\n\n @include breakpoint($extrawide) {\n display: inline-flex !important;\n }\n }\n }\n\n &[aria-expanded=\"true\"] {\n position: relative;\n\n &:after {\n content: \"\";\n position: absolute;\n height: 4px;\n right: 0;\n bottom: -1px;\n left: 0;\n background-color: var(--grayscale-black);\n }\n\n span + hy-icon {\n transform: rotate(180deg);\n }\n }\n\n .is-group & {\n color: var(--grayscale-white);\n\n &:hover {\n color: var(--grayscale-medium);\n cursor: pointer;\n\n svg {\n fill: var(--grayscale-medium);\n }\n }\n }\n}\n\n.menu-language__dropdown {\n background-color: var(--grayscale-white);\n border-radius: 0 0 5px 5px;\n box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);\n display: flex;\n flex-flow: column;\n justify-items: center;\n right: -15px;\n margin: 0;\n padding: 8px;\n position: absolute;\n text-transform: uppercase;\n visibility: visible;\n width: max-content;\n z-index: 100;\n min-width: 160px;\n\n &[aria-hidden=\"true\"] {\n display: none;\n }\n\n @include breakpoint($extrawide) {\n left: -15px;\n right: 0;\n }\n}\n\n.menu-language__links {\n margin: 0;\n padding: 0;\n list-style: none;\n display: grid;\n gap: 4px;\n}\n","import {ComponentLabels} from \"../../hy-site-header/site-header\";\n\nexport interface MenuLanguage {\n langCode: string;\n url: string;\n abbr: string;\n label: string;\n isActive?: boolean;\n isDisabled?: boolean;\n}\n\nimport {Component, h, Prop, Element, Listen, State, Event, EventEmitter} from \"@stencil/core\";\nimport {jsonParserWorker} from \"../../../global/globalScript\";\n\n@Component({\n tag: \"hy-menu-language\",\n styleUrl: \"menu-language.scss\",\n shadow: true,\n})\nexport class MenuLanguage {\n @Element() el: HTMLElement;\n @Prop() dataMenuLanguage: MenuLanguage[] \| string;\n @Prop() isGroup: boolean = false;\n @Prop() labels?: ComponentLabels[] \| string;\n @State() isMenuOpen: boolean = false;\n\n @Event() menuLanguageToggled: EventEmitter;\n\n private _dataMenuLanguage: MenuLanguage[];\n private _labels: ComponentLabels[];\n\n // Close the language menu if user clicks anywhere outside the Menu language component.\n @Listen(\"click\", {target: \"window\"})\n handleOutsideMenuClick(event) {\n this.isMenuOpen = false;\n event.stopPropagation();\n }\n\n // CLose the language menu if user opens the desktop menu panel.\n @Listen(\"menuDesktopToggled\", {target: \"document\"})\n desktopMenuToggled() {\n this.isMenuOpen = false;\n }\n\n // CLose the language menu if user opens the search panel\n @Listen(\"searchPanelToggled\", {target: \"document\"})\n searchPanelToggled() {\n this.isMenuOpen = false;\n }\n\n // Close the language menu if user opens University main menu\n @Listen(\"universityMainMenuToggled\", {target: \"document\"})\n universityMainMenuPanelToggled() {\n this.isMenuOpen = false;\n }\n\n @Listen(\"focus\")\n handleComponentFocus(event) {\n // Close desktop menu panel if it's open.\n this.menuLanguageToggled.emit();\n\n event.stopPropagation();\n }\n\n @Listen(\"click\")\n handleComponentClick(event) {\n this.isMenuOpen = !this.isMenuOpen;\n\n if (this.isMenuOpen) {\n // Close desktop menu panel if it's open.\n this.menuLanguageToggled.emit();\n\n const languageMenuSelector = event.target as HTMLElement;\n this.adjustPosition(languageMenuSelector, this.el);\n }\n\n event.stopPropagation();\n }\n\n adjustPosition(languageMenuSelector, target) {\n const languagePanel = languageMenuSelector.shadowRoot.querySelectorAll(\n `.menu-language__dropdown`\n )[0] as HTMLElement;\n let headerHeight = \"0\";\n let hyHeader = this.isGroup\n ? (target.closest(\".hy-site-header__content-top\") as HTMLElement)\n : (target.closest(\".hy-site-header\") as HTMLElement);\n\n if (hyHeader) {\n let rectHeader = hyHeader.getBoundingClientRect();\n let rectLangMenu = languageMenuSelector.getBoundingClientRect();\n\n headerHeight = `${languageMenuSelector.offsetHeight + rectHeader.bottom + 8 - rectLangMenu.bottom}px`;\n }\n\n languagePanel.style.top = headerHeight;\n }\n\n async componentWillLoad() {\n this._dataMenuLanguage = await jsonParserWorker(this.dataMenuLanguage);\n this._labels = await jsonParserWorker(this.labels);\n }\n\n render() {\n const black = \"var(--brand-main-nearly-black)\";\n const white = \"var(--grayscale-white)\";\n const svgColor = this.isGroup ? white : black;\n const globeIconSize = this.isGroup ? 16 : 14;\n\n return (\n <div\n class={{\n \"menu-language\": true,\n \"is-open\": this.isMenuOpen,\n \"is-group\": this.isGroup,\n }}\n >\n <button\n class={{\n \"menu-language__toggle\": true,\n }}\n aria-label={this.isMenuOpen ? this._labels[\"close\"] : this._labels[\"open\"]}\n >\n <hy-icon icon={\"hy-icon-globe\"} size={globeIconSize} fill={svgColor} />\n <span>\n {this._dataMenuLanguage.map(({isActive, langCode}) => {\n if (isActive) {\n return langCode;\n }\n })}\n </span>\n <hy-icon icon={\"hy-icon-caret-down\"} size={8} fill={svgColor} />\n </button>\n <div\n class={{\n \"menu-language__dropdown\": true,\n }}\n aria-hidden={`${!this.isMenuOpen}`}\n >\n <ul class=\"menu-language__links\">\n {this._dataMenuLanguage.map((item) => {\n return (\n <hy-menu-language-item\n lang-code={item.langCode}\n url={item.url}\n label={item.label}\n abbr={item.abbr}\n is-active={item.isActive}\n is-disabled={item.isDisabled}\n />\n );\n })}\n </ul>\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/components/paragraph-text.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 const paragraphTextContentCss = ":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-paragraph-text.content_page.external,.hy-paragraph-text.field_of_science.external{margin-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page.external,.hy-paragraph-text.field_of_science.external{margin-top:16px}}@media (min-width: 60rem){.hy-paragraph-text.content_page.external,.hy-paragraph-text.field_of_science.external{margin-top:32px}}@media (min-width: 75.0625rem){.hy-paragraph-text.content_page.external.default,.hy-paragraph-text.field_of_science.external.default{margin-top:32px}}@media (min-width: 1601px){.hy-paragraph-text.content_page.external.default,.hy-paragraph-text.field_of_science.external.default{margin-top:40px}}@media (min-width: 75.0625rem){.hy-paragraph-text.content_page.external.large,.hy-paragraph-text.field_of_science.external.large{margin-top:40px}}@media (min-width: 1601px){.hy-paragraph-text.content_page.external.large,.hy-paragraph-text.field_of_science.external.large{margin-top:40px}}.hy-paragraph-text.content_page h3,.hy-paragraph-text.field_of_science h3{font-size:1.375rem;line-height:28px;letter-spacing:-0.7px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h3,.hy-paragraph-text.field_of_science h3{font-size:1.625rem;line-height:32px;letter-spacing:-0.8px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h3,.hy-paragraph-text.field_of_science h3{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.content_page h4,.hy-paragraph-text.field_of_science h4{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h4,.hy-paragraph-text.field_of_science h4{font-size:1.375rem;line-height:28px;letter-spacing:-0.69px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h4,.hy-paragraph-text.field_of_science h4{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.content_page h5,.hy-paragraph-text.field_of_science h5{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h5,.hy-paragraph-text.field_of_science h5{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h5,.hy-paragraph-text.field_of_science h5{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.content_page h6,.hy-paragraph-text.field_of_science h6{font-size:0.875rem;line-height:16px;letter-spacing:-0.44px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h6,.hy-paragraph-text.field_of_science h6{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h6,.hy-paragraph-text.field_of_science h6{padding-bottom:16px;padding-top:32px}}";
-const defaultParagraphTextCss = ":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-paragraph-text.content_page.external,.hy-paragraph-text.field_of_science.external{margin-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page.external,.hy-paragraph-text.field_of_science.external{margin-top:16px}}@media (min-width: 60rem){.hy-paragraph-text.content_page.external,.hy-paragraph-text.field_of_science.external{margin-top:32px}}@media (min-width: 75.0625rem){.hy-paragraph-text.content_page.external.default,.hy-paragraph-text.field_of_science.external.default{margin-top:32px}}@media (min-width: 1601px){.hy-paragraph-text.content_page.external.default,.hy-paragraph-text.field_of_science.external.default{margin-top:40px}}@media (min-width: 75.0625rem){.hy-paragraph-text.content_page.external.large,.hy-paragraph-text.field_of_science.external.large{margin-top:40px}}@media (min-width: 1601px){.hy-paragraph-text.content_page.external.large,.hy-paragraph-text.field_of_science.external.large{margin-top:40px}}.hy-paragraph-text.content_page h3,.hy-paragraph-text.field_of_science h3{font-size:1.375rem;line-height:28px;letter-spacing:-0.7px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h3,.hy-paragraph-text.field_of_science h3{font-size:1.625rem;line-height:32px;letter-spacing:-0.8px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h3,.hy-paragraph-text.field_of_science h3{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.content_page h4,.hy-paragraph-text.field_of_science h4{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h4,.hy-paragraph-text.field_of_science h4{font-size:1.375rem;line-height:28px;letter-spacing:-0.69px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h4,.hy-paragraph-text.field_of_science h4{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.content_page h5,.hy-paragraph-text.field_of_science h5{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h5,.hy-paragraph-text.field_of_science h5{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h5,.hy-paragraph-text.field_of_science h5{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.content_page h6,.hy-paragraph-text.field_of_science h6{font-size:0.875rem;line-height:16px;letter-spacing:-0.44px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h6,.hy-paragraph-text.field_of_science h6{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h6,.hy-paragraph-text.field_of_science h6{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.landing_page h3,.hy-paragraph-text.main_front_page h3{font-size:1.375rem;line-height:28px;letter-spacing:-0.7px;padding-bottom:12px;padding-top:32px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h3,.hy-paragraph-text.main_front_page h3{font-size:1.625rem;line-height:32px;letter-spacing:-0.8px;padding-bottom:16px;padding-top:40px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h3,.hy-paragraph-text.main_front_page h3{padding-bottom:16px;padding-top:48px}}.hy-paragraph-text.landing_page h4,.hy-paragraph-text.main_front_page h4{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h4,.hy-paragraph-text.main_front_page h4{font-size:1.375rem;line-height:28px;letter-spacing:-0.69px;padding-bottom:16px;padding-top:32px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h4,.hy-paragraph-text.main_front_page h4{padding-bottom:16px;padding-top:40px}}.hy-paragraph-text.landing_page h5,.hy-paragraph-text.main_front_page h5{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h5,.hy-paragraph-text.main_front_page h5{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:16px;padding-top:32px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h5,.hy-paragraph-text.main_front_page h5{padding-bottom:16px;padding-top:40px}}.hy-paragraph-text.landing_page h6,.hy-paragraph-text.main_front_page h6{font-size:0.875rem;line-height:16px;letter-spacing:-0.44px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h6,.hy-paragraph-text.main_front_page h6{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:16px;padding-top:32px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h6,.hy-paragraph-text.main_front_page h6{padding-bottom:16px;padding-top:40px}}:host{display:block}.hy-paragraph-text{font-size:0.9375rem;line-height:22px;color:var(--grayscale-dark-text);font-family:var(--main-font-family);letter-spacing:0;width:100%}@media (min-width: 30rem){.hy-paragraph-text{font-size:1rem;line-height:24px}}@media (min-width: 60rem){.hy-paragraph-text{width:91.46%}}@media (min-width: 1601px){.hy-paragraph-text{font-size:1.0625rem;line-height:26px;width:82.89%}}@media (min-width: 75.0625rem){.hy-paragraph-text__large{font-size:1.0625rem;line-height:26px;width:82.89%}}@media (min-width: 1601px){.hy-paragraph-text__large{width:74.17%}}@media (min-width: 60rem){.hy-paragraph-text.degree_programme_group{width:91.46%}}@media (min-width: 60rem){.hy-paragraph-text.main_front_page,.hy-paragraph-text.landing_page,.hy-paragraph-text.faculty,.hy-paragraph-text.generic_site_group,.hy-paragraph-text.degree_programme_group,.hy-paragraph-text.research_group{width:100%}}.hy-paragraph-text h1,.hy-paragraph-text h2,.hy-paragraph-text h3,.hy-paragraph-text h4,.hy-paragraph-text h5,.hy-paragraph-text h6{color:var(--grayscale-black);font-family:var(--main-font-family);font-weight:700;margin:0;width:100%}.hy-paragraph-text h1.negative,.hy-paragraph-text h2.negative,.hy-paragraph-text h3.negative,.hy-paragraph-text h4.negative,.hy-paragraph-text h5.negative,.hy-paragraph-text h6.negative{color:var(--grayscale-white)}.hy-paragraph-text a{font-size:0.875rem;line-height:20px;color:var(--link-blue);font-family:var(--main-font-family);font-weight:600}@media (min-width: 30rem){.hy-paragraph-text a{font-size:1rem;line-height:24px;letter-spacing:-0.1px}}@media (min-width: 1601px){.hy-paragraph-text a{font-size:1.0625rem;line-height:26px}}.hy-paragraph-text a:hover{color:var(--brand-main)}.hy-paragraph-text a[target=_blank]:after{display:inline-block;vertical-align:middle;width:12px;height:12px;margin-left:3px;background-size:contain;content:\"\";background-image:url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(4,121,165)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\");-webkit-transform:rotate(315deg);transform:rotate(315deg)}.hy-paragraph-text a[target=_blank]:after:hover{background-image:url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='pink'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\")}.hy-paragraph-text a[target=_blank]:hover:after{background-image:url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(14,104,139)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\")}.hy-paragraph-text p{margin-top:0;padding-top:0}.hy-paragraph-text p:last-of-type{margin-bottom:0}.hy-paragraph-text:first-child{margin-top:0 !important}hy-paragraph-text+hy-link-list{display:block;margin-top:32px}";
+const defaultParagraphTextCss = ":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-paragraph-text.content_page.external,.hy-paragraph-text.field_of_science.external{margin-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page.external,.hy-paragraph-text.field_of_science.external{margin-top:16px}}@media (min-width: 60rem){.hy-paragraph-text.content_page.external,.hy-paragraph-text.field_of_science.external{margin-top:32px}}@media (min-width: 75.0625rem){.hy-paragraph-text.content_page.external.default,.hy-paragraph-text.field_of_science.external.default{margin-top:32px}}@media (min-width: 1601px){.hy-paragraph-text.content_page.external.default,.hy-paragraph-text.field_of_science.external.default{margin-top:40px}}@media (min-width: 75.0625rem){.hy-paragraph-text.content_page.external.large,.hy-paragraph-text.field_of_science.external.large{margin-top:40px}}@media (min-width: 1601px){.hy-paragraph-text.content_page.external.large,.hy-paragraph-text.field_of_science.external.large{margin-top:40px}}.hy-paragraph-text.content_page h3,.hy-paragraph-text.field_of_science h3{font-size:1.375rem;line-height:28px;letter-spacing:-0.7px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h3,.hy-paragraph-text.field_of_science h3{font-size:1.625rem;line-height:32px;letter-spacing:-0.8px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h3,.hy-paragraph-text.field_of_science h3{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.content_page h4,.hy-paragraph-text.field_of_science h4{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h4,.hy-paragraph-text.field_of_science h4{font-size:1.375rem;line-height:28px;letter-spacing:-0.69px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h4,.hy-paragraph-text.field_of_science h4{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.content_page h5,.hy-paragraph-text.field_of_science h5{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h5,.hy-paragraph-text.field_of_science h5{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h5,.hy-paragraph-text.field_of_science h5{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.content_page h6,.hy-paragraph-text.field_of_science h6{font-size:0.875rem;line-height:16px;letter-spacing:-0.44px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h6,.hy-paragraph-text.field_of_science h6{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h6,.hy-paragraph-text.field_of_science h6{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.landing_page h3,.hy-paragraph-text.main_front_page h3{font-size:1.375rem;line-height:28px;letter-spacing:-0.7px;padding-bottom:12px;padding-top:32px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h3,.hy-paragraph-text.main_front_page h3{font-size:1.625rem;line-height:32px;letter-spacing:-0.8px;padding-bottom:16px;padding-top:40px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h3,.hy-paragraph-text.main_front_page h3{padding-bottom:16px;padding-top:48px}}.hy-paragraph-text.landing_page h4,.hy-paragraph-text.main_front_page h4{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h4,.hy-paragraph-text.main_front_page h4{font-size:1.375rem;line-height:28px;letter-spacing:-0.69px;padding-bottom:16px;padding-top:32px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h4,.hy-paragraph-text.main_front_page h4{padding-bottom:16px;padding-top:40px}}.hy-paragraph-text.landing_page h5,.hy-paragraph-text.main_front_page h5{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h5,.hy-paragraph-text.main_front_page h5{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:16px;padding-top:32px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h5,.hy-paragraph-text.main_front_page h5{padding-bottom:16px;padding-top:40px}}.hy-paragraph-text.landing_page h6,.hy-paragraph-text.main_front_page h6{font-size:0.875rem;line-height:16px;letter-spacing:-0.44px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h6,.hy-paragraph-text.main_front_page h6{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:16px;padding-top:32px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h6,.hy-paragraph-text.main_front_page h6{padding-bottom:16px;padding-top:40px}}:host{display:block}.hy-paragraph-text{font-size:0.9375rem;line-height:22px;color:var(--grayscale-dark-text);font-family:var(--main-font-family);letter-spacing:0;text-wrap:pretty;width:100%}@media (min-width: 30rem){.hy-paragraph-text{font-size:1rem;line-height:24px}}@media (min-width: 60rem){.hy-paragraph-text{width:91.46%}}@media (min-width: 1601px){.hy-paragraph-text{font-size:1.0625rem;line-height:26px;width:82.89%}}@media (min-width: 75.0625rem){.hy-paragraph-text__large{font-size:1.0625rem;line-height:26px;width:82.89%}}@media (min-width: 1601px){.hy-paragraph-text__large{width:74.17%}}@media (min-width: 60rem){.hy-paragraph-text.degree_programme_group{width:91.46%}}@media (min-width: 60rem){.hy-paragraph-text.main_front_page,.hy-paragraph-text.landing_page,.hy-paragraph-text.faculty,.hy-paragraph-text.generic_site_group,.hy-paragraph-text.degree_programme_group,.hy-paragraph-text.research_group{width:100%}}.hy-paragraph-text h1,.hy-paragraph-text h2,.hy-paragraph-text h3,.hy-paragraph-text h4,.hy-paragraph-text h5,.hy-paragraph-text h6{color:var(--grayscale-black);font-family:var(--main-font-family);font-weight:700;margin:0;width:100%}.hy-paragraph-text h1.negative,.hy-paragraph-text h2.negative,.hy-paragraph-text h3.negative,.hy-paragraph-text h4.negative,.hy-paragraph-text h5.negative,.hy-paragraph-text h6.negative{color:var(--grayscale-white)}.hy-paragraph-text a{font-size:0.875rem;line-height:20px;color:var(--link-blue);font-family:var(--main-font-family);font-weight:600}@media (min-width: 30rem){.hy-paragraph-text a{font-size:1rem;line-height:24px;letter-spacing:-0.1px}}@media (min-width: 1601px){.hy-paragraph-text a{font-size:1.0625rem;line-height:26px}}.hy-paragraph-text a:hover{color:var(--brand-main)}.hy-paragraph-text a[target=_blank]:after{display:inline-block;vertical-align:middle;width:12px;height:12px;margin-left:3px;background-size:contain;content:\"\";background-image:url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(4,121,165)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\");-webkit-transform:rotate(315deg);transform:rotate(315deg)}.hy-paragraph-text a[target=_blank]:after:hover{background-image:url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='pink'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\")}.hy-paragraph-text a[target=_blank]:hover:after{background-image:url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(14,104,139)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\")}.hy-paragraph-text p{margin-top:0;padding-top:0}.hy-paragraph-text p:last-of-type{margin-bottom:0}.hy-paragraph-text:first-child{margin-top:0 !important}hy-paragraph-text+hy-link-list{display:block;margin-top:32px}";
 const paragraphTextLandingCss = ":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-paragraph-text.landing_page h3,.hy-paragraph-text.main_front_page h3{font-size:1.375rem;line-height:28px;letter-spacing:-0.7px;padding-bottom:12px;padding-top:32px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h3,.hy-paragraph-text.main_front_page h3{font-size:1.625rem;line-height:32px;letter-spacing:-0.8px;padding-bottom:16px;padding-top:40px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h3,.hy-paragraph-text.main_front_page h3{padding-bottom:16px;padding-top:48px}}.hy-paragraph-text.landing_page h4,.hy-paragraph-text.main_front_page h4{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h4,.hy-paragraph-text.main_front_page h4{font-size:1.375rem;line-height:28px;letter-spacing:-0.69px;padding-bottom:16px;padding-top:32px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h4,.hy-paragraph-text.main_front_page h4{padding-bottom:16px;padding-top:40px}}.hy-paragraph-text.landing_page h5,.hy-paragraph-text.main_front_page h5{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h5,.hy-paragraph-text.main_front_page h5{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:16px;padding-top:32px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h5,.hy-paragraph-text.main_front_page h5{padding-bottom:16px;padding-top:40px}}.hy-paragraph-text.landing_page h6,.hy-paragraph-text.main_front_page h6{font-size:0.875rem;line-height:16px;letter-spacing:-0.44px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h6,.hy-paragraph-text.main_front_page h6{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:16px;padding-top:32px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h6,.hy-paragraph-text.main_front_page h6{padding-bottom:16px;padding-top:40px}}";

package/components/paragraph-text.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"paragraph-text.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,yiIAAyiI;;ACAzkI,MAAM,uBAAuB,GAAG,8wSAA8wS;;ACA9yS,MAAM,uBAAuB,GAAG,6mGAA6mG;;MCWhoG,aAAa;;;;;qBAEI,UAAU;uBACR,SAAS;;EAGvC,gBAAgB;IACd,IAAI,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IAC5C,IAAI,SAAS,EAAE;MACb,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE;QACjD,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC;OAC5B;KACF;GACF;EAED,MAAM;IACJ,MAAM,eAAe,GAAG;MACtB,mBAAmB;MACnB,sBAAsB,IAAI,CAAC,WAAW,EAAE;MACxC,GAAG,IAAI,CAAC,OAAO,EAAE;MACjB,GAAG,IAAI,CAAC,SAAS,EAAE;MACnB,GAAG,IAAI,CAAC,WAAW,EAAE;KACtB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEZ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,eAAe,IACzB,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/paragraph-text/paragraph-text-content.scss?tag=hy-paragraph-text&mode=content","./src/components/paragraph-text/paragraph-text.scss?tag=hy-paragraph-text&mode=default","./src/components/paragraph-text/paragraph-text-landing.scss?tag=hy-paragraph-text&mode=landing","./src/components/paragraph-text/paragraph-text.tsx"],"sourcesContent":["//overrides for Content pages\n\n/\n Common styles for text plus mobile & tablet & small desktop\n* in Content Pages and Field of science pages.\n*/\n.hy-paragraph-text.content_page.external,\n.hy-paragraph-text.field_of_science.external {\n margin-top: 24px; //total gap between heading h2 and paragraph content is 48px\n\n @include breakpoint($narrow) {\n margin-top: 16px; //total gap 40px\n }\n @include breakpoint($wide) {\n margin-top: 32px; //total gap 56px\n }\n}\n\n// There is a sidebar on the Content page\n.hy-paragraph-text.content_page.external.default,\n.hy-paragraph-text.field_of_science.external.default {\n @include breakpoint($extrawide) {\n margin-top: 32px; //total gap 56px\n }\n @include breakpoint($xlarge) {\n margin-top: 40px; //total gap 64px\n }\n}\n\n// No sidebar on the Content page\n.hy-paragraph-text.content_page.external.large,\n.hy-paragraph-text.field_of_science.external.large {\n @include breakpoint($extrawide) {\n margin-top: 40px; //total gap 64px\n }\n @include breakpoint($xlarge) {\n margin-top: 40px; //total gap 64px\n }\n}\n\n.hy-paragraph-text.content_page,\n.hy-paragraph-text.field_of_science {\n h3 {\n // text H3 small\n @include font-size(22px, 28px);\n letter-spacing: -0.7px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H3 Medium size\n @include font-size(26px, 32px);\n letter-spacing: -0.8px;\n\n padding-bottom: 12px;\n padding-top: 28px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 32px;\n }\n }\n\n h4 {\n // text H4 small\n @include font-size(18px, 24px);\n letter-spacing: -0.56px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H4 Medium size\n @include font-size(22px, 28px);\n letter-spacing: -0.69px;\n\n padding-bottom: 12px;\n padding-top: 28px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 32px;\n }\n }\n\n h5 {\n // text H5 small\n @include font-size(16px, 20px);\n letter-spacing: -0.5px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H5 Medium size\n @include font-size(18px, 24px);\n letter-spacing: -0.56px;\n\n padding-bottom: 12px;\n padding-top: 28px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 32px;\n }\n }\n\n h6 {\n // text H6 small\n @include font-size(14px, 16px);\n letter-spacing: -0.44px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H6 Medium size\n @include font-size(16px, 20px);\n letter-spacing: -0.5px;\n\n padding-bottom: 12px;\n padding-top: 28px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 32px;\n }\n }\n}\n","@import \"./paragraph-text-content.scss\";\n@import \"./paragraph-text-landing.scss\";\n\n:host {\n display: block;\n}\n\n// General styles for text paragraph\n.hy-paragraph-text {\n @include font-size(15px, 22px); // Paragraph Small size\n color: var(--grayscale-dark-text);\n font-family: var(--main-font-family);\n letter-spacing: 0;\n width: 100%;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px); // Paragraph Medium size\n }\n @include breakpoint($wide) {\n width: 91.46%; // 11 col\n }\n @include breakpoint($xlarge) {\n @include font-size(17px, 26px); // Paragraph Large size\n width: 82.89%; // 10 col\n }\n\n &__large {\n @include breakpoint($extrawide) {\n @include font-size(17px, 26px); // Paragraph Large size\n width: 82.89%; // 10 col\n }\n @include breakpoint($xlarge) {\n width: 74.17%; // 9 col\n }\n }\n\n &.degree_programme_group {\n @include breakpoint($wide) {\n width: 91.46%; // 11 col\n }\n }\n\n &.main_front_page,\n &.landing_page,\n &.faculty,\n &.generic_site_group,\n &.degree_programme_group,\n &.research_group {\n @include breakpoint($wide) {\n width: 100%;\n }\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n font-weight: 700;\n margin: 0;\n width: 100%;\n\n &.negative {\n color: var(--grayscale-white);\n }\n }\n\n // link within paragraph (Open sans semibold)\n a {\n @include font-size(14px, 20px); // Paragraph Small size\n color: var(--link-blue);\n font-family: var(--main-font-family);\n font-weight: 600;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px);\n letter-spacing: -0.1px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(17px, 26px); // Paragraph Large size\n }\n\n &:hover {\n color: var(--brand-main);\n }\n }\n\n a[target=\"_blank\"]:after {\n display: inline-block;\n vertical-align: middle;\n width: 12px;\n height: 12px;\n margin-left: 3px;\n background-size: contain;\n content: \"\";\n background-image: url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(4,121,165)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\");\n transform: rotate(315deg);\n\n &:hover {\n background-image: url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='pink'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\");\n }\n }\n\n a[target=\"_blank\"]:hover {\n &:after {\n background-image: url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(14,104,139)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\");\n }\n }\n\n p {\n margin-top: 0;\n padding-top: 0;\n\n &:last-of-type {\n margin-bottom: 0;\n }\n }\n\n // When hy-paragraph-text is the first child it will not add spacing to top. Will fix heading + text spacing issue.\n &:first-child {\n margin-top: 0 !important;\n }\n}\n\nhy-paragraph-text + hy-link-list {\n display: block;\n margin-top: 32px;\n}\n","//overrides for Landing pages and Front page\n\n// Common styles for text plus mobile & tablet & small desktop in Landing Pages\n.hy-paragraph-text.landing_page,\n.hy-paragraph-text.main_front_page {\n h3 {\n // text H3 small\n @include font-size(22px, 28px);\n letter-spacing: -0.7px;\n\n padding-bottom: 12px;\n padding-top: 32px;\n\n @include breakpoint($narrow) {\n // text H3 Medium size\n @include font-size(26px, 32px);\n letter-spacing: -0.8px;\n\n padding-bottom: 16px;\n padding-top: 40px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 48px;\n }\n }\n\n h4 {\n // text H4 small\n @include font-size(18px, 24px);\n letter-spacing: -0.56px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H4 Medium size\n @include font-size(22px, 28px);\n letter-spacing: -0.69px;\n\n padding-bottom: 16px;\n padding-top: 32px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 40px;\n }\n }\n\n h5 {\n // text H5 small\n @include font-size(16px, 20px);\n letter-spacing: -0.5px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H5 Medium size\n @include font-size(18px, 24px);\n letter-spacing: -0.56px;\n\n padding-bottom: 16px;\n padding-top: 32px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 40px;\n }\n }\n\n h6 {\n // text H6 small\n @include font-size(14px, 16px);\n letter-spacing: -0.44px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H6 Medium size\n @include font-size(16px, 20px);\n letter-spacing: -0.5px;\n\n padding-bottom: 16px;\n padding-top: 32px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 40px;\n }\n }\n}\n","import {Component, Element, h, Host, Prop} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-paragraph-text\",\n styleUrls: {\n default: \"paragraph-text.scss\",\n content: \"paragraph-text-content.scss\",\n landing: \"paragraph-text-landing.scss\",\n },\n shadow: false,\n})\nexport class ParagraphText {\n @Prop() variant: string;\n @Prop() placement: string = \"internal\";\n @Prop() headerstyle: string = \"default\";\n @Element() el: HTMLElement;\n\n 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 render() {\n const classAttributes = [\n \"hy-paragraph-text\",\n `hy-paragraph-text__${this.headerstyle}`,\n `${this.variant}`,\n `${this.placement}`,\n `${this.headerstyle}`,\n ].join(\" \");\n\n return (\n <Host>\n <div class={classAttributes}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"paragraph-text.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,yiIAAyiI;;ACAzkI,MAAM,uBAAuB,GAAG,+xSAA+xS;;ACA/zS,MAAM,uBAAuB,GAAG,6mGAA6mG;;MCWhoG,aAAa;;;;;qBAEI,UAAU;uBACR,SAAS;;EAGvC,gBAAgB;IACd,IAAI,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IAC5C,IAAI,SAAS,EAAE;MACb,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE;QACjD,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC;OAC5B;KACF;GACF;EAED,MAAM;IACJ,MAAM,eAAe,GAAG;MACtB,mBAAmB;MACnB,sBAAsB,IAAI,CAAC,WAAW,EAAE;MACxC,GAAG,IAAI,CAAC,OAAO,EAAE;MACjB,GAAG,IAAI,CAAC,SAAS,EAAE;MACnB,GAAG,IAAI,CAAC,WAAW,EAAE;KACtB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEZ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,eAAe,IACzB,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/hy-paragraph-text/paragraph-text-content.scss?tag=hy-paragraph-text&mode=content","./src/components/hy-paragraph-text/paragraph-text.scss?tag=hy-paragraph-text&mode=default","./src/components/hy-paragraph-text/paragraph-text-landing.scss?tag=hy-paragraph-text&mode=landing","./src/components/hy-paragraph-text/paragraph-text.tsx"],"sourcesContent":["//overrides for Content pages\n\n/\n Common styles for text plus mobile & tablet & small desktop\n* in Content Pages and Field of science pages.\n*/\n.hy-paragraph-text.content_page.external,\n.hy-paragraph-text.field_of_science.external {\n margin-top: 24px; //total gap between heading h2 and paragraph content is 48px\n\n @include breakpoint($narrow) {\n margin-top: 16px; //total gap 40px\n }\n @include breakpoint($wide) {\n margin-top: 32px; //total gap 56px\n }\n}\n\n// There is a sidebar on the Content page\n.hy-paragraph-text.content_page.external.default,\n.hy-paragraph-text.field_of_science.external.default {\n @include breakpoint($extrawide) {\n margin-top: 32px; //total gap 56px\n }\n @include breakpoint($xlarge) {\n margin-top: 40px; //total gap 64px\n }\n}\n\n// No sidebar on the Content page\n.hy-paragraph-text.content_page.external.large,\n.hy-paragraph-text.field_of_science.external.large {\n @include breakpoint($extrawide) {\n margin-top: 40px; //total gap 64px\n }\n @include breakpoint($xlarge) {\n margin-top: 40px; //total gap 64px\n }\n}\n\n.hy-paragraph-text.content_page,\n.hy-paragraph-text.field_of_science {\n h3 {\n // text H3 small\n @include font-size(22px, 28px);\n letter-spacing: -0.7px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H3 Medium size\n @include font-size(26px, 32px);\n letter-spacing: -0.8px;\n\n padding-bottom: 12px;\n padding-top: 28px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 32px;\n }\n }\n\n h4 {\n // text H4 small\n @include font-size(18px, 24px);\n letter-spacing: -0.56px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H4 Medium size\n @include font-size(22px, 28px);\n letter-spacing: -0.69px;\n\n padding-bottom: 12px;\n padding-top: 28px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 32px;\n }\n }\n\n h5 {\n // text H5 small\n @include font-size(16px, 20px);\n letter-spacing: -0.5px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H5 Medium size\n @include font-size(18px, 24px);\n letter-spacing: -0.56px;\n\n padding-bottom: 12px;\n padding-top: 28px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 32px;\n }\n }\n\n h6 {\n // text H6 small\n @include font-size(14px, 16px);\n letter-spacing: -0.44px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H6 Medium size\n @include font-size(16px, 20px);\n letter-spacing: -0.5px;\n\n padding-bottom: 12px;\n padding-top: 28px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 32px;\n }\n }\n}\n","@import \"./paragraph-text-content.scss\";\n@import \"./paragraph-text-landing.scss\";\n\n:host {\n display: block;\n}\n\n// General styles for text paragraph\n.hy-paragraph-text {\n @include font-size(15px, 22px); // Paragraph Small size\n color: var(--grayscale-dark-text);\n font-family: var(--main-font-family);\n letter-spacing: 0;\n text-wrap: pretty;\n width: 100%;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px); // Paragraph Medium size\n }\n @include breakpoint($wide) {\n width: 91.46%; // 11 col\n }\n @include breakpoint($xlarge) {\n @include font-size(17px, 26px); // Paragraph Large size\n width: 82.89%; // 10 col\n }\n\n &__large {\n @include breakpoint($extrawide) {\n @include font-size(17px, 26px); // Paragraph Large size\n width: 82.89%; // 10 col\n }\n @include breakpoint($xlarge) {\n width: 74.17%; // 9 col\n }\n }\n\n &.degree_programme_group {\n @include breakpoint($wide) {\n width: 91.46%; // 11 col\n }\n }\n\n &.main_front_page,\n &.landing_page,\n &.faculty,\n &.generic_site_group,\n &.degree_programme_group,\n &.research_group {\n @include breakpoint($wide) {\n width: 100%;\n }\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n font-weight: 700;\n margin: 0;\n width: 100%;\n\n &.negative {\n color: var(--grayscale-white);\n }\n }\n\n // link within paragraph (Open sans semibold)\n a {\n @include font-size(14px, 20px); // Paragraph Small size\n color: var(--link-blue);\n font-family: var(--main-font-family);\n font-weight: 600;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px);\n letter-spacing: -0.1px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(17px, 26px); // Paragraph Large size\n }\n\n &:hover {\n color: var(--brand-main);\n }\n }\n\n a[target=\"_blank\"]:after {\n display: inline-block;\n vertical-align: middle;\n width: 12px;\n height: 12px;\n margin-left: 3px;\n background-size: contain;\n content: \"\";\n background-image: url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(4,121,165)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\");\n transform: rotate(315deg);\n\n &:hover {\n background-image: url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='pink'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\");\n }\n }\n\n a[target=\"_blank\"]:hover {\n &:after {\n background-image: url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(14,104,139)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\");\n }\n }\n\n p {\n margin-top: 0;\n padding-top: 0;\n\n &:last-of-type {\n margin-bottom: 0;\n }\n }\n\n // When hy-paragraph-text is the first child it will not add spacing to top. Will fix heading + text spacing issue.\n &:first-child {\n margin-top: 0 !important;\n }\n}\n\nhy-paragraph-text + hy-link-list {\n display: block;\n margin-top: 32px;\n}\n","//overrides for Landing pages and Front page\n\n// Common styles for text plus mobile & tablet & small desktop in Landing Pages\n.hy-paragraph-text.landing_page,\n.hy-paragraph-text.main_front_page {\n h3 {\n // text H3 small\n @include font-size(22px, 28px);\n letter-spacing: -0.7px;\n\n padding-bottom: 12px;\n padding-top: 32px;\n\n @include breakpoint($narrow) {\n // text H3 Medium size\n @include font-size(26px, 32px);\n letter-spacing: -0.8px;\n\n padding-bottom: 16px;\n padding-top: 40px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 48px;\n }\n }\n\n h4 {\n // text H4 small\n @include font-size(18px, 24px);\n letter-spacing: -0.56px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H4 Medium size\n @include font-size(22px, 28px);\n letter-spacing: -0.69px;\n\n padding-bottom: 16px;\n padding-top: 32px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 40px;\n }\n }\n\n h5 {\n // text H5 small\n @include font-size(16px, 20px);\n letter-spacing: -0.5px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H5 Medium size\n @include font-size(18px, 24px);\n letter-spacing: -0.56px;\n\n padding-bottom: 16px;\n padding-top: 32px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 40px;\n }\n }\n\n h6 {\n // text H6 small\n @include font-size(14px, 16px);\n letter-spacing: -0.44px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H6 Medium size\n @include font-size(16px, 20px);\n letter-spacing: -0.5px;\n\n padding-bottom: 16px;\n padding-top: 32px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 40px;\n }\n }\n}\n","import {Component, Element, h, Host, Prop} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-paragraph-text\",\n styleUrls: {\n default: \"paragraph-text.scss\",\n content: \"paragraph-text-content.scss\",\n landing: \"paragraph-text-landing.scss\",\n },\n shadow: false,\n})\nexport class ParagraphText {\n @Prop() variant: string;\n @Prop() placement: string = \"internal\";\n @Prop() headerstyle: string = \"default\";\n @Element() el: HTMLElement;\n\n 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 render() {\n const classAttributes = [\n \"hy-paragraph-text\",\n `hy-paragraph-text__${this.headerstyle}`,\n `${this.variant}`,\n `${this.placement}`,\n `${this.headerstyle}`,\n ].join(\" \");\n\n return (\n <Host>\n <div class={classAttributes}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/person-profile.listing.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"person-profile.listing.js","mappings":";;;AAAA,MAAM,uBAAuB,GAAG,mvGAAmvG;;MCctwG,aAAa;;;;;eAEoB,OAAO;;;;sBAIrB,KAAK;;EAEnC,MAAM;IACJ,QACE,EAAC,IAAI,QACH,UACE,KAAK,EAAE,6BAA6B,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,MAAM,GAAG,WAAW,GAAG,EAAE,IAC5E,IAAI,CAAC,YAAY,GAAG,eAAe,GAAG,EACxC,IAAI,IAAI,CAAC,gBAAgB,GAAG,YAAY,GAAG,EAAE,EAAE,IAE9C,IAAI,CAAC,UAAU,IAAI,UAAI,KAAK,EAAC,kCAAkC,IAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAM,EAC1F,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAC,KAAK,EAAE,KAAK,EAAC;MAC7B,IAAK,KAAa,CAAC,MAAM,CAAC,CAAC,EAAC,KAAK,EAAC,KAAK,KAAK,KAAK,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;QAC/D,QACE,cACG,CAAC,IAAI,CAAC,UAAU,IAAI,UAAI,KAAK,EAAC,kCAAkC,IAAE,KAAK,CAAM,EAE9E,UAAI,KAAK,EAAC,kCAAkC,IACxC,KAAa,CAAC,GAAG,CAAC,CAAC,EAAC,KAAK,EAAE,GAAG,EAAC,EAAE,KAAK;UACtC,IAAI,GAAG,EAAE;YACP,QACE,UAAI,KAAK,EAAC,iCAAiC,IACzC,SAAG,IAAI,EAAE,GAAG,IACT,KAAK,KAAK,CAAC,IAAI,eAAS,IAAI,EAAE,qBAAqB,EAAE,IAAI,EAAE,EAAE,GAAI,EAClE,gBAAO,KAAK,CAAQ,CAClB,CACD,EACL;WACH;UAED,QACE,UAAI,KAAK,EAAC,iCAAiC,IACxC,KAAK,KAAK,CAAC,IAAI,eAAS,IAAI,EAAE,qBAAqB,EAAE,IAAI,EAAE,EAAE,GAAI,EAClE,gBAAO,KAAK,CAAQ,CACjB,EACL;SACH,CAAC,CACC,CACF,EACL;OACH;KACF,CAAC,CACC,CACA,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/person-profile/person-profile-listing/person-profile-listing.scss?tag=hy-person-profile-listing","./src/components/person-profile/person-profile-listing/person-profile.listing.tsx"],"sourcesContent":[".hy-person-profile-listing {\n font-family: var(--main-font-family);\n padding: 0;\n margin: 0;\n list-style: none;\n display: grid;\n gap: 24px;\n\n @include breakpoint($medium) {\n gap: 2px 24px;\n }\n\n &.col-2 {\n @include breakpoint($fullhd) {\n grid-template-columns: repeat(2, 50%);\n }\n }\n\n &.col-4 {\n gap: 32px 24px;\n\n @include breakpoint($medium) {\n grid-template-columns: repeat(2, 50%);\n }\n\n @include breakpoint($wide) {\n grid-template-columns: repeat(3, calc(100% / 3));\n }\n\n @include breakpoint($fullhd) {\n grid-template-columns: repeat(4, 25%);\n }\n }\n}\n\n.hy-person-profile-listing__label {\n @include font-size(15px, 18px);\n @include font-weight($bold);\n letter-spacing: -0.28px;\n color: var(--grayscale-black);\n margin: 0 0 8px;\n\n @include breakpoint($medium) {\n @include font-size(17px, 20px);\n letter-spacing: -0.32px;\n }\n}\n\n.hy-person-profile-listing__items {\n margin: 0;\n padding: 0;\n list-style: none;\n display: grid;\n gap: 8px;\n\n .is-inline & {\n display: inline-flex;\n flex-wrap: wrap;\n gap: 0;\n }\n\n .text-tight & {\n gap: 0;\n }\n}\n\n.hy-person-profile-listing__item {\n @include font-size(15px, 22px);\n @include font-weight($regular);\n color: var(--grayscale-black);\n display: inline-flex;\n\n @include breakpoint($medium) {\n @include font-size(17px, 26px);\n }\n\n a {\n text-decoration: none;\n color: var(--link-blue);\n\n &:hover {\n text-decoration: underline;\n }\n }\n\n hy-icon {\n display: none !important;\n justify-content: center;\n align-items: center;\n height: 28px;\n width: 28px;\n\n @include breakpoint($medium) {\n display: inline-flex !important;\n }\n\n .without-icons & {\n display: none !important;\n }\n }\n}\n","import {Component, Host, h, Prop} from \"@stencil/core\";\n\nexport type personProfileListingItems = [\n {\n label: string;\n items: string[];\n }\n];\n\n@Component({\n tag: \"hy-person-profile-listing\",\n shadow: false,\n styleUrl: \"person-profile-listing.scss\",\n})\nexport class PersonProfile {\n @Prop() items: personProfileListingItems;\n @Prop() col?: \"col-1\" \| \"col-2\" \| \"col-4\" = \"col-2\";\n @Prop() inline?: boolean;\n @Prop() withoutIcons?: boolean;\n @Prop() textSpacingTight?: boolean;\n @Prop() isResearch: boolean = false;\n\n render() {\n return (\n <Host>\n <ul\n class={`hy-person-profile-listing ${this.col} ${this.inline ? \"is-inline\" : \"\"} ${\n this.withoutIcons ? \"without-icons\" : \"\"\n } ${this.textSpacingTight ? \"text-tight\" : \"\"}`}\n >\n {this.isResearch && <h3 class=\"hy-person-profile-listing__label\">{this.items[0].label}</h3>}\n {this.items.map(({label, items}) => {\n if ((items as any).filter(({label}) => label !== \"\").length > 0) {\n return (\n <li>\n {!this.isResearch && <h3 class=\"hy-person-profile-listing__label\">{label}</h3>}\n\n <ul class=\"hy-person-profile-listing__items\">\n {(items as any).map(({label, url}, index) => {\n if (url) {\n return (\n <li class=\"hy-person-profile-listing__item\">\n <a href={url}>\n {index !== 0 && <hy-icon icon={\"hy-icon-caret-right\"} size={10} />}\n <span>{label}</span>\n </a>\n </li>\n );\n }\n\n return (\n <li class=\"hy-person-profile-listing__item\">\n {index !== 0 && <hy-icon icon={\"hy-icon-caret-right\"} size={10} />}\n <span>{label}</span>\n </li>\n );\n })}\n </ul>\n </li>\n );\n }\n })}\n </ul>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"person-profile.listing.js","mappings":";;;AAAA,MAAM,uBAAuB,GAAG,mvGAAmvG;;MCctwG,aAAa;;;;;eAEoB,OAAO;;;;sBAIrB,KAAK;;EAEnC,MAAM;IACJ,QACE,EAAC,IAAI,QACH,UACE,KAAK,EAAE,6BAA6B,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,MAAM,GAAG,WAAW,GAAG,EAAE,IAC5E,IAAI,CAAC,YAAY,GAAG,eAAe,GAAG,EACxC,IAAI,IAAI,CAAC,gBAAgB,GAAG,YAAY,GAAG,EAAE,EAAE,IAE9C,IAAI,CAAC,UAAU,IAAI,UAAI,KAAK,EAAC,kCAAkC,IAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAM,EAC1F,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAC,KAAK,EAAE,KAAK,EAAC;MAC7B,IAAK,KAAa,CAAC,MAAM,CAAC,CAAC,EAAC,KAAK,EAAC,KAAK,KAAK,KAAK,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;QAC/D,QACE,cACG,CAAC,IAAI,CAAC,UAAU,IAAI,UAAI,KAAK,EAAC,kCAAkC,IAAE,KAAK,CAAM,EAE9E,UAAI,KAAK,EAAC,kCAAkC,IACxC,KAAa,CAAC,GAAG,CAAC,CAAC,EAAC,KAAK,EAAE,GAAG,EAAC,EAAE,KAAK;UACtC,IAAI,GAAG,EAAE;YACP,QACE,UAAI,KAAK,EAAC,iCAAiC,IACzC,SAAG,IAAI,EAAE,GAAG,IACT,KAAK,KAAK,CAAC,IAAI,eAAS,IAAI,EAAE,qBAAqB,EAAE,IAAI,EAAE,EAAE,GAAI,EAClE,gBAAO,KAAK,CAAQ,CAClB,CACD,EACL;WACH;UAED,QACE,UAAI,KAAK,EAAC,iCAAiC,IACxC,KAAK,KAAK,CAAC,IAAI,eAAS,IAAI,EAAE,qBAAqB,EAAE,IAAI,EAAE,EAAE,GAAI,EAClE,gBAAO,KAAK,CAAQ,CACjB,EACL;SACH,CAAC,CACC,CACF,EACL;OACH;KACF,CAAC,CACC,CACA,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/hy-person-profile/person-profile-listing/person-profile-listing.scss?tag=hy-person-profile-listing","./src/components/hy-person-profile/person-profile-listing/person-profile.listing.tsx"],"sourcesContent":[".hy-person-profile-listing {\n font-family: var(--main-font-family);\n padding: 0;\n margin: 0;\n list-style: none;\n display: grid;\n gap: 24px;\n\n @include breakpoint($medium) {\n gap: 2px 24px;\n }\n\n &.col-2 {\n @include breakpoint($fullhd) {\n grid-template-columns: repeat(2, 50%);\n }\n }\n\n &.col-4 {\n gap: 32px 24px;\n\n @include breakpoint($medium) {\n grid-template-columns: repeat(2, 50%);\n }\n\n @include breakpoint($wide) {\n grid-template-columns: repeat(3, calc(100% / 3));\n }\n\n @include breakpoint($fullhd) {\n grid-template-columns: repeat(4, 25%);\n }\n }\n}\n\n.hy-person-profile-listing__label {\n @include font-size(15px, 18px);\n @include font-weight($bold);\n letter-spacing: -0.28px;\n color: var(--grayscale-black);\n margin: 0 0 8px;\n\n @include breakpoint($medium) {\n @include font-size(17px, 20px);\n letter-spacing: -0.32px;\n }\n}\n\n.hy-person-profile-listing__items {\n margin: 0;\n padding: 0;\n list-style: none;\n display: grid;\n gap: 8px;\n\n .is-inline & {\n display: inline-flex;\n flex-wrap: wrap;\n gap: 0;\n }\n\n .text-tight & {\n gap: 0;\n }\n}\n\n.hy-person-profile-listing__item {\n @include font-size(15px, 22px);\n @include font-weight($regular);\n color: var(--grayscale-black);\n display: inline-flex;\n\n @include breakpoint($medium) {\n @include font-size(17px, 26px);\n }\n\n a {\n text-decoration: none;\n color: var(--link-blue);\n\n &:hover {\n text-decoration: underline;\n }\n }\n\n hy-icon {\n display: none !important;\n justify-content: center;\n align-items: center;\n height: 28px;\n width: 28px;\n\n @include breakpoint($medium) {\n display: inline-flex !important;\n }\n\n .without-icons & {\n display: none !important;\n }\n }\n}\n","import {Component, Host, h, Prop} from \"@stencil/core\";\n\nexport type personProfileListingItems = [\n {\n label: string;\n items: string[];\n }\n];\n\n@Component({\n tag: \"hy-person-profile-listing\",\n shadow: false,\n styleUrl: \"person-profile-listing.scss\",\n})\nexport class PersonProfile {\n @Prop() items: personProfileListingItems;\n @Prop() col?: \"col-1\" \| \"col-2\" \| \"col-4\" = \"col-2\";\n @Prop() inline?: boolean;\n @Prop() withoutIcons?: boolean;\n @Prop() textSpacingTight?: boolean;\n @Prop() isResearch: boolean = false;\n\n render() {\n return (\n <Host>\n <ul\n class={`hy-person-profile-listing ${this.col} ${this.inline ? \"is-inline\" : \"\"} ${\n this.withoutIcons ? \"without-icons\" : \"\"\n } ${this.textSpacingTight ? \"text-tight\" : \"\"}`}\n >\n {this.isResearch && <h3 class=\"hy-person-profile-listing__label\">{this.items[0].label}</h3>}\n {this.items.map(({label, items}) => {\n if ((items as any).filter(({label}) => label !== \"\").length > 0) {\n return (\n <li>\n {!this.isResearch && <h3 class=\"hy-person-profile-listing__label\">{label}</h3>}\n\n <ul class=\"hy-person-profile-listing__items\">\n {(items as any).map(({label, url}, index) => {\n if (url) {\n return (\n <li class=\"hy-person-profile-listing__item\">\n <a href={url}>\n {index !== 0 && <hy-icon icon={\"hy-icon-caret-right\"} size={10} />}\n <span>{label}</span>\n </a>\n </li>\n );\n }\n\n return (\n <li class=\"hy-person-profile-listing__item\">\n {index !== 0 && <hy-icon icon={\"hy-icon-caret-right\"} size={10} />}\n <span>{label}</span>\n </li>\n );\n })}\n </ul>\n </li>\n );\n }\n })}\n </ul>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/process-flow-box.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { u as ProcessFlowBoxVariants } from './utils.js';
+import { q as ProcessFlowBoxVariants } from './utils.js';
 import { d as defineCustomElement$1 } from './hy-box2.js';
 const processFlowBoxCss = ":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-process-flow-box{height:calc(100% - 32px);position:relative}.hy-process-flow-box__step__container{bottom:unset;display:grid;height:82px;place-items:center;position:absolute;top:-35px;width:138px;z-index:1}@media (min-width: 30rem){.hy-process-flow-box__step__container{bottom:-62px;display:grid;height:60px;top:unset;width:210px}}.hy-process-flow-box__step__container svg polygon{fill:var(--grayscale-background-arrow)}.hy-process-flow-box__step__container svg.mobile{display:block}@media (min-width: 30rem){.hy-process-flow-box__step__container svg.mobile{display:none}}.hy-process-flow-box__step__container svg.desktop{display:none}@media (min-width: 30rem){.hy-process-flow-box__step__container svg.desktop{display:block}}.hy-process-flow-box .first.even.hy-process-flow-box__step__container{left:calc(50% - 69px + 16px)}@media (min-width: 30rem){.hy-process-flow-box .first.even.hy-process-flow-box__step__container{left:-90px}}@media (min-width: 60rem){.hy-process-flow-box .first.even.hy-process-flow-box__step__container{left:0}}.hy-process-flow-box .first.odd.hy-process-flow-box__step__container{left:calc(50% - 69px + 16px)}@media (min-width: 30rem){.hy-process-flow-box .first.odd.hy-process-flow-box__step__container{left:0}}.hy-process-flow-box :not(.first).even.hy-process-flow-box__step__container{left:calc(50% - 69px + 16px)}@media (min-width: 30rem){.hy-process-flow-box :not(.first).even.hy-process-flow-box__step__container{left:-90px}}.hy-process-flow-box :not(.first).odd.hy-process-flow-box__step__container{left:calc(50% - 69px + 16px)}@media (min-width: 30rem){.hy-process-flow-box :not(.first).odd.hy-process-flow-box__step__container{left:0}}@media (min-width: 60rem){.hy-process-flow-box :not(.first).odd.hy-process-flow-box__step__container{left:-90px}}.hy-process-flow-box__step{background-color:transparent;color:var(--grayscale-black);font-family:var(--main-font-family);font-size:16px;font-weight:600;-ms-hyphens:auto;hyphens:auto;letter-spacing:0;line-height:22px;padding:19px 17px;position:absolute;text-align:center;word-break:break-word;z-index:11}@media (min-width: 30rem){.hy-process-flow-box__step{left:0;max-width:175px;padding:8px 23px 8px 14px}}.hy-process-flow-box__number__container{display:grid;height:64px;place-items:center;position:relative;width:64px;z-index:2}.hy-process-flow-box__number{background-color:var(--brand-main-light);color:var(--grayscale-white);display:grid;font-family:var(--main-font-family);font-size:36px;font-weight:600;height:48px;letter-spacing:0;line-height:49px;margin:0;padding:0;place-items:center;position:relative;width:48px}.hy-process-flow-box__number::after{content:\"\";height:48px;left:-6px;position:absolute;width:48px}.hy-process-flow-box__content.small{padding:16px 32px;padding-bottom:64px}@media (min-width: 60rem){.hy-process-flow-box__content.small{padding:20px;padding-bottom:64px}}.hy-process-flow-box__content.big{padding:24px 32px;padding-bottom:64px}.hy-process-flow-box__content{background-color:var(--grayscale-background-box);height:100%;margin-left:32px;margin-top:-32px;position:relative}.hy-process-flow-box__title{color:var(--brand-main-nearly-black);font-family:var(--main-font-family);font-size:26px;font-weight:600;letter-spacing:-0.82px;line-height:32px;-ms-hyphens:auto;hyphens:auto;margin-bottom:16px;margin-top:0;word-break:break-word}.hy-process-flow-box__description{color:var(--grayscale-dark);font-family:var(--main-font-family);font-size:16px;letter-spacing:0;line-height:24px}.small.hy-process-flow-box .small.hy-process-flow-box__number__container{height:56px;width:56px}.small.hy-process-flow-box .small.hy-process-flow-box__number__container .hy-process-flow-box__number{font-size:28px;height:40px;line-height:40px;width:40px}";

package/components/process-flow-box.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"process-flow-box.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,y1JAAy1J;;MCSt2J,cAAc;;;;;mBACiB,sBAAsB,CAAC,OAAO;;;;iCAIhC,EAAE;qBACI,SAAS;;;EAEvD,MAAM;IACJ,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,qBAAqB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACrE,MAAM,mBAAmB,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,8BAA8B,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAErF,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,MAAM,GAAG,KAAK,CAAC;IAEvE,MAAM,kBAAkB,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,wCAAwC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9F,MAAM,gBAAgB,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,WAAW,EAAE,sCAAsC,CAAC,CAAC,IAAI,CAC/G,GAAG,CACJ,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,YAAY,IACrB,IAAI,CAAC,qBAAqB,KACzB,WAAK,KAAK,EAAE,gBAAgB,IAC1B,WAAK,KAAK,EAAC,SAAS,EAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,IAC1C,eAAS,MAAM,EAAC,uCAAuC,GAAG,CACtD,EACN,WAAK,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,IACzC,eAAS,MAAM,EAAC,wCAAwC,GAAG,CACvD,EACN,UAAI,KAAK,EAAC,2BAA2B,IAAE,IAAI,CAAC,qBAAqB,CAAM,CACnE,CACP,EACD,WAAK,KAAK,EAAE,kBAAkB,IAC5B,UACE,KAAK,EAAC,6BAA6B,gBACvB,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,EAAE,IAErE,WAAK,KAAK,EAAC,mCAAmC,IAAE,IAAI,CAAC,SAAS,CAAO,CAClE,CACD,EACN,WAAK,KAAK,EAAE,mBAAmB,IAC7B,UAAI,KAAK,EAAC,4BAA4B,EAAC,SAAS,EAAE,IAAI,CAAC,QAAQ,GAAO,EACtE,WAAK,KAAK,EAAC,kCAAkC,EAAC,SAAS,EAAE,IAAI,CAAC,cAAc,GAAQ,CAChF,CACF,EACN,cAAQ,EAAE,EAAC,oBAAoB,GAAG,CAC7B,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/process-flow-box/process-flow-box.scss?tag=hy-process-flow-box&encapsulation=shadow","./src/components/process-flow-box/process-flow-box.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-process-flow-box {\n height: calc(100% - 32px);\n position: relative;\n\n &__step__container {\n bottom: unset;\n display: grid;\n height: 82px;\n place-items: center;\n position: absolute;\n top: -35px;\n width: 138px;\n z-index: 1;\n\n @include breakpoint($narrow) {\n bottom: -62px;\n display: grid;\n height: 60px;\n top: unset;\n width: 210px;\n }\n\n svg polygon {\n fill: var(--grayscale-background-arrow);\n }\n\n svg.mobile {\n display: block;\n\n @include breakpoint($narrow) {\n display: none;\n }\n }\n\n svg.desktop {\n display: none;\n\n @include breakpoint($narrow) {\n display: block;\n }\n }\n }\n\n .first.even.hy-process-flow-box__step__container {\n left: calc(50% - 69px + 16px);\n\n @include breakpoint($narrow) {\n left: -90px;\n }\n\n @include breakpoint($wide) {\n left: 0;\n }\n }\n\n .first.odd.hy-process-flow-box__step__container {\n left: calc(50% - 69px + 16px);\n\n @include breakpoint($narrow) {\n left: 0;\n }\n }\n\n :not(.first).even.hy-process-flow-box__step__container {\n left: calc(50% - 69px + 16px);\n\n @include breakpoint($narrow) {\n left: -90px;\n }\n }\n\n :not(.first).odd.hy-process-flow-box__step__container {\n left: calc(50% - 69px + 16px);\n\n @include breakpoint($narrow) {\n left: 0;\n }\n\n @include breakpoint($wide) {\n left: -90px;\n }\n }\n\n &__step {\n background-color: transparent;\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n font-size: 16px;\n font-weight: 600;\n hyphens: auto;\n letter-spacing: 0;\n line-height: 22px;\n padding: 19px 17px;\n position: absolute;\n text-align: center;\n word-break: break-word;\n z-index: 11;\n\n @include breakpoint($narrow) {\n left: 0;\n max-width: 175px;\n padding: 8px 23px 8px 14px;\n }\n }\n\n &__number__container {\n display: grid;\n height: 64px;\n place-items: center;\n position: relative;\n width: 64px;\n z-index: 2;\n }\n\n &__number {\n background-color: var(--brand-main-light);\n color: var(--grayscale-white);\n display: grid;\n font-family: var(--main-font-family);\n font-size: 36px;\n font-weight: 600;\n height: 48px;\n letter-spacing: 0;\n line-height: 49px;\n margin: 0;\n padding: 0;\n place-items: center;\n position: relative;\n width: 48px;\n\n &::after {\n content: \"\";\n height: 48px;\n left: -6px;\n position: absolute;\n width: 48px;\n }\n }\n\n &__content.small {\n padding: 16px 32px;\n padding-bottom: 64px;\n\n @include breakpoint($wide) {\n padding: 20px;\n padding-bottom: 64px;\n }\n }\n\n &__content.big {\n padding: 24px 32px;\n padding-bottom: 64px;\n }\n\n &__content {\n background-color: var(--grayscale-background-box);\n height: 100%;\n margin-left: 32px;\n margin-top: -32px;\n position: relative;\n }\n\n &__title {\n color: var(--brand-main-nearly-black);\n font-family: var(--main-font-family);\n font-size: 26px;\n font-weight: 600;\n letter-spacing: -0.82px;\n line-height: 32px;\n hyphens: auto;\n margin-bottom: 16px;\n margin-top: 0;\n word-break: break-word;\n }\n\n &__description {\n color: var(--grayscale-dark);\n font-family: var(--main-font-family);\n font-size: 16px;\n letter-spacing: 0;\n line-height: 24px;\n }\n}\n\n.small.hy-process-flow-box {\n .small.hy-process-flow-box__number__container {\n height: 56px;\n width: 56px;\n\n .hy-process-flow-box__number {\n font-size: 28px;\n height: 40px;\n line-height: 40px;\n width: 40px;\n }\n }\n}\n","import {Component, ComponentInterface, Prop, h, Host} from \"@stencil/core\";\nimport {ProcessFlowBoxVariants} from \"../../utils/utils\";\nimport {ProcessFlowBoxStepStates} from \"../../utils/utils\";\n\n@Component({\n tag: \"hy-process-flow-box\",\n styleUrl: \"process-flow-box.scss\",\n shadow: true,\n})\nexport class ProcessFlowBox implements ComponentInterface {\n @Prop() variant: ProcessFlowBoxVariants = ProcessFlowBoxVariants.default;\n @Prop() boxNumber: string;\n @Prop() boxTitle: string;\n @Prop() boxDescription: string;\n @Prop() intermediateStepTitle: string = \"\";\n @Prop() stepState: ProcessFlowBoxStepStates = \"default\";\n @Prop() numberTerm: string;\n render() {\n const classVariant = [this.variant, \"hy-process-flow-box\"].join(\" \");\n const classContentVariant = [this.variant, \"hy-process-flow-box__content\"].join(\" \");\n\n const classIsEven = parseInt(this.boxNumber) % 2 == 0 ? \"even\" : \"odd\";\n\n const classNumberVariant = [this.variant, \"hy-process-flow-box__number__container\"].join(\" \");\n const classStepVariant = [this.variant, this.stepState, classIsEven, \"hy-process-flow-box__step__container\"].join(\n \" \"\n );\n\n return (\n <Host>\n <div class={classVariant}>\n {this.intermediateStepTitle && (\n <div class={classStepVariant}>\n <svg class=\"desktop\" width=\"210\" height=\"60\">\n <polygon points=\"0 0, 0 60, 190 60, 210 30, 190 0, 0 0\" />\n </svg>\n <svg class=\"mobile\" width=\"138\" height=\"82\">\n <polygon points=\"0 0, 69 15, 138 0, 138 50, 69 82, 0 50\" />\n </svg>\n <h2 class=\"hy-process-flow-box__step\">{this.intermediateStepTitle}</h2>\n </div>\n )}\n <div class={classNumberVariant}>\n <h2\n class=\"hy-process-flow-box__number\"\n aria-label={`${this.numberTerm && this.numberTerm} ${this.boxNumber}`}\n >\n <div class=\"hy-process-flow-box__number-title\">{this.boxNumber}</div>\n </h2>\n </div>\n <div class={classContentVariant}>\n <h3 class=\"hy-process-flow-box__title\" innerHTML={this.boxTitle}></h3>\n <div class=\"hy-process-flow-box__description\" innerHTML={this.boxDescription}></div>\n </div>\n </div>\n <hy-box mb=\"1.75, 1.75, 2, 2.5\" />\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"process-flow-box.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,y1JAAy1J;;MCSt2J,cAAc;;;;;mBACiB,sBAAsB,CAAC,OAAO;;;;iCAIhC,EAAE;qBACI,SAAS;;;EAEvD,MAAM;IACJ,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,qBAAqB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACrE,MAAM,mBAAmB,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,8BAA8B,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAErF,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,MAAM,GAAG,KAAK,CAAC;IAEvE,MAAM,kBAAkB,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,wCAAwC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9F,MAAM,gBAAgB,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,WAAW,EAAE,sCAAsC,CAAC,CAAC,IAAI,CAC/G,GAAG,CACJ,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,YAAY,IACrB,IAAI,CAAC,qBAAqB,KACzB,WAAK,KAAK,EAAE,gBAAgB,IAC1B,WAAK,KAAK,EAAC,SAAS,EAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,IAC1C,eAAS,MAAM,EAAC,uCAAuC,GAAG,CACtD,EACN,WAAK,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,IACzC,eAAS,MAAM,EAAC,wCAAwC,GAAG,CACvD,EACN,UAAI,KAAK,EAAC,2BAA2B,IAAE,IAAI,CAAC,qBAAqB,CAAM,CACnE,CACP,EACD,WAAK,KAAK,EAAE,kBAAkB,IAC5B,UACE,KAAK,EAAC,6BAA6B,gBACvB,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,EAAE,IAErE,WAAK,KAAK,EAAC,mCAAmC,IAAE,IAAI,CAAC,SAAS,CAAO,CAClE,CACD,EACN,WAAK,KAAK,EAAE,mBAAmB,IAC7B,UAAI,KAAK,EAAC,4BAA4B,EAAC,SAAS,EAAE,IAAI,CAAC,QAAQ,GAAO,EACtE,WAAK,KAAK,EAAC,kCAAkC,EAAC,SAAS,EAAE,IAAI,CAAC,cAAc,GAAQ,CAChF,CACF,EACN,cAAQ,EAAE,EAAC,oBAAoB,GAAG,CAC7B,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/hy-process-flow-box/process-flow-box.scss?tag=hy-process-flow-box&encapsulation=shadow","./src/components/hy-process-flow-box/process-flow-box.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-process-flow-box {\n height: calc(100% - 32px);\n position: relative;\n\n &__step__container {\n bottom: unset;\n display: grid;\n height: 82px;\n place-items: center;\n position: absolute;\n top: -35px;\n width: 138px;\n z-index: 1;\n\n @include breakpoint($narrow) {\n bottom: -62px;\n display: grid;\n height: 60px;\n top: unset;\n width: 210px;\n }\n\n svg polygon {\n fill: var(--grayscale-background-arrow);\n }\n\n svg.mobile {\n display: block;\n\n @include breakpoint($narrow) {\n display: none;\n }\n }\n\n svg.desktop {\n display: none;\n\n @include breakpoint($narrow) {\n display: block;\n }\n }\n }\n\n .first.even.hy-process-flow-box__step__container {\n left: calc(50% - 69px + 16px);\n\n @include breakpoint($narrow) {\n left: -90px;\n }\n\n @include breakpoint($wide) {\n left: 0;\n }\n }\n\n .first.odd.hy-process-flow-box__step__container {\n left: calc(50% - 69px + 16px);\n\n @include breakpoint($narrow) {\n left: 0;\n }\n }\n\n :not(.first).even.hy-process-flow-box__step__container {\n left: calc(50% - 69px + 16px);\n\n @include breakpoint($narrow) {\n left: -90px;\n }\n }\n\n :not(.first).odd.hy-process-flow-box__step__container {\n left: calc(50% - 69px + 16px);\n\n @include breakpoint($narrow) {\n left: 0;\n }\n\n @include breakpoint($wide) {\n left: -90px;\n }\n }\n\n &__step {\n background-color: transparent;\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n font-size: 16px;\n font-weight: 600;\n hyphens: auto;\n letter-spacing: 0;\n line-height: 22px;\n padding: 19px 17px;\n position: absolute;\n text-align: center;\n word-break: break-word;\n z-index: 11;\n\n @include breakpoint($narrow) {\n left: 0;\n max-width: 175px;\n padding: 8px 23px 8px 14px;\n }\n }\n\n &__number__container {\n display: grid;\n height: 64px;\n place-items: center;\n position: relative;\n width: 64px;\n z-index: 2;\n }\n\n &__number {\n background-color: var(--brand-main-light);\n color: var(--grayscale-white);\n display: grid;\n font-family: var(--main-font-family);\n font-size: 36px;\n font-weight: 600;\n height: 48px;\n letter-spacing: 0;\n line-height: 49px;\n margin: 0;\n padding: 0;\n place-items: center;\n position: relative;\n width: 48px;\n\n &::after {\n content: \"\";\n height: 48px;\n left: -6px;\n position: absolute;\n width: 48px;\n }\n }\n\n &__content.small {\n padding: 16px 32px;\n padding-bottom: 64px;\n\n @include breakpoint($wide) {\n padding: 20px;\n padding-bottom: 64px;\n }\n }\n\n &__content.big {\n padding: 24px 32px;\n padding-bottom: 64px;\n }\n\n &__content {\n background-color: var(--grayscale-background-box);\n height: 100%;\n margin-left: 32px;\n margin-top: -32px;\n position: relative;\n }\n\n &__title {\n color: var(--brand-main-nearly-black);\n font-family: var(--main-font-family);\n font-size: 26px;\n font-weight: 600;\n letter-spacing: -0.82px;\n line-height: 32px;\n hyphens: auto;\n margin-bottom: 16px;\n margin-top: 0;\n word-break: break-word;\n }\n\n &__description {\n color: var(--grayscale-dark);\n font-family: var(--main-font-family);\n font-size: 16px;\n letter-spacing: 0;\n line-height: 24px;\n }\n}\n\n.small.hy-process-flow-box {\n .small.hy-process-flow-box__number__container {\n height: 56px;\n width: 56px;\n\n .hy-process-flow-box__number {\n font-size: 28px;\n height: 40px;\n line-height: 40px;\n width: 40px;\n }\n }\n}\n","import {Component, ComponentInterface, Prop, h, Host} from \"@stencil/core\";\nimport {ProcessFlowBoxVariants} from \"../../utils/utils\";\nimport {ProcessFlowBoxStepStates} from \"../../utils/utils\";\n\n@Component({\n tag: \"hy-process-flow-box\",\n styleUrl: \"process-flow-box.scss\",\n shadow: true,\n})\nexport class ProcessFlowBox implements ComponentInterface {\n @Prop() variant: ProcessFlowBoxVariants = ProcessFlowBoxVariants.default;\n @Prop() boxNumber: string;\n @Prop() boxTitle: string;\n @Prop() boxDescription: string;\n @Prop() intermediateStepTitle: string = \"\";\n @Prop() stepState: ProcessFlowBoxStepStates = \"default\";\n @Prop() numberTerm: string;\n render() {\n const classVariant = [this.variant, \"hy-process-flow-box\"].join(\" \");\n const classContentVariant = [this.variant, \"hy-process-flow-box__content\"].join(\" \");\n\n const classIsEven = parseInt(this.boxNumber) % 2 == 0 ? \"even\" : \"odd\";\n\n const classNumberVariant = [this.variant, \"hy-process-flow-box__number__container\"].join(\" \");\n const classStepVariant = [this.variant, this.stepState, classIsEven, \"hy-process-flow-box__step__container\"].join(\n \" \"\n );\n\n return (\n <Host>\n <div class={classVariant}>\n {this.intermediateStepTitle && (\n <div class={classStepVariant}>\n <svg class=\"desktop\" width=\"210\" height=\"60\">\n <polygon points=\"0 0, 0 60, 190 60, 210 30, 190 0, 0 0\" />\n </svg>\n <svg class=\"mobile\" width=\"138\" height=\"82\">\n <polygon points=\"0 0, 69 15, 138 0, 138 50, 69 82, 0 50\" />\n </svg>\n <h2 class=\"hy-process-flow-box__step\">{this.intermediateStepTitle}</h2>\n </div>\n )}\n <div class={classNumberVariant}>\n <h2\n class=\"hy-process-flow-box__number\"\n aria-label={`${this.numberTerm && this.numberTerm} ${this.boxNumber}`}\n >\n <div class=\"hy-process-flow-box__number-title\">{this.boxNumber}</div>\n </h2>\n </div>\n <div class={classContentVariant}>\n <h3 class=\"hy-process-flow-box__title\" innerHTML={this.boxTitle}></h3>\n <div class=\"hy-process-flow-box__description\" innerHTML={this.boxDescription}></div>\n </div>\n </div>\n <hy-box mb=\"1.75, 1.75, 2, 2.5\" />\n </Host>\n );\n }\n}\n"],"version":3}

package/components/site-logo.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"site-logo.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,4iJAA4iJ;;MCQnjJ,QAAQ;;;;gBACW,aAAa,CAAC,MAAM;iBACpB,YAAY,CAAC,KAAK;mBACrB,KAAK;yBACC,KAAK;;gBAET,YAAY,CAAC,GAAG;;;EAG7C,MAAM;IACJ,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;;IAErD,MAAM,eAAe,GAAG;MACtB,cAAc;MACd,iBAAiB,IAAI,CAAC,IAAI,KAAK,YAAY,EAAE;MAC7C,iBAAiB,IAAI,CAAC,IAAI,EAAE;MAC5B,QAAQ;KACT,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEZ,OAAO,IAAI,CAAC,GAAG,IACb,EAAC,IAAI,IAAC,KAAK,EAAE,eAAe,IACzB,CAAC,IAAI,CAAC,aAAa,KAClB,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,IACf,eACE,KAAK,EAAE,EAAC,oBAAoB,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAC,EACxD,IAAI,EAAE,iBAAiB,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,KAAK,GAChB,EACF,YAAM,KAAK,EAAE,EAAC,qBAAqB,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAC,EAAE,KAAK,EAAE,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,IACxF,IAAI,CAAC,KAAK,CACN,CACL,CACL,EACA,IAAI,CAAC,aAAa,KACjB,WAAK,KAAK,EAAC,cAAc,IACvB,eACE,KAAK,EAAE,EAAC,oBAAoB,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAC,EACxD,IAAI,EAAE,iBAAiB,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,KAAK,GAChB,EACF,YAAM,KAAK,EAAE,EAAC,qBAAqB,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAC,EAAE,KAAK,EAAE,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,IACxF,IAAI,CAAC,KAAK,CACN,CACH,CACP,CACI,IACL,IAAI,CAAC,KAAK,IACZ,EAAC,IAAI,IAAC,KAAK,EAAE,eAAe,IAC1B,eACE,KAAK,EAAE,EAAC,oBAAoB,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAC,EACxD,IAAI,EAAE,iBAAiB,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,KAAK,GAChB,EACF,YAAM,KAAK,EAAE,EAAC,qBAAqB,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAC,EAAE,KAAK,EAAE,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,IACxF,IAAI,CAAC,KAAK,CACN,CACF,KAEP,EAAE,CACH,CAAC;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/site-header/site-logo/site-logo.scss?tag=hy-site-logo","./src/components/site-header/site-logo/site-logo.tsx"],"sourcesContent":[":host {\n --site-logo-color: var(--brand-main-nearly-black);\n}\n\n:host(.hy-site-logo--mobile) {\n --site-logo-color: var(--brand-main-nearly-black);\n}\n\n.hy-site-logo {\n a,\n div.luomus-group {\n align-items: center;\n display: flex;\n text-decoration: none;\n\n &:focus {\n outline: solid 2px var(--additional-yellow);\n outline-offset: 2px;\n }\n }\n\n &__label {\n @include font-size(14px, 14px);\n @include font-weight($bold);\n color: var(--site-logo-color);\n font-family: var(--main-font-family);\n letter-spacing: -0.7px;\n margin-left: 8px;\n max-width: 90px;\n text-transform: uppercase;\n\n .hy-site-header__branding & {\n @include breakpoint($narrow) {\n min-width: min-content;\n max-width: max-content;\n white-space: nowrap;\n }\n\n @include breakpoint($extrawide) {\n min-width: min-content;\n max-width: 90px;\n white-space: initial;\n }\n\n @include breakpoint($xlarge) {\n min-width: min-content;\n max-width: max-content;\n white-space: nowrap;\n }\n }\n\n @include breakpoint($narrow) {\n @include font-size(15px, 16px);\n letter-spacing: -0.75px;\n margin-left: 6px;\n }\n\n @include breakpoint($extrawide) {\n @include font-size(14px, 14px);\n letter-spacing: -0.6px;\n margin-left: 4px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(16px, 16px);\n letter-spacing: -0.7px;\n margin-left: 4px;\n }\n\n &.group {\n @include font-size(12px, 14px);\n color: var(--grayscale-white);\n letter-spacing: -0.6px;\n margin-left: 3px;\n\n @include breakpoint($wide) {\n @include font-size(14px, 14px);\n letter-spacing: -0.7px;\n }\n\n @include breakpoint($xlarge) {\n margin-left: 8px;\n }\n }\n }\n\n &__icon {\n &.group {\n svg {\n height: 32px !important;\n width: 33.41px;\n }\n }\n\n &:not(.group) svg {\n height: 32px;\n width: 33.41px;\n\n @include breakpoint($narrow) {\n height: 48px;\n width: 51px;\n }\n\n @include breakpoint($xlarge) {\n height: 60px;\n width: 64px;\n }\n }\n }\n\n &__header {\n //&:hover {\n &__page {\n &:hover {\n color: var(--brand-main);\n\n a,\n span {\n color: var(--brand-main) !important;\n }\n\n svg {\n fill: var(--brand-main);\n }\n }\n }\n &__group:not(.luomus) {\n &:hover {\n color: var(--grayscale-medium);\n\n a,\n span {\n color: var(--grayscale-medium) !important;\n }\n\n svg {\n fill: var(--grayscale-medium);\n }\n }\n }\n }\n\n &__footer {\n &:hover {\n span {\n color: var(--grayscale-medium) !important;\n }\n svg {\n fill: var(--grayscale-medium) !important;\n }\n }\n }\n}\n\n.hy-site-header__logo-container {\n a.group {\n @include font-size(14px, 16px);\n @include font-weight($bold);\n\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n letter-spacing: -0.5px;\n text-decoration: none;\n text-transform: uppercase;\n\n @include breakpoint($narrow) {\n @include font-size(24px, 28px);\n letter-spacing: -0.8px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(26px, 30px);\n }\n }\n}\n","import {Component, h, Host, Prop} from \"@stencil/core\";\nimport {ColorVariant, FooterVariant, SiteLogoSize} from \"../../../utils/utils\";\n\n@Component({\n tag: \"hy-site-logo\",\n styleUrl: \"site-logo.scss\",\n shadow: false,\n})\nexport class SiteLogo {\n @Prop() type: FooterVariant = FooterVariant.header;\n @Prop() color: ColorVariant = ColorVariant.black;\n @Prop() isGroup: boolean = false;\n @Prop() isLuomusGroup: boolean = false;\n @Prop() label?: string;\n @Prop() size: SiteLogoSize = SiteLogoSize.big;\n @Prop() url?: string;\n\n render() {\n const isGroupClass = this.isGroup ? \"group\" : \"page\";\n // const isLuomusGroupClass = this.isLuomusGroup ? 'luomus' : 'regular';\n const classAttributes = [\n \"hy-site-logo\",\n `hy-site-logo__${this.type}__${isGroupClass}`,\n `hy-site-logo__${this.type}`,\n \"luomus\",\n ].join(\" \");\n\n return this.url ? (\n <Host class={classAttributes}>\n {!this.isLuomusGroup && (\n <a href={this.url}>\n <hy-icon\n class={{\"hy-site-logo__icon\": true, group: this.isGroup}}\n icon={\"hy-icon-hy-logo\"}\n size={this.size}\n fill={this.color}\n />\n <span class={{\"hy-site-logo__label\": true, group: this.isGroup}} style={{color: this.color}}>\n {this.label}\n </span>\n </a>\n )}\n {this.isLuomusGroup && (\n <div class=\"luomus-group\">\n <hy-icon\n class={{\"hy-site-logo__icon\": true, group: this.isGroup}}\n icon={\"hy-icon-hy-logo\"}\n size={this.size}\n fill={this.color}\n />\n <span class={{\"hy-site-logo__label\": true, group: this.isGroup}} style={{color: this.color}}>\n {this.label}\n </span>\n </div>\n )}\n </Host>\n ) : this.label ? (\n <Host class={classAttributes}>\n <hy-icon\n class={{\"hy-site-logo__icon\": true, group: this.isGroup}}\n icon={\"hy-icon-hy-logo\"}\n size={this.size}\n fill={this.color}\n />\n <span class={{\"hy-site-logo__label\": true, group: this.isGroup}} style={{color: this.color}}>\n {this.label}\n </span>\n </Host>\n ) : (\n \"\"\n );\n }\n}\n"],"version":3}
1	+ {"file":"site-logo.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,4iJAA4iJ;;MCQnjJ,QAAQ;;;;gBACW,aAAa,CAAC,MAAM;iBACpB,YAAY,CAAC,KAAK;mBACrB,KAAK;yBACC,KAAK;;gBAET,YAAY,CAAC,GAAG;;;EAG7C,MAAM;IACJ,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;;IAErD,MAAM,eAAe,GAAG;MACtB,cAAc;MACd,iBAAiB,IAAI,CAAC,IAAI,KAAK,YAAY,EAAE;MAC7C,iBAAiB,IAAI,CAAC,IAAI,EAAE;MAC5B,QAAQ;KACT,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEZ,OAAO,IAAI,CAAC,GAAG,IACb,EAAC,IAAI,IAAC,KAAK,EAAE,eAAe,IACzB,CAAC,IAAI,CAAC,aAAa,KAClB,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,IACf,eACE,KAAK,EAAE,EAAC,oBAAoB,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAC,EACxD,IAAI,EAAE,iBAAiB,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,KAAK,GAChB,EACF,YAAM,KAAK,EAAE,EAAC,qBAAqB,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAC,EAAE,KAAK,EAAE,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,IACxF,IAAI,CAAC,KAAK,CACN,CACL,CACL,EACA,IAAI,CAAC,aAAa,KACjB,WAAK,KAAK,EAAC,cAAc,IACvB,eACE,KAAK,EAAE,EAAC,oBAAoB,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAC,EACxD,IAAI,EAAE,iBAAiB,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,KAAK,GAChB,EACF,YAAM,KAAK,EAAE,EAAC,qBAAqB,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAC,EAAE,KAAK,EAAE,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,IACxF,IAAI,CAAC,KAAK,CACN,CACH,CACP,CACI,IACL,IAAI,CAAC,KAAK,IACZ,EAAC,IAAI,IAAC,KAAK,EAAE,eAAe,IAC1B,eACE,KAAK,EAAE,EAAC,oBAAoB,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAC,EACxD,IAAI,EAAE,iBAAiB,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,KAAK,GAChB,EACF,YAAM,KAAK,EAAE,EAAC,qBAAqB,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAC,EAAE,KAAK,EAAE,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,IACxF,IAAI,CAAC,KAAK,CACN,CACF,KAEP,EAAE,CACH,CAAC;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/hy-site-header/site-logo/site-logo.scss?tag=hy-site-logo","./src/components/hy-site-header/site-logo/site-logo.tsx"],"sourcesContent":[":host {\n --site-logo-color: var(--brand-main-nearly-black);\n}\n\n:host(.hy-site-logo--mobile) {\n --site-logo-color: var(--brand-main-nearly-black);\n}\n\n.hy-site-logo {\n a,\n div.luomus-group {\n align-items: center;\n display: flex;\n text-decoration: none;\n\n &:focus {\n outline: solid 2px var(--additional-yellow);\n outline-offset: 2px;\n }\n }\n\n &__label {\n @include font-size(14px, 14px);\n @include font-weight($bold);\n color: var(--site-logo-color);\n font-family: var(--main-font-family);\n letter-spacing: -0.7px;\n margin-left: 8px;\n max-width: 90px;\n text-transform: uppercase;\n\n .hy-site-header__branding & {\n @include breakpoint($narrow) {\n min-width: min-content;\n max-width: max-content;\n white-space: nowrap;\n }\n\n @include breakpoint($extrawide) {\n min-width: min-content;\n max-width: 90px;\n white-space: initial;\n }\n\n @include breakpoint($xlarge) {\n min-width: min-content;\n max-width: max-content;\n white-space: nowrap;\n }\n }\n\n @include breakpoint($narrow) {\n @include font-size(15px, 16px);\n letter-spacing: -0.75px;\n margin-left: 6px;\n }\n\n @include breakpoint($extrawide) {\n @include font-size(14px, 14px);\n letter-spacing: -0.6px;\n margin-left: 4px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(16px, 16px);\n letter-spacing: -0.7px;\n margin-left: 4px;\n }\n\n &.group {\n @include font-size(12px, 14px);\n color: var(--grayscale-white);\n letter-spacing: -0.6px;\n margin-left: 3px;\n\n @include breakpoint($wide) {\n @include font-size(14px, 14px);\n letter-spacing: -0.7px;\n }\n\n @include breakpoint($xlarge) {\n margin-left: 8px;\n }\n }\n }\n\n &__icon {\n &.group {\n svg {\n height: 32px !important;\n width: 33.41px;\n }\n }\n\n &:not(.group) svg {\n height: 32px;\n width: 33.41px;\n\n @include breakpoint($narrow) {\n height: 48px;\n width: 51px;\n }\n\n @include breakpoint($xlarge) {\n height: 60px;\n width: 64px;\n }\n }\n }\n\n &__header {\n //&:hover {\n &__page {\n &:hover {\n color: var(--brand-main);\n\n a,\n span {\n color: var(--brand-main) !important;\n }\n\n svg {\n fill: var(--brand-main);\n }\n }\n }\n &__group:not(.luomus) {\n &:hover {\n color: var(--grayscale-medium);\n\n a,\n span {\n color: var(--grayscale-medium) !important;\n }\n\n svg {\n fill: var(--grayscale-medium);\n }\n }\n }\n }\n\n &__footer {\n &:hover {\n span {\n color: var(--grayscale-medium) !important;\n }\n svg {\n fill: var(--grayscale-medium) !important;\n }\n }\n }\n}\n\n.hy-site-header__logo-container {\n a.group {\n @include font-size(14px, 16px);\n @include font-weight($bold);\n\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n letter-spacing: -0.5px;\n text-decoration: none;\n text-transform: uppercase;\n\n @include breakpoint($narrow) {\n @include font-size(24px, 28px);\n letter-spacing: -0.8px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(26px, 30px);\n }\n }\n}\n","import {Component, h, Host, Prop} from \"@stencil/core\";\nimport {ColorVariant, FooterVariant, SiteLogoSize} from \"../../../utils/utils\";\n\n@Component({\n tag: \"hy-site-logo\",\n styleUrl: \"site-logo.scss\",\n shadow: false,\n})\nexport class SiteLogo {\n @Prop() type: FooterVariant = FooterVariant.header;\n @Prop() color: ColorVariant = ColorVariant.black;\n @Prop() isGroup: boolean = false;\n @Prop() isLuomusGroup: boolean = false;\n @Prop() label?: string;\n @Prop() size: SiteLogoSize = SiteLogoSize.big;\n @Prop() url?: string;\n\n render() {\n const isGroupClass = this.isGroup ? \"group\" : \"page\";\n // const isLuomusGroupClass = this.isLuomusGroup ? 'luomus' : 'regular';\n const classAttributes = [\n \"hy-site-logo\",\n `hy-site-logo__${this.type}__${isGroupClass}`,\n `hy-site-logo__${this.type}`,\n \"luomus\",\n ].join(\" \");\n\n return this.url ? (\n <Host class={classAttributes}>\n {!this.isLuomusGroup && (\n <a href={this.url}>\n <hy-icon\n class={{\"hy-site-logo__icon\": true, group: this.isGroup}}\n icon={\"hy-icon-hy-logo\"}\n size={this.size}\n fill={this.color}\n />\n <span class={{\"hy-site-logo__label\": true, group: this.isGroup}} style={{color: this.color}}>\n {this.label}\n </span>\n </a>\n )}\n {this.isLuomusGroup && (\n <div class=\"luomus-group\">\n <hy-icon\n class={{\"hy-site-logo__icon\": true, group: this.isGroup}}\n icon={\"hy-icon-hy-logo\"}\n size={this.size}\n fill={this.color}\n />\n <span class={{\"hy-site-logo__label\": true, group: this.isGroup}} style={{color: this.color}}>\n {this.label}\n </span>\n </div>\n )}\n </Host>\n ) : this.label ? (\n <Host class={classAttributes}>\n <hy-icon\n class={{\"hy-site-logo__icon\": true, group: this.isGroup}}\n icon={\"hy-icon-hy-logo\"}\n size={this.size}\n fill={this.color}\n />\n <span class={{\"hy-site-logo__label\": true, group: this.isGroup}} style={{color: this.color}}>\n {this.label}\n </span>\n </Host>\n ) : (\n \"\"\n );\n }\n}\n"],"version":3}