@itcenteratunihelsinki/huds-lib 0.8.42 → 0.8.44

package/components/hy-person-card.js

@@ -0,0 +1,137 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { t as PersonCardVariants } from './utils.js';
+import { R as ResizeObserver } from './index2.js';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const hyPersonCardCss = ":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-person-card-container{font-family:var(--main-font-family);margin-bottom:28px}@media (min-width: 60rem){.hy-person-card-container{margin-bottom:32px}}.hy-person-card-container__category-title{font-size:0.75rem;line-height:14px;color:var(--grayscale-dark);letter-spacing:0;margin-bottom:8px}@media (min-width: 30rem){.hy-person-card-container__category-title{font-size:0.875rem;line-height:18px}}@media (min-width: 120.0625rem){.hy-person-card-container__category-title{font-size:0.875rem;line-height:18px}}.hy-person-card-container__link{text-decoration:none}.hy-person-card-container__link.inactive{cursor:default;pointer-events:none}.hy-person-card{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;font-family:var(--main-font-family)}.hy-person-card__image-container{margin-right:12px;max-width:70px}@media (min-width: 30rem){.hy-person-card__image-container{margin-right:16px;max-width:112px}}@media (min-width: 120.0625rem){.hy-person-card__image-container{max-width:140px}}.hy-person-card__image-container__image{height:70px;width:70px}@media (min-width: 30rem){.hy-person-card__image-container__image{height:112px;width:112px}}@media (min-width: 120.0625rem){.hy-person-card__image-container__image{height:140px;width:140px}}.hy-person-card__image-container__image img{height:70px;width:70px;-o-object-fit:cover;object-fit:cover}@media (min-width: 30rem){.hy-person-card__image-container__image img{height:112px;width:112px}}@media (min-width: 120.0625rem){.hy-person-card__image-container__image img{height:140px;width:140px}}.hy-person-card__image-container__no-image{height:70px;width:70px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--brand-main-light);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media (min-width: 30rem){.hy-person-card__image-container__no-image{height:112px;width:112px}}@media (min-width: 120.0625rem){.hy-person-card__image-container__no-image{height:140px;width:140px}}.hy-person-card__image-container__no-image__initials{font-size:1.125rem;line-height:24px;font-weight:700;color:var(--grayscale-white);letter-spacing:-0.56px}@media (min-width: 30rem){.hy-person-card__image-container__no-image__initials{font-size:2rem;line-height:32px;letter-spacing:0.96px}}.hy-person-card__info-container__full-name{font-size:1.125rem;line-height:24px;font-weight:700;color:var(--brand-main-light);letter-spacing:-0.56px;margin-bottom:4px;text-decoration:none}@media (min-width: 30rem){.hy-person-card__info-container__full-name{font-size:1.375rem;line-height:28px;letter-spacing:-0.69px;margin-bottom:3px}}@media (min-width: 120.0625rem){.hy-person-card__info-container__full-name{font-size:1.625rem;line-height:28px;letter-spacing:-0.81px;margin-bottom:5px}}.hy-person-card__info-container__full-name:hover,.hy-person-card__info-container__full-name:focus{color:var(--brand-main)}.hy-person-card__info-container__position-title{font-size:0.875rem;line-height:19px;font-weight:700;color:var(--brand-main-nearly-black);letter-spacing:0;margin-bottom:3px}@media (min-width: 30rem){.hy-person-card__info-container__position-title{font-size:1rem;line-height:20px;letter-spacing:-0.5px;margin-bottom:4px}}@media (min-width: 120.0625rem){.hy-person-card__info-container__position-title{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;margin-bottom:8px}}.hy-person-card__info-container__position-title__search-panel{font-weight:400}.hy-person-card__info-container__department{font-size:0.75rem;line-height:17px;color:var(--brand-main-nearly-black);letter-spacing:0;margin-bottom:3px;text-transform:uppercase}@media (min-width: 30rem){.hy-person-card__info-container__department{font-size:0.875rem;line-height:19px;margin-bottom:6px}}@media (min-width: 120.0625rem){.hy-person-card__info-container__department{font-size:0.875rem;line-height:16px;margin-bottom:9px}}.hy-person-card__info-container__field{font-size:0.75rem;line-height:17px;color:var(--brand-main-nearly-black);letter-spacing:0;margin-bottom:4px}@media (min-width: 30rem){.hy-person-card__info-container__field{font-size:0.875rem;line-height:19px;margin-bottom:6px}}@media (min-width: 120.0625rem){.hy-person-card__info-container__field{font-size:0.875rem;line-height:16px;margin-bottom:9px}}.hy-person-card__info-container__email-container{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:4px}.hy-person-card__info-container__email{font-size:0.75rem;line-height:17px;color:var(--brand-main-nearly-black);letter-spacing:0;margin-left:11px}@media (min-width: 30rem){.hy-person-card__info-container__email{font-size:0.875rem;line-height:19px;margin-left:8px}}.hy-person-card__info-container__email__icon svg{height:15px;width:16px}@media (min-width: 30rem){.hy-person-card__info-container__email__icon svg{height:12px;width:16px}}.hy-person-card__info-container__phone-container{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.hy-person-card__info-container__phone{font-size:0.75rem;line-height:17px;color:var(--brand-main-nearly-black);letter-spacing:0;margin-left:11px}@media (min-width: 30rem){.hy-person-card__info-container__phone{font-size:0.875rem;line-height:19px;margin-left:8px}}.hy-person-card__info-container__phone__icon svg{height:13px;width:13px}@media (min-width: 30rem){.hy-person-card__info-container__phone__icon svg{height:14px;width:14px}}.hy-person-card.search-panel{margin-bottom:12px}@media (min-width: 30rem){.hy-person-card.search-panel{margin-bottom:14px}}.hy-person-card.search-panel .hy-person-card__info-container__full-name{font-size:0.875rem;line-height:20px;font-weight:600;color:var(--grayscale-dark);letter-spacing:0;margin-bottom:0}@media (min-width: 30rem){.hy-person-card.search-panel .hy-person-card__info-container__full-name{letter-spacing:-0.3px}}@media (min-width: 120.0625rem){.hy-person-card.search-panel .hy-person-card__info-container__full-name{font-size:1rem;line-height:24px;letter-spacing:0}}.hy-person-card.search-panel .hy-person-card__info-container__position-title{font-size:0.75rem;line-height:16px;color:var(--grayscale-dark);letter-spacing:-0.07px;margin-bottom:0}.hy-person-card.search-panel .hy-person-card__image-container{margin-right:12px}.hy-person-card.search-panel .hy-person-card__image-container__image{height:60px;width:60px}.hy-person-card.search-panel .hy-person-card__image-container__image img{height:60px;width:60px}.hy-person-card.search-panel .hy-person-card__image-container__no-image{height:60px;width:60px}.hy-person-card.search-panel .hy-person-card__image-container__no-image__initials{color:var(--grayscale-white);font-size:1rem;line-height:32px;font-weight:700;letter-spacing:0.48px}.hy-person-card__extended-info-container{display:block;padding-top:8px}@media (min-width: 30rem){.hy-person-card__extended-info-container{padding-top:12px}}.hy-person-card__extended-info-container__about{font-size:0.75rem;line-height:17px;color:var(--grayscale-dark-text);font-family:var(--main-font-family);font-style:italic;letter-spacing:0}@media (min-width: 30rem){.hy-person-card__extended-info-container__about{font-size:0.75rem;line-height:16px}}@media (min-width: 1601px){.hy-person-card__extended-info-container__about{font-size:0.875rem;line-height:16px}}.hy-person-card__extended-info-container__about .label{font-weight:700;padding-right:3px}";
+
+const HyPersonCard$1 = /*@__PURE__*/ proxyCustomElement(class HyPersonCard extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.variant = PersonCardVariants.default;
+    this.categoryTitle = undefined;
+    this.imageUrl = null;
+    this.imageAlt = null;
+    this.disableLazy = false;
+    this.firstName = undefined;
+    this.lastName = undefined;
+    this.url = null;
+    this.isExternal = false;
+    this.scLabel = undefined;
+    this.positionTitle = undefined;
+    this.department = null;
+    this.field = null;
+    this.email = null;
+    this.phone = null;
+    this.aboutInfo = null;
+    this.researchNetworks = undefined;
+    this.studyProgramme = undefined;
+    this.aboutInfoLabel = undefined;
+    this.researchNetworksLabel = undefined;
+    this.studyProgrammeLabel = undefined;
+    this.isMobile = undefined;
+  }
+  componentDidLoad() {
+    this.ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        this.checkForMobile(entry.contentRect.width);
+      }
+    });
+    this.ro.observe(document.body);
+  }
+  disconnectedCallback() {
+    this.ro.disconnect();
+  }
+  checkForMobile(size) {
+    this.isMobile = size <= 479 ? true : false;
+  }
+  componentWillRender() {
+    this._fullName = this.firstName && this.lastName ? `${this.firstName} ${this.lastName}` : "";
+    this._initials =
+      this.imageUrl && this.firstName && this.lastName ? "" : `${this.firstName.charAt(0)}${this.lastName.charAt(0)}`;
+    if (!this.imageAlt) {
+      this.imageAlt = this._fullName;
+    }
+    if (!this.scLabel) {
+      this.scLabel = "Link to the person profile";
+    }
+  }
+  render() {
+    let classLinkAttributes = ["hy-person-card-container__link", this.variant].join(" ");
+    let classIsActive = this.url && this.url.length > 0 ? "" : " inactive";
+    classLinkAttributes = classLinkAttributes.concat(classIsActive);
+    const classAttributes = ["hy-person-card", this.variant].join(" ");
+    const classPositionTitle = [
+      "hy-person-card__info-container__position-title",
+      `hy-person-card__info-container__position-title__${this.variant}`,
+    ].join(" ");
+    const target = this.isExternal ? "_blank" : "_self";
+    return (h("article", { class: "hy-person-card-container" }, h("div", { class: classLinkAttributes }, this.categoryTitle && this.variant == PersonCardVariants.default && (h("div", { class: "hy-person-card-container__category-title" }, this.categoryTitle)), h("div", { class: classAttributes }, h("div", { class: "hy-person-card__image-container" }, this.imageUrl ? (h("a", { class: "hy-person-card__image-container__image", href: this.url, target: target }, h("img", { loading: this.disableLazy ? "eager" : "lazy", "aria-hidden": "true", src: this.imageUrl, alt: this.imageAlt }))) : (h("div", { class: "hy-person-card__image-container__no-image" }, h("div", { class: "hy-person-card__image-container__no-image__initials", "aria-hidden": "true" }, this._initials)))), h("div", { class: "hy-person-card__info-container" }, h("a", { class: "hy-person-card__info-container__full-name", href: this.url, target: target }, this._fullName), this.positionTitle && h("div", { class: classPositionTitle }, this.positionTitle), this.department &&
+      (this.variant == PersonCardVariants.default ||
+        (this.variant == PersonCardVariants.extended && !this.isMobile)) && (h("div", { class: "hy-person-card__info-container__department" }, this.department)), this.field &&
+      (this.variant == PersonCardVariants.default ||
+        (this.variant == PersonCardVariants.extended && !this.isMobile)) && (h("div", { class: "hy-person-card__info-container__field" }, this.field)), this.email &&
+      (this.variant == PersonCardVariants.default ||
+        (this.variant == PersonCardVariants.extended && !this.isMobile)) && [
+      h("div", { class: "hy-person-card__info-container__email-container" }, h("span", { class: "hy-person-card__info-container__email__icon" }, h("hy-icon", { icon: "hy-icon-email", size: 16 })), h("span", { class: "hy-person-card__info-container__email" }, this.email)),
+    ], this.phone &&
+      (this.variant == PersonCardVariants.default ||
+        (this.variant == PersonCardVariants.extended && !this.isMobile)) && [
+      h("div", { class: "hy-person-card__info-container__phone-container" }, h("span", { class: "hy-person-card__info-container__phone__icon" }, h("hy-icon", { icon: "hy-icon-phone", size: 14 })), h("span", { class: "hy-person-card__info-container__phone" }, this.phone)),
+    ])), this.variant == PersonCardVariants.extended && (h("div", { class: "hy-person-card hy-person-card__extended-info-container" }, this.department && this.isMobile && (h("div", { class: "hy-person-card__info-container__department" }, this.department)), this.field && this.isMobile && h("div", { class: "hy-person-card__info-container__field" }, this.field), this.email &&
+      this.isMobile && [
+      h("div", { class: "hy-person-card__info-container__email-container" }, h("span", { class: "hy-person-card__info-container__email__icon" }, h("hy-icon", { icon: "hy-icon-email", size: 16 })), h("span", { class: "hy-person-card__info-container__email" }, this.email)),
+    ], this.phone &&
+      this.isMobile && [
+      h("div", { class: "hy-person-card__info-container__phone-container" }, h("span", { class: "hy-person-card__info-container__phone__icon" }, h("hy-icon", { icon: "hy-icon-phone", size: 14 })), h("span", { class: "hy-person-card__info-container__phone" }, this.phone)),
+    ], this.aboutInfo && (h("div", { class: "hy-person-card__extended-info-container__about" }, h("span", { class: "label" }, this.aboutInfoLabel, ":"), h("span", null, this.aboutInfo))))))));
+  }
+  static get style() { return hyPersonCardCss; }
+}, [0, "hy-person-card", {
+    "variant": [1],
+    "categoryTitle": [1, "category-title"],
+    "imageUrl": [1, "image-url"],
+    "imageAlt": [1, "image-alt"],
+    "disableLazy": [4, "disable-lazy"],
+    "firstName": [1, "first-name"],
+    "lastName": [1, "last-name"],
+    "url": [1],
+    "isExternal": [4, "is-external"],
+    "scLabel": [1, "sc-label"],
+    "positionTitle": [1, "position-title"],
+    "department": [1],
+    "field": [1],
+    "email": [1],
+    "phone": [1],
+    "aboutInfo": [1, "about-info"],
+    "researchNetworks": [1, "research-networks"],
+    "studyProgramme": [1, "study-programme"],
+    "aboutInfoLabel": [1, "about-info-label"],
+    "researchNetworksLabel": [1, "research-networks-label"],
+    "studyProgrammeLabel": [1, "study-programme-label"],
+    "isMobile": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-person-card", "hy-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-person-card":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HyPersonCard$1);
+      }
+      break;
+    case "hy-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const HyPersonCard = HyPersonCard$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyPersonCard, defineCustomElement };

package/components/hy-person-profile-listing.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface HyPersonProfileListing extends Components.HyPersonProfileListing, HTMLElement {}
+export const HyPersonProfileListing: {
+  prototype: HyPersonProfileListing;
+  new (): HyPersonProfileListing;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/hy-person-profile-listing.js

@@ -0,0 +1,6 @@
+import { P as PersonProfile, d as defineCustomElement$1 } from './person-profile.listing.js';
+
+const HyPersonProfileListing = PersonProfile;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyPersonProfileListing, defineCustomElement };

package/components/hy-person-profile.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface HyPersonProfile extends Components.HyPersonProfile, HTMLElement {}
+export const HyPersonProfile: {
+  prototype: HyPersonProfile;
+  new (): HyPersonProfile;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/hy-person-profile.js

@@ -0,0 +1,142 @@
+import { proxyCustomElement, HTMLElement, h, Host, Fragment } from '@stencil/core/internal/client';
+import { a as CtaLinkButtonVariants } from './utils.js';
+import { d as defineCustomElement$9 } from './accordion-container.js';
+import { d as defineCustomElement$8 } from './accordion-item.js';
+import { d as defineCustomElement$7 } from './hy-box2.js';
+import { d as defineCustomElement$6 } from './cta-button.js';
+import { d as defineCustomElement$5 } from './icon.js';
+import { d as defineCustomElement$4 } from './person-profile.listing.js';
+import { d as defineCustomElement$3 } from './hy-tabs2.js';
+import { d as defineCustomElement$2 } from './hy-tabs-item2.js';
+
+const personProfileCss = ":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-profile-page__back-button{font-size:1rem;line-height:20px;font-weight:600;font-family:var(--main-font-family);letter-spacing:-0.5px;color:var(--brand-main-light);padding:12px 10px;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;text-decoration:none;margin-left:-10px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:16px}@media (min-width: 48rem){.hy-profile-page__back-button{margin-bottom:24px}}.hy-profile-page__back-button hy-icon{margin-right:16px}.hy-profile-page__back-button hy-icon svg{fill:var(--brand-main-light)}.hy-profile-page__section{padding:32px 0}.hy-profile-page__section:first-of-type{padding:0 0 32px}.hy-profile-page__section:not(:first-of-type){border-top:1px solid var(--grayscale-medium)}.hy-profile-page__section__research_title>h2,.hy-profile-page__section>h2{font-size:1.625rem;line-height:32px;font-weight:700;font-family:var(--main-font-family);letter-spacing:-0.52px;color:var(--grayscale-black);margin:0 0 32px}@media (min-width: 48rem){.hy-profile-page__section__research_title>h2,.hy-profile-page__section>h2{font-size:2.125rem;line-height:40px;letter-spacing:-0.68px}}.hy-profile-page__section__research_title{display:block;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media (min-width: 48rem){.hy-profile-page__section__research_title{display:-webkit-box;display:-ms-flexbox;display:flex}}.hy-profile-page__section__research_title>hy-cta-button{margin:0 0 32px 0}@media (min-width: 48rem){.hy-profile-page__section__research_title>hy-cta-button{margin:0 0 32px auto}}.hy-profile-page__organization-units-section{font-family:var(--main-font-family);padding:0;margin:0;list-style:none}.hy-profile-page__organization-units-section h3{font-size:0.9375rem;line-height:18px;font-weight:700;letter-spacing:-0.28px;color:var(--grayscale-black);margin:0 0 8px}@media (min-width: 48rem){.hy-profile-page__organization-units-section h3{font-size:1.0625rem;line-height:20px;letter-spacing:-0.32px}}.hy-profile-page__organization-units-section{margin-top:24px}@media (min-width: 48rem){.hy-profile-page__organization-units-section{margin-top:32px}}.hy-profile-page__organization-units-section a{text-decoration:none;color:var(--link-blue)}.hy-profile-page__organization-units-section a:hover{text-decoration:underline}.hy-profile-page__organizations,.hy-profile-page__organizations ul,.hy-profile-page__research-organizations,.hy-profile-page__research-organizations ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}.hy-profile-page__organizations li,.hy-profile-page__research-organizations li{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.hy-profile-page__organizations li span,.hy-profile-page__research-organizations li span{font-size:0.9375rem;line-height:22px;font-weight:400;color:var(--grayscale-black)}@media (min-width: 48rem){.hy-profile-page__organizations li span,.hy-profile-page__research-organizations li span{font-size:1.0625rem;line-height:26px}}.hy-profile-page__organizations li>span,.hy-profile-page__research-organizations li>span{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.hy-profile-page__organizations li hy-icon,.hy-profile-page__research-organizations li hy-icon{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:22px;width:28px}@media (min-width: 48rem){.hy-profile-page__organizations li hy-icon,.hy-profile-page__research-organizations li hy-icon{height:26px}}.hy-profile-page__person-about-text{font-size:0.9375rem;line-height:22px;font-weight:400;font-family:var(--main-font-family);color:var(--grayscale-black)}@media (min-width: 48rem){.hy-profile-page__person-about-text{font-size:1.0625rem;line-height:26px}}.hy-profile-page__person-about-text-toggle{font-size:0.9375rem;line-height:22px;font-weight:400;font-family:var(--main-font-family);color:var(--link-blue);background-color:transparent;border:0;padding:0;margin:0}@media (min-width: 48rem){.hy-profile-page__person-about-text-toggle{font-size:1.0625rem;line-height:26px}}.hy-profile-page__person-about-text-toggle:hover{cursor:pointer}.hy-profile-page__person-information{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:16px;margin-bottom:24px}@media (min-width: 48rem){.hy-profile-page__person-information{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:40px;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}}.hy-profile-page__image{aspect-ratio:328/425;width:100%;max-width:328px;-o-object-fit:cover;object-fit:cover;background-color:var(--grayscale-background-box)}@media (min-width: 48rem){.hy-profile-page__image{max-width:194px}}.hy-profile-page__contact-information>h2{font-size:1.625rem;line-height:32px;font-weight:700;font-family:var(--main-font-family);letter-spacing:-0.52px;color:var(--grayscale-black);margin:0 0 32px}@media (min-width: 48rem){.hy-profile-page__contact-information>h2{font-size:2.125rem;line-height:40px;letter-spacing:-0.68px}}.hy-profile-page__name{font-size:2rem;line-height:38px;font-weight:700;font-family:var(--main-font-family);letter-spacing:-0.8px;color:var(--grayscale-black);margin:0 0 4px;text-transform:uppercase}@media (min-width: 60rem){.hy-profile-page__name{font-size:2.875rem;line-height:54px;letter-spacing:-1.15px;margin:0 0 8px}}@media (min-width: 120.0625rem){.hy-profile-page__name{font-size:3.25rem;line-height:60px;letter-spacing:-1.3px}}.hy-profile-page__job-title{font-size:1rem;line-height:20px;font-weight:700;font-family:var(--main-font-family);letter-spacing:-0.32px;color:var(--grayscale-black);margin:0 0 4px;text-transform:capitalize}@media (min-width: 60rem){.hy-profile-page__job-title{font-size:1.125rem;line-height:24px;letter-spacing:-0.36px}}.hy-profile-page__additional-information{font-size:0.9375rem;line-height:22px;font-weight:400;font-family:var(--main-font-family);color:var(--grayscale-dark-text);margin:0}@media (min-width: 60rem){.hy-profile-page__additional-information{font-size:1.0625rem;line-height:26px}}.hy-profile-page__person-content-container{display:none;margin-top:32px}@media (min-width: 48rem){.hy-profile-page__person-content-container{margin-top:44px}}.hy-profile-page__person-content-listing{display:grid;gap:32px;list-style:none;padding:0;margin:0}.hy-profile-page__person-content>h2{margin:0 0 8px}.hy-profile-page__person-content>h2 a{font-size:1.125rem;line-height:24px;font-weight:700;font-family:var(--main-font-family);letter-spacing:-0.36px;color:var(--link-blue);text-decoration:none}@media (min-width: 48rem){.hy-profile-page__person-content>h2 a{font-size:1.375rem;line-height:28px;letter-spacing:-0.44px}}.hy-profile-page__person-content>span,.hy-profile-page__person-content>p{font-size:0.9375rem;line-height:22px;font-weight:400;font-family:var(--main-font-family);color:var(--grayscale-dark-text)}@media (min-width: 48rem){.hy-profile-page__person-content>span,.hy-profile-page__person-content>p{font-size:1.0625rem;line-height:26px;letter-spacing:-0.44px}}.hy-profile-page__person-content>p{margin:8px 0 0}.hy-profile-page__loader{display:inline-block;position:relative;width:80px;height:80px;margin-top:32px}.hy-profile-page__loader.visible{display:block}.hy-profile-page__loader.hidden{display:none}@media (min-width: 48rem){.hy-profile-page__loader{margin-top:44px}}.hy-profile-page__loader div{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;position:absolute;width:64px;height:64px;margin:8px;border:6px solid #fff;border-radius:50%;-webkit-animation:loader-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;animation:loader-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;border-color:var(--brand-main-light) transparent transparent transparent}.hy-profile-page__loader div:nth-child(1){-webkit-animation-delay:-0.45s;animation-delay:-0.45s}.hy-profile-page__loader div:nth-child(2){-webkit-animation-delay:-0.3s;animation-delay:-0.3s}.hy-profile-page__loader div:nth-child(3){-webkit-animation-delay:-0.15s;animation-delay:-0.15s}@-webkit-keyframes loader-ring{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loader-ring{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.hidden{display:none;visibility:hidden}";
+
+let timer;
+const PersonProfile = /*@__PURE__*/ proxyCustomElement(class PersonProfile extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.personDataJson = undefined;
+    this.showFullAboutText = undefined;
+    this.hideFullAboutText = undefined;
+    this.organizationItemsLabelText = undefined;
+    this.peopleFinderReturnLink = undefined;
+    this.peopleFinderReturnLabel = undefined;
+    this.isFullAboutTextHidden = false;
+    this.viewportSize = undefined;
+  }
+  componentWillLoad() {
+    this.viewportSize = window.innerWidth;
+  }
+  toggleShowFullAboutText() {
+    this.isFullAboutTextHidden = !this.isFullAboutTextHidden;
+  }
+  disconnectedCallback() {
+    clearTimeout(timer);
+  }
+  render() {
+    const { name, job_title, additional_information, image_url, contact_information, organization_units, about, research, person_content, } = JSON.parse(this.personDataJson);
+    const { organizations, research_organizations } = organization_units.items;
+    const aboutDescriptionTextDestructured = about.description;
+    const aboutDescriptionLength = aboutDescriptionTextDestructured.length;
+    let trimmedAboutDescription = "";
+    if (aboutDescriptionLength > 650) {
+      if (this.isFullAboutTextHidden) {
+        const ellipsisTextArray = aboutDescriptionTextDestructured + "...";
+        trimmedAboutDescription = ellipsisTextArray;
+      }
+      else {
+        const ellipsisTextArray = aboutDescriptionTextDestructured.substring(0, 650) + "...";
+        trimmedAboutDescription = ellipsisTextArray;
+      }
+    }
+    window.addEventListener("resize", () => {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        this.viewportSize = window.innerWidth;
+      }, 250);
+    });
+    const research_portal_title = `${research.research_portal_label}: ${name}`;
+    return (h(Host, null, h("section", { class: "hy-profile-page" }, h("a", { href: this.peopleFinderReturnLink, class: "hy-profile-page__back-button" }, h("hy-icon", { icon: "hy-icon-arrow-left", size: 24 }), h("span", null, this.peopleFinderReturnLabel)), h("section", { class: "hy-profile-page__section" }, h("div", { class: "hy-profile-page__person-information" }, h("div", null, h("h1", { class: "hy-profile-page__name" }, name), job_title && h("p", { class: "hy-profile-page__job-title" }, job_title), additional_information && (h("p", { class: "hy-profile-page__additional-information" }, additional_information))), image_url ? (h("img", { src: image_url, alt: "", class: "hy-profile-page__image" })) : (h("div", { class: "hy-profile-page__image", "aria-hidden": "true" }))), contact_information && (h("div", { class: "hy-profile-page__contact-information" }, contact_information.label && h("h2", null, contact_information.label), contact_information.items && (h("hy-person-profile-listing", { items: contact_information.items, col: "col-4", withoutIcons: true, textSpacingTight: true }))))), (organizations.items.length > 0 || Object.keys(research_organizations.items).length > 0) && (h("section", { class: "hy-profile-page__section" }, organization_units.label && h("h2", null, organization_units.label), organizations.items.length > 0 && (h("section", { class: "hy-profile-page__organization-units-section" }, h("h3", null, organizations.label), h("ul", { class: "hy-profile-page__organizations" }, h("li", null, organizations.items.map((item, index) => {
+      return (h("span", null, index > 1 && h("hy-icon", { icon: "hy-icon-caret-right", size: 10 }), index !== 0 && (h("span", null, h("a", { href: organization_units.people_finder_path[organization_units.lang] +
+          "?researchOrganizations.id[]=" +
+          item.id, target: "_blank" }, item.name[organization_units.lang])))));
+    }))))), Object.keys(research_organizations.items).length > 0 && (h("section", { class: "hy-profile-page__organization-units-section" }, h("h3", null, research_organizations.label), h("ul", { class: "hy-profile-page__research-organizations" }, Object.values(research_organizations.items).map(([...item]) => (h("li", null, item.map((item, index) => {
+      return (h(Fragment, null, index > 1 && (h("ul", null, h("li", null, h("span", null, h("hy-icon", { icon: "hy-icon-caret-right", size: 10 }), h("span", null, h("a", { href: organization_units.people_finder_path[organization_units.lang] +
+          "?researchOrganizations.id[]=" +
+          item.id, target: "_blank" }, item.name[organization_units.lang])))))), index == 1 && (h("span", null, h("a", { href: organization_units.people_finder_path[organization_units.lang] +
+          "?researchOrganizations.id[]=" +
+          item.id, target: "_blank" }, item.name[organization_units.lang])))));
+    }))))))))), about && aboutDescriptionLength !== 0 && (h("section", { class: "hy-profile-page__section" }, about.description && (h(Fragment, null, h("h2", null, about.label), h("div", { class: "hy-profile-page__person-about-text", innerHTML: !this.isFullAboutTextHidden && aboutDescriptionLength > 650
+        ? trimmedAboutDescription
+        : about.description }))), aboutDescriptionLength > 650 && (h("button", { class: "hy-profile-page__person-about-text-toggle", onClick: () => this.toggleShowFullAboutText(), "aria-expanded": `${this.isFullAboutTextHidden ? "true" : "false"}` }, this.isFullAboutTextHidden ? this.hideFullAboutText : this.showFullAboutText)))), ((research && research.items.length > 0) || (person_content && person_content.research_url.length > 0)) && (h("section", { class: "hy-profile-page__section" }, h("div", { class: "hy-profile-page__section__research_title" }, research.label && h("h2", null, research.label), research.label && person_content.research_url.length > 0 && (h("hy-cta-button", { "link-content": research_portal_title, "sc-label": research_portal_title, url: person_content.research_url, "is-external": "true", variant: CtaLinkButtonVariants.onWhiteBkgd }))), research.items && (h("hy-person-profile-listing", { items: research.items, col: "col-1", textSpacingTight: true, "is-research": true, inline: true })), person_content.research_url.length > 0 && (h("div", { class: "hy-profile-page__loader", role: "presentation" }, h("div", null), h("div", null), h("div", null), h("div", null))), person_content.research_url.length > 0 && this.viewportSize < 768 && (h("div", { class: "hy-profile-page__person-content-container" }, h("hy-accordion-container", { accordionid: "accordion-container-person-content" }, person_content.publications && (h("hy-accordion-item", { "data-accordion-id": "publications", accordiontitle: person_content.publications.label })), person_content.projects && (h("hy-accordion-item", { "data-accordion-id": "projects", accordiontitle: person_content.projects.label })), person_content.activities && (h("hy-accordion-item", { "data-accordion-id": "activities", accordiontitle: person_content.activities.label }))))), person_content.research_url.length > 0 && this.viewportSize >= 768 && (h("div", { class: "hy-profile-page__person-content-container" }, h("hy-tabs", { "tab-id": "tabs-container-person-content" }, person_content.publications && (h("hy-tabs-item", { "data-tab-id": "publications", "tab-title": person_content.publications.label })), person_content.projects && (h("hy-tabs-item", { "data-tab-id": "projects", "tab-title": person_content.projects.label })), person_content.activities && (h("hy-tabs-item", { "data-tab-id": "activities", "tab-title": person_content.activities.label }))))))))));
+  }
+  static get style() { return personProfileCss; }
+}, [0, "hy-person-profile", {
+    "personDataJson": [1, "person-data-json"],
+    "showFullAboutText": [1, "show-full-about-text"],
+    "hideFullAboutText": [1, "hide-full-about-text"],
+    "organizationItemsLabelText": [1, "organization-items-label-text"],
+    "peopleFinderReturnLink": [1, "people-finder-return-link"],
+    "peopleFinderReturnLabel": [1, "people-finder-return-label"],
+    "isFullAboutTextHidden": [32],
+    "viewportSize": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-person-profile", "hy-accordion-container", "hy-accordion-item", "hy-box", "hy-cta-button", "hy-icon", "hy-person-profile-listing", "hy-tabs", "hy-tabs-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-person-profile":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PersonProfile);
+      }
+      break;
+    case "hy-accordion-container":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "hy-accordion-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "hy-box":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "hy-cta-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "hy-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "hy-person-profile-listing":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "hy-tabs":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "hy-tabs-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const HyPersonProfile = PersonProfile;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyPersonProfile, defineCustomElement };

package/components/hy-process-flow-box.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface HyProcessFlowBox extends Components.HyProcessFlowBox, HTMLElement {}
+export const HyProcessFlowBox: {
+  prototype: HyProcessFlowBox;
+  new (): HyProcessFlowBox;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/hy-process-flow-box.js

@@ -0,0 +1,6 @@
+import { P as ProcessFlowBox, d as defineCustomElement$1 } from './process-flow-box.js';
+
+const HyProcessFlowBox = ProcessFlowBox;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyProcessFlowBox, defineCustomElement };

package/components/hy-process.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface HyProcess extends Components.HyProcess, HTMLElement {}
+export const HyProcess: {
+  prototype: HyProcess;
+  new (): HyProcess;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/hy-process.js

@@ -0,0 +1,89 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { u as ProcessFlowBoxVariants } from './utils.js';
+import { j as jsonParserWorker } from './globalScript.js';
+import { d as defineCustomElement$3 } from './hy-box2.js';
+import { d as defineCustomElement$2 } from './process-flow-box.js';
+
+const processCss = ":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{display:block;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;max-width:30rem;margin-right:auto;margin-left:auto;width:100%}@media (min-width: 30rem){.hy-process{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:left;-ms-flex-pack:left;justify-content:left;max-width:60rem;width:100%}}@media (min-width: 60rem){.hy-process{max-width:75rem}}.hy-process.small .box{display:block;margin:1%}@media (min-width: 30rem){.hy-process.small .box{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:48%;padding-bottom:10px;width:48%}}@media (min-width: 60rem){.hy-process.small .box{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:23%;width:23%}}.hy-process.big .box{display:block;margin:1%}@media (min-width: 30rem){.hy-process.big .box{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:48%;padding-bottom:10px;width:48%}}@media (min-width: 60rem){.hy-process.big .box{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:31%;width:31%}}.hy-process::after{clear:both}";
+
+const Process = /*@__PURE__*/ proxyCustomElement(class Process extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.headerstyle = "common";
+    this.numberTerm = undefined;
+    this.dataItems = undefined;
+  }
+  async componentWillLoad() {
+    this._dataItems = await jsonParserWorker(this.dataItems);
+  }
+  componentDidLoad() {
+    let hyMainDiv = this.el.closest(".hy-main");
+    if (hyMainDiv) {
+      if (!hyMainDiv.classList.contains("with-sidebar")) {
+        this.headerstyle = "large";
+      }
+    }
+  }
+  render() {
+    /*
+    - Logic:
+    - 3 items: big
+    - 4 items: small
+    - 5 items: big
+    - 6 items: big
+    - 7 items: small
+    - 8 items: small
+    - 9 items: big
+    * */
+    const bigVariants = [3, 5, 6, 9];
+    const processVariant = bigVariants.includes(this._dataItems.length)
+      ? ProcessFlowBoxVariants.default
+      : ProcessFlowBoxVariants.small;
+    const itemsPerRow = processVariant == ProcessFlowBoxVariants.small ? 4 : 3;
+    const classAttributes = [processVariant, "hy-process", `hy-process__${this.headerstyle}`].join(" ");
+    const classItem = "box";
+    var stepState;
+    return [
+      h("div", { class: classAttributes }, this._dataItems.map((x, index) => {
+        index % itemsPerRow == 0 ? (stepState = "first") : (stepState = "default");
+        return (h("hy-process-flow-box", { class: classItem, variant: processVariant, "box-number": index + 1, "box-title": x.heading, "box-description": x.description, "intermediate-step-title": x.step, "step-state": stepState, "number-term": this.numberTerm }));
+      })),
+    ];
+  }
+  get el() { return this; }
+  static get style() { return processCss; }
+}, [1, "hy-process", {
+    "headerstyle": [1],
+    "numberTerm": [1, "number-term"],
+    "dataItems": [1, "data-items"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-process", "hy-box", "hy-process-flow-box"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-process":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Process);
+      }
+      break;
+    case "hy-box":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "hy-process-flow-box":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const HyProcess = Process;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyProcess, defineCustomElement };

package/components/hy-prominent-image.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface HyProminentImage extends Components.HyProminentImage, HTMLElement {}
+export const HyProminentImage: {
+  prototype: HyProminentImage;
+  new (): HyProminentImage;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/hy-prominent-image.js

@@ -0,0 +1,71 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './hy-box2.js';
+import { d as defineCustomElement$2 } from './image.js';
+
+const hyProminentImageCss = ":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-prominent-image{position:relative}.hy-prominent-image__text{font-size:1rem;line-height:20px;background-color:var(--grayscale-black);bottom:12px;color:var(--grayscale-white);font-family:var(--main-font-family);font-weight:bold;left:-8px;letter-spacing:-0.5px;max-width:46%;padding:6px 12px;position:absolute;text-transform:uppercase}@media (min-width: 30rem){.hy-prominent-image__text{font-size:1.125rem;line-height:24px;bottom:20px;left:-16px;letter-spacing:-0.56px;max-width:58%;padding:12px 24px;position:absolute}}@media (min-width: 60rem){.hy-prominent-image__text{font-size:1.375rem;line-height:28px;bottom:24px;left:-16px;letter-spacing:-0.69px;padding:16px 24px;position:absolute}}@media (min-width: 1601px){.hy-prominent-image__text{font-size:1.625rem;line-height:32px;bottom:28px;left:-16px;letter-spacing:-0.8px;padding:20px 24px;position:absolute}}@media (min-width: 75.0625rem){.hy-prominent-image__text__large{font-size:1.625rem;line-height:32px;bottom:28px;left:-16px;letter-spacing:-0.8px;padding:20px 24px;position:absolute}}";
+
+const HyProminentImage$1 = /*@__PURE__*/ proxyCustomElement(class HyProminentImage extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.textTitle = undefined;
+    this.imageUrl = undefined;
+    this.imageAlt = "";
+    this.headerstyle = "common";
+    this.sourceSet = undefined;
+  }
+  componentDidLoad() {
+    let hyMainDiv = this.el.closest(".hy-main");
+    if (hyMainDiv) {
+      if (!hyMainDiv.classList.contains("with-sidebar")) {
+        this.headerstyle = "large";
+      }
+    }
+  }
+  render() {
+    const prominentImageClass = [
+      "hy-prominent-image",
+      this.headerstyle,
+      `hy-prominent-image__${this.headerstyle}`,
+    ].join(" ");
+    const prominentImageText = ["hy-prominent-image__text", `hy-prominent-image__text__${this.headerstyle}`].join(" ");
+    return (h(Host, null, h("div", { class: prominentImageClass }, h("div", { class: "hy-prominent-image__image" }, h("hy-image", { "source-set": this.sourceSet, "image-url": this.imageUrl, "image-alt": this.imageAlt, aspectRatioWidth: 2, aspectRatioHeight: 1 })), this.textTitle && h("div", { class: prominentImageText }, this.textTitle))));
+  }
+  get el() { return this; }
+  static get style() { return hyProminentImageCss; }
+}, [1, "hy-prominent-image", {
+    "textTitle": [1, "text-title"],
+    "imageUrl": [1, "image-url"],
+    "imageAlt": [1, "image-alt"],
+    "headerstyle": [1],
+    "sourceSet": [1, "source-set"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-prominent-image", "hy-box", "hy-image"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-prominent-image":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HyProminentImage$1);
+      }
+      break;
+    case "hy-box":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "hy-image":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const HyProminentImage = HyProminentImage$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyProminentImage, defineCustomElement };

package/components/hy-quote.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface HyQuote extends Components.HyQuote, HTMLElement {}
+export const HyQuote: {
+  prototype: HyQuote;
+  new (): HyQuote;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/hy-quote.js

@@ -0,0 +1,54 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const hyQuoteCss = ":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-quote{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding:0 8px}@media (min-width: 30rem){.hy-quote{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:0}}@media (min-width: 60rem){.hy-quote{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.hy-quote__icon-wrapper{margin-right:20px}@media (min-width: 30rem){.hy-quote__icon-wrapper{margin-right:0}}@media (min-width: 60rem){.hy-quote__icon-wrapper{margin-right:24px}}@media (min-width: 1601px){.hy-quote__icon-wrapper{margin-right:32px}}.hy-quote__icon svg{fill:var(--brand-main-light);height:32px;width:32px}@media (min-width: 60rem){.hy-quote__icon svg{height:40px;width:40px}}@media (min-width: 1601px){.hy-quote__icon svg{height:48px;width:48px}}.hy-quote__text{font-size:1rem;line-height:24px;color:var(--grayscale-black);font-family:var(--main-font-family);font-weight:600;letter-spacing:-0.1px;padding-bottom:16px;padding-top:0}@media (min-width: 30rem){.hy-quote__text{font-size:1.125rem;line-height:28px;padding-top:16px}}@media (min-width: 75.0625rem){.hy-quote__text{font-size:1.25rem;line-height:32px;padding-top:0}}.hy-quote__signature:before{font-size:0.875rem;line-height:20px;display:inline-block;color:var(--grayscale-dark);content:\"-\";font-family:var(--main-font-family);letter-spacing:0;padding-right:3px}.hy-quote__signature{font-size:0.875rem;line-height:20px;color:var(--grayscale-dark);font-family:var(--main-font-family);letter-spacing:0}@media (min-width: 30rem){.hy-quote__signature{font-size:1rem;line-height:24px}}";
+
+const HyQuote$1 = /*@__PURE__*/ proxyCustomElement(class HyQuote extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.quoteSignature = undefined;
+    this.headerstyle = "common";
+  }
+  componentDidLoad() {
+    let hyMainDiv = this.el.closest(".hy-main");
+    if (hyMainDiv) {
+      if (!hyMainDiv.classList.contains("with-sidebar")) {
+        this.headerstyle = "large";
+      }
+    }
+  }
+  render() {
+    const quoteClass = ["hy-quote", this.headerstyle, `hy-quote__${this.headerstyle}`].join(" ");
+    return (h("div", { class: quoteClass }, h("span", { class: "hy-quote__icon-wrapper" }, h("div", { class: "hy-quote__icon" }, h("hy-icon", { icon: "hy-icon-quote", size: 48 }))), h("div", { class: "hy-quote-text-wrapper" }, h("div", { class: "hy-quote__text" }, h("slot", null)), this.quoteSignature && h("div", { class: "hy-quote__signature" }, this.quoteSignature))));
+  }
+  get el() { return this; }
+  static get style() { return hyQuoteCss; }
+}, [1, "hy-quote", {
+    "quoteSignature": [1, "quote-signature"],
+    "headerstyle": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-quote", "hy-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-quote":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HyQuote$1);
+      }
+      break;
+    case "hy-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const HyQuote = HyQuote$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyQuote, defineCustomElement };