npm - @itcenteratunihelsinki/huds-lib - Versions diffs - 0.8.57 → 0.8.59 - Mend

@itcenteratunihelsinki/huds-lib 0.8.57 → 0.8.59

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 (1260) hide show

package/dist/cjs/hy-person-card.cjs.entry.js ADDED Viewed

@@ -0,0 +1,97 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-32830401.js');
+const utils = require('./utils-bfc1127a.js');
+const index$1 = require('./index-dacd8ca5.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 = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.variant = utils.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 index$1.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 (index.h("article", { class: "hy-person-card-container" }, index.h("div", { class: classLinkAttributes }, this.categoryTitle && this.variant == utils.PersonCardVariants.default && (index.h("div", { class: "hy-person-card-container__category-title" }, this.categoryTitle)), index.h("div", { class: classAttributes }, index.h("div", { class: "hy-person-card__image-container" }, this.imageUrl ? (index.h("a", { class: "hy-person-card__image-container__image", href: this.url, target: target }, index.h("img", { loading: this.disableLazy ? "eager" : "lazy", "aria-hidden": "true", src: this.imageUrl, alt: this.imageAlt }))) : (index.h("div", { class: "hy-person-card__image-container__no-image" }, index.h("div", { class: "hy-person-card__image-container__no-image__initials", "aria-hidden": "true" }, this._initials)))), index.h("div", { class: "hy-person-card__info-container" }, index.h("a", { class: "hy-person-card__info-container__full-name", href: this.url, target: target }, this._fullName), this.positionTitle && index.h("div", { class: classPositionTitle }, this.positionTitle), this.department &&
+      (this.variant == utils.PersonCardVariants.default ||
+        (this.variant == utils.PersonCardVariants.extended && !this.isMobile)) && (index.h("div", { class: "hy-person-card__info-container__department" }, this.department)), this.field &&
+      (this.variant == utils.PersonCardVariants.default ||
+        (this.variant == utils.PersonCardVariants.extended && !this.isMobile)) && (index.h("div", { class: "hy-person-card__info-container__field" }, this.field)), this.email &&
+      (this.variant == utils.PersonCardVariants.default ||
+        (this.variant == utils.PersonCardVariants.extended && !this.isMobile)) && [
+      index.h("div", { class: "hy-person-card__info-container__email-container" }, index.h("span", { class: "hy-person-card__info-container__email__icon" }, index.h("hy-icon", { icon: "hy-icon-email", size: 16 })), index.h("span", { class: "hy-person-card__info-container__email" }, this.email)),
+    ], this.phone &&
+      (this.variant == utils.PersonCardVariants.default ||
+        (this.variant == utils.PersonCardVariants.extended && !this.isMobile)) && [
+      index.h("div", { class: "hy-person-card__info-container__phone-container" }, index.h("span", { class: "hy-person-card__info-container__phone__icon" }, index.h("hy-icon", { icon: "hy-icon-phone", size: 14 })), index.h("span", { class: "hy-person-card__info-container__phone" }, this.phone)),
+    ])), this.variant == utils.PersonCardVariants.extended && (index.h("div", { class: "hy-person-card hy-person-card__extended-info-container" }, this.department && this.isMobile && (index.h("div", { class: "hy-person-card__info-container__department" }, this.department)), this.field && this.isMobile && index.h("div", { class: "hy-person-card__info-container__field" }, this.field), this.email &&
+      this.isMobile && [
+      index.h("div", { class: "hy-person-card__info-container__email-container" }, index.h("span", { class: "hy-person-card__info-container__email__icon" }, index.h("hy-icon", { icon: "hy-icon-email", size: 16 })), index.h("span", { class: "hy-person-card__info-container__email" }, this.email)),
+    ], this.phone &&
+      this.isMobile && [
+      index.h("div", { class: "hy-person-card__info-container__phone-container" }, index.h("span", { class: "hy-person-card__info-container__phone__icon" }, index.h("hy-icon", { icon: "hy-icon-phone", size: 14 })), index.h("span", { class: "hy-person-card__info-container__phone" }, this.phone)),
+    ], this.aboutInfo && (index.h("div", { class: "hy-person-card__extended-info-container__about" }, index.h("span", { class: "label" }, this.aboutInfoLabel, ":"), index.h("span", null, this.aboutInfo))))))));
+  }
+};
+HyPersonCard.style = hyPersonCardCss;
+exports.hy_person_card = HyPersonCard;
+//# sourceMappingURL=hy-person-card.cjs.entry.js.map

package/dist/cjs/hy-person-card.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"hy-person-card.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,eAAe,GAAG,6lRAA6lR;;MCSxmR,YAAY;;;mBACeA,wBAAkB,CAAC,OAAO;;oBAErC,IAAI;oBACJ,IAAI;uBACA,KAAK;;;eAGd,IAAI;sBACI,KAAK;;;sBAGN,IAAI;iBACT,IAAI;iBACJ,IAAI;iBACJ,IAAI;qBACA,IAAI;;;;;;;;EAahC,gBAAgB;IACd,IAAI,CAAC,EAAE,GAAG,IAAIC,sBAAc,CAAC,CAAC,OAAO;MACnC,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;QAC3B,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;OAC9C;KACF,CAAC,CAAC;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;GAChC;EAED,oBAAoB;IAClB,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;GACtB;EAED,cAAc,CAAC,IAAY;IACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,IAAI,GAAG,GAAG,IAAI,GAAG,KAAK,CAAC;GAC5C;EAED,mBAAmB;IACjB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,QAAQ,GAAG,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC;IAC7F,IAAI,CAAC,SAAS;MACZ,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IAClH,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC;KAChC;IACD,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;MACjB,IAAI,CAAC,OAAO,GAAG,4BAA4B,CAAC;KAC7C;GACF;EAED,MAAM;IACJ,IAAI,mBAAmB,GAAG,CAAC,gCAAgC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACrF,IAAI,aAAa,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,GAAG,EAAE,GAAG,WAAW,CAAC;IACvE,mBAAmB,GAAG,mBAAmB,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;IAEhE,MAAM,eAAe,GAAG,CAAC,gBAAgB,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACnE,MAAM,kBAAkB,GAAG;MACzB,gDAAgD;MAChD,mDAAmD,IAAI,CAAC,OAAO,EAAE;KAClE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACZ,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEpD,QACEC,qBAAS,KAAK,EAAC,0BAA0B,IACvCA,iBAAK,KAAK,EAAE,mBAAmB,IAC5B,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,OAAO,IAAIF,wBAAkB,CAAC,OAAO,KAC/DE,iBAAK,KAAK,EAAC,0CAA0C,IAAE,IAAI,CAAC,aAAa,CAAO,CACjF,EACDA,iBAAK,KAAK,EAAE,eAAe,IACzBA,iBAAK,KAAK,EAAC,iCAAiC,IACzC,IAAI,CAAC,QAAQ,IACZA,eAAG,KAAK,EAAC,wCAAwC,EAAC,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,IAC9EA,iBACE,OAAO,EAAE,IAAI,CAAC,WAAW,GAAG,OAAO,GAAG,MAAM,iBAChC,MAAM,EAClB,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,GAAG,EAAE,IAAI,CAAC,QAAQ,GAClB,CACA,KAEJA,iBAAK,KAAK,EAAC,2CAA2C,IACpDA,iBAAK,KAAK,EAAC,qDAAqD,iBAAa,MAAM,IAChF,IAAI,CAAC,SAAS,CACX,CACF,CACP,CACG,EACNA,iBAAK,KAAK,EAAC,gCAAgC,IACzCA,eAAG,KAAK,EAAC,2CAA2C,EAAC,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,IAChF,IAAI,CAAC,SAAS,CACb,EACH,IAAI,CAAC,aAAa,IAAIA,iBAAK,KAAK,EAAE,kBAAkB,IAAG,IAAI,CAAC,aAAa,CAAO,EAChF,IAAI,CAAC,UAAU;OACb,IAAI,CAAC,OAAO,IAAIF,wBAAkB,CAAC,OAAO;SACxC,IAAI,CAAC,OAAO,IAAIA,wBAAkB,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,KAChEE,iBAAK,KAAK,EAAC,4CAA4C,IAAE,IAAI,CAAC,UAAU,CAAO,CAChF,EACF,IAAI,CAAC,KAAK;OACR,IAAI,CAAC,OAAO,IAAIF,wBAAkB,CAAC,OAAO;SACxC,IAAI,CAAC,OAAO,IAAIA,wBAAkB,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,KAChEE,iBAAK,KAAK,EAAC,uCAAuC,IAAE,IAAI,CAAC,KAAK,CAAO,CACtE,EACF,IAAI,CAAC,KAAK;OACR,IAAI,CAAC,OAAO,IAAIF,wBAAkB,CAAC,OAAO;SACxC,IAAI,CAAC,OAAO,IAAIA,wBAAkB,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI;MACpEE,iBAAK,KAAK,EAAC,iDAAiD,IAC1DA,kBAAM,KAAK,EAAC,6CAA6C,IACvDA,qBAAS,IAAI,EAAE,eAAe,EAAE,IAAI,EAAE,EAAE,GAAI,CACvC,EACPA,kBAAM,KAAK,EAAC,uCAAuC,IAAE,IAAI,CAAC,KAAK,CAAQ,CACnE;KACP,EACF,IAAI,CAAC,KAAK;OACR,IAAI,CAAC,OAAO,IAAIF,wBAAkB,CAAC,OAAO;SACxC,IAAI,CAAC,OAAO,IAAIA,wBAAkB,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI;MACpEE,iBAAK,KAAK,EAAC,iDAAiD,IAC1DA,kBAAM,KAAK,EAAC,6CAA6C,IACvDA,qBAAS,IAAI,EAAE,eAAe,EAAE,IAAI,EAAE,EAAE,GAAI,CACvC,EACPA,kBAAM,KAAK,EAAC,uCAAuC,IAAE,IAAI,CAAC,KAAK,CAAQ,CACnE;KACP,CACC,CACF,EACL,IAAI,CAAC,OAAO,IAAIF,wBAAkB,CAAC,QAAQ,KAC1CE,iBAAK,KAAK,EAAC,wDAAwD,IAChE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,KAC/BA,iBAAK,KAAK,EAAC,4CAA4C,IAAE,IAAI,CAAC,UAAU,CAAO,CAChF,EACA,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,IAAIA,iBAAK,KAAK,EAAC,uCAAuC,IAAE,IAAI,CAAC,KAAK,CAAO,EACpG,IAAI,CAAC,KAAK;MACT,IAAI,CAAC,QAAQ,IAAI;MACfA,iBAAK,KAAK,EAAC,iDAAiD,IAC1DA,kBAAM,KAAK,EAAC,6CAA6C,IACvDA,qBAAS,IAAI,EAAE,eAAe,EAAE,IAAI,EAAE,EAAE,GAAI,CACvC,EACPA,kBAAM,KAAK,EAAC,uCAAuC,IAAE,IAAI,CAAC,KAAK,CAAQ,CACnE;KACP,EACF,IAAI,CAAC,KAAK;MACT,IAAI,CAAC,QAAQ,IAAI;MACfA,iBAAK,KAAK,EAAC,iDAAiD,IAC1DA,kBAAM,KAAK,EAAC,6CAA6C,IACvDA,qBAAS,IAAI,EAAE,eAAe,EAAE,IAAI,EAAE,EAAE,GAAI,CACvC,EACPA,kBAAM,KAAK,EAAC,uCAAuC,IAAE,IAAI,CAAC,KAAK,CAAQ,CACnE;KACP,EACF,IAAI,CAAC,SAAS,KACbA,iBAAK,KAAK,EAAC,gDAAgD,IACzDA,kBAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,cAAc,MAAS,EACjDA,sBAAO,IAAI,CAAC,SAAS,CAAQ,CACzB,CACP,CACG,CACP,CACG,CACE,EACV;GACH;;;;;;","names":["PersonCardVariants","ResizeObserver","h"],"sources":["./src/components/hy-person-card/hy-person-card.scss?tag=hy-person-card","./src/components/hy-person-card/hy-person-card.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-person-card-container {\n font-family: var(--main-font-family);\n margin-bottom: 28px;\n\n @include breakpoint($wide) {\n margin-bottom: 32px;\n }\n\n &__category-title {\n @include font-size(12px, 14px);\n color: var(--grayscale-dark);\n letter-spacing: 0;\n margin-bottom: 8px;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 18px);\n }\n\n @include breakpoint($fullhd) {\n @include font-size(14px, 18px); //>1920 desktop\n }\n }\n\n &__link {\n text-decoration: none;\n\n &.inactive {\n cursor: default;\n pointer-events: none;\n }\n }\n}\n\n.hy-person-card {\n display: flex;\n flex-direction: row;\n font-family: var(--main-font-family);\n\n &__image-container {\n margin-right: 12px;\n max-width: 70px;\n\n @include breakpoint($narrow) {\n margin-right: 16px;\n max-width: 112px;\n }\n\n @include breakpoint($fullhd) {\n max-width: 140px;\n }\n\n &__image {\n height: 70px;\n width: 70px;\n\n @include breakpoint($narrow) {\n height: 112px;\n width: 112px;\n }\n\n @include breakpoint($fullhd) {\n //1920\n height: 140px;\n width: 140px;\n }\n img {\n height: 70px;\n width: 70px;\n object-fit: cover;\n\n @include breakpoint($narrow) {\n height: 112px;\n width: 112px;\n }\n\n @include breakpoint($fullhd) {\n height: 140px;\n width: 140px;\n }\n }\n }\n &__no-image {\n height: 70px;\n width: 70px;\n\n align-items: center;\n background-color: var(--brand-main-light);\n display: flex;\n justify-content: center;\n\n @include breakpoint($narrow) {\n height: 112px;\n width: 112px;\n }\n\n @include breakpoint($fullhd) {\n height: 140px;\n width: 140px;\n }\n\n &__initials {\n @include font-size(18px, 24px);\n @include font-weight($bold);\n color: var(--grayscale-white);\n letter-spacing: -0.56px;\n\n @include breakpoint($narrow) {\n @include font-size(32px, 32px);\n letter-spacing: 0.96px;\n }\n }\n }\n }\n\n &__info-container {\n &__full-name {\n @include font-size(18px, 24px);\n @include font-weight($bold);\n\n color: var(--brand-main-light);\n letter-spacing: -0.56px;\n margin-bottom: 4px;\n text-decoration: none;\n\n @include breakpoint($narrow) {\n @include font-size(22px, 28px);\n letter-spacing: -0.69px;\n margin-bottom: 3px;\n }\n\n @include breakpoint($fullhd) {\n @include font-size(26px, 28px);\n letter-spacing: -0.81px;\n margin-bottom: 5px;\n }\n\n &:hover,\n &:focus {\n color: var(--brand-main);\n }\n }\n\n &__position-title {\n @include font-size(14px, 19px);\n @include font-weight($bold);\n color: var(--brand-main-nearly-black);\n letter-spacing: 0;\n margin-bottom: 3px;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 20px);\n letter-spacing: -0.5px;\n margin-bottom: 4px;\n }\n\n @include breakpoint($fullhd) {\n @include font-size(18px, 24px);\n letter-spacing: -0.56px;\n margin-bottom: 8px;\n }\n\n &__search-panel {\n @include font-weight($regular);\n }\n }\n\n &__department {\n @include font-size(12px, 17px);\n color: var(--brand-main-nearly-black);\n letter-spacing: 0;\n margin-bottom: 3px;\n text-transform: uppercase;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 19px);\n margin-bottom: 6px;\n }\n\n @include breakpoint($fullhd) {\n @include font-size(14px, 16px);\n margin-bottom: 9px;\n }\n }\n\n &__field {\n @include font-size(12px, 17px);\n color: var(--brand-main-nearly-black);\n letter-spacing: 0;\n margin-bottom: 4px;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 19px);\n margin-bottom: 6px;\n }\n\n @include breakpoint($fullhd) {\n @include font-size(14px, 16px);\n margin-bottom: 9px;\n }\n }\n\n &__email-container {\n align-items: center;\n display: flex;\n margin-bottom: 4px;\n }\n &__email {\n @include font-size(12px, 17px);\n color: var(--brand-main-nearly-black);\n letter-spacing: 0;\n margin-left: 11px;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 19px);\n margin-left: 8px;\n }\n\n &__icon {\n svg {\n height: 15px;\n width: 16px;\n\n @include breakpoint($narrow) {\n height: 12px;\n width: 16px;\n }\n }\n }\n }\n\n &__phone-container {\n align-items: center;\n display: flex;\n }\n &__phone {\n @include font-size(12px, 17px);\n color: var(--brand-main-nearly-black);\n letter-spacing: 0;\n margin-left: 11px;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 19px);\n margin-left: 8px;\n }\n\n &__icon {\n svg {\n height: 13px;\n width: 13px;\n\n @include breakpoint($narrow) {\n height: 14px;\n width: 14px;\n }\n }\n }\n }\n }\n\n &.search-panel {\n margin-bottom: 12px;\n\n @include breakpoint($narrow) {\n margin-bottom: 14px;\n }\n\n .hy-person-card__info-container__full-name {\n @include font-size(14px, 20px);\n @include font-weight($semibold);\n color: var(--grayscale-dark);\n letter-spacing: 0;\n margin-bottom: 0;\n\n @include breakpoint($narrow) {\n letter-spacing: -0.3px;\n }\n\n @include breakpoint($fullhd) {\n @include font-size(16px, 24px);\n letter-spacing: 0;\n }\n }\n\n .hy-person-card__info-container__position-title {\n @include font-size(12px, 16px);\n color: var(--grayscale-dark);\n letter-spacing: -0.07px;\n margin-bottom: 0;\n }\n\n .hy-person-card__image-container {\n margin-right: 12px;\n\n &__image {\n height: 60px;\n width: 60px;\n img {\n height: 60px;\n width: 60px;\n }\n }\n &__no-image {\n height: 60px;\n width: 60px;\n\n &__initials {\n color: var(--grayscale-white);\n @include font-size(16px, 32px);\n @include font-weight($bold);\n letter-spacing: 0.48px;\n }\n }\n }\n }\n}\n\n.hy-person-card__extended-info-container {\n display: block;\n padding-top: 8px;\n\n @include breakpoint($narrow) {\n padding-top: 12px;\n }\n\n &__about {\n @include font-size(12px, 17px);\n color: var(--grayscale-dark-text);\n font-family: var(--main-font-family);\n font-style: italic;\n letter-spacing: 0;\n\n @include breakpoint($narrow) {\n @include font-size(12px, 16px);\n }\n @include breakpoint($xlarge) {\n @include font-size(14px, 16px);\n }\n\n .label {\n @include font-weight($bold);\n padding-right: 3px;\n }\n }\n}\n","import {Component, h, Prop, State} from \"@stencil/core\";\nimport {PersonCardVariants} from \"../../utils/utils\";\nimport ResizeObserver from \"resize-observer-polyfill\";\n\n@Component({\n tag: \"hy-person-card\",\n styleUrl: \"hy-person-card.scss\",\n shadow: false,\n})\nexport class HyPersonCard {\n @Prop() variant: PersonCardVariants = PersonCardVariants.default;\n @Prop() categoryTitle?: string;\n @Prop() imageUrl: string = null;\n @Prop() imageAlt: string = null;\n @Prop() disableLazy: boolean = false;\n @Prop() firstName?: string;\n @Prop() lastName?: string;\n @Prop() url: string = null;\n @Prop() isExternal: boolean = false;\n @Prop() scLabel?: string;\n @Prop() positionTitle?: string;\n @Prop() department: string = null;\n @Prop() field: string = null;\n @Prop() email: string = null;\n @Prop() phone: string = null;\n @Prop() aboutInfo: string = null;\n @Prop() researchNetworks?: string;\n @Prop() studyProgramme?: string;\n @Prop() aboutInfoLabel?: string;\n @Prop() researchNetworksLabel?: string;\n @Prop() studyProgrammeLabel?: string;\n\n private _fullName: string;\n private _initials: string;\n\n @State() isMobile: boolean;\n\n private ro: ResizeObserver;\n componentDidLoad() {\n this.ro = new ResizeObserver((entries) => {\n for (const entry of entries) {\n this.checkForMobile(entry.contentRect.width);\n }\n });\n this.ro.observe(document.body);\n }\n\n disconnectedCallback() {\n this.ro.disconnect();\n }\n\n checkForMobile(size: number) {\n this.isMobile = size <= 479 ? true : false;\n }\n\n componentWillRender() {\n this._fullName = this.firstName && this.lastName ? `${this.firstName} ${this.lastName}` : \"\";\n this._initials =\n this.imageUrl && this.firstName && this.lastName ? \"\" : `${this.firstName.charAt(0)}${this.lastName.charAt(0)}`;\n if (!this.imageAlt) {\n this.imageAlt = this._fullName;\n }\n if (!this.scLabel) {\n this.scLabel = \"Link to the person profile\";\n }\n }\n\n render() {\n let classLinkAttributes = [\"hy-person-card-container__link\", this.variant].join(\" \");\n let classIsActive = this.url && this.url.length > 0 ? \"\" : \" inactive\";\n classLinkAttributes = classLinkAttributes.concat(classIsActive);\n\n const classAttributes = [\"hy-person-card\", this.variant].join(\" \");\n const classPositionTitle = [\n \"hy-person-card__info-container__position-title\",\n `hy-person-card__info-container__position-title__${this.variant}`,\n ].join(\" \");\n const target = this.isExternal ? \"_blank\" : \"_self\";\n\n return (\n <article class=\"hy-person-card-container\">\n <div class={classLinkAttributes}>\n {this.categoryTitle && this.variant == PersonCardVariants.default && (\n <div class=\"hy-person-card-container__category-title\">{this.categoryTitle}</div>\n )}\n <div class={classAttributes}>\n <div class=\"hy-person-card__image-container\">\n {this.imageUrl ? (\n <a class=\"hy-person-card__image-container__image\" href={this.url} target={target}>\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n aria-hidden=\"true\"\n src={this.imageUrl}\n alt={this.imageAlt}\n />\n </a>\n ) : (\n <div class=\"hy-person-card__image-container__no-image\">\n <div class=\"hy-person-card__image-container__no-image__initials\" aria-hidden=\"true\">\n {this._initials}\n </div>\n </div>\n )}\n </div>\n <div class=\"hy-person-card__info-container\">\n <a class=\"hy-person-card__info-container__full-name\" href={this.url} target={target}>\n {this._fullName}\n </a>\n {this.positionTitle && <div class={classPositionTitle}>{this.positionTitle}</div>}\n {this.department &&\n (this.variant == PersonCardVariants.default ||\n (this.variant == PersonCardVariants.extended && !this.isMobile)) && (\n <div class=\"hy-person-card__info-container__department\">{this.department}</div>\n )}\n {this.field &&\n (this.variant == PersonCardVariants.default ||\n (this.variant == PersonCardVariants.extended && !this.isMobile)) && (\n <div class=\"hy-person-card__info-container__field\">{this.field}</div>\n )}\n {this.email &&\n (this.variant == PersonCardVariants.default ||\n (this.variant == PersonCardVariants.extended && !this.isMobile)) && [\n <div class=\"hy-person-card__info-container__email-container\">\n <span class=\"hy-person-card__info-container__email__icon\">\n <hy-icon icon={\"hy-icon-email\"} size={16} />\n </span>\n <span class=\"hy-person-card__info-container__email\">{this.email}</span>\n </div>,\n ]}\n {this.phone &&\n (this.variant == PersonCardVariants.default ||\n (this.variant == PersonCardVariants.extended && !this.isMobile)) && [\n <div class=\"hy-person-card__info-container__phone-container\">\n <span class=\"hy-person-card__info-container__phone__icon\">\n <hy-icon icon={\"hy-icon-phone\"} size={14} />\n </span>\n <span class=\"hy-person-card__info-container__phone\">{this.phone}</span>\n </div>,\n ]}\n </div>\n </div>\n {this.variant == PersonCardVariants.extended && (\n <div class=\"hy-person-card hy-person-card__extended-info-container\">\n {this.department && this.isMobile && (\n <div class=\"hy-person-card__info-container__department\">{this.department}</div>\n )}\n {this.field && this.isMobile && <div class=\"hy-person-card__info-container__field\">{this.field}</div>}\n {this.email &&\n this.isMobile && [\n <div class=\"hy-person-card__info-container__email-container\">\n <span class=\"hy-person-card__info-container__email__icon\">\n <hy-icon icon={\"hy-icon-email\"} size={16} />\n </span>\n <span class=\"hy-person-card__info-container__email\">{this.email}</span>\n </div>,\n ]}\n {this.phone &&\n this.isMobile && [\n <div class=\"hy-person-card__info-container__phone-container\">\n <span class=\"hy-person-card__info-container__phone__icon\">\n <hy-icon icon={\"hy-icon-phone\"} size={14} />\n </span>\n <span class=\"hy-person-card__info-container__phone\">{this.phone}</span>\n </div>,\n ]}\n {this.aboutInfo && (\n <div class=\"hy-person-card__extended-info-container__about\">\n <span class=\"label\">{this.aboutInfoLabel}:</span>\n <span>{this.aboutInfo}</span>\n </div>\n )}\n </div>\n )}\n </div>\n </article>\n );\n }\n}\n"],"version":3}

package/dist/cjs/hy-person-profile-listing.cjs.entry.js ADDED Viewed

@@ -0,0 +1,36 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-32830401.js');
+const personProfileListingCss = ":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-person-profile-listing{font-family:var(--main-font-family);padding:0;margin:0;list-style:none;display:grid;gap:24px}@media (min-width: 48rem){.hy-person-profile-listing{gap:2px 24px}}@media (min-width: 120.0625rem){.hy-person-profile-listing.col-2{grid-template-columns:repeat(2, 50%)}}.hy-person-profile-listing.col-4{gap:32px 24px}@media (min-width: 48rem){.hy-person-profile-listing.col-4{grid-template-columns:repeat(2, 50%)}}@media (min-width: 60rem){.hy-person-profile-listing.col-4{grid-template-columns:repeat(3, 33.3333333333%)}}@media (min-width: 120.0625rem){.hy-person-profile-listing.col-4{grid-template-columns:repeat(4, 25%)}}.hy-person-profile-listing__label{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-person-profile-listing__label{font-size:1.0625rem;line-height:20px;letter-spacing:-0.32px}}.hy-person-profile-listing__items{margin:0;padding:0;list-style:none;display:grid;gap:8px}.is-inline .hy-person-profile-listing__items{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:0}.text-tight .hy-person-profile-listing__items{gap:0}.hy-person-profile-listing__item{font-size:0.9375rem;line-height:22px;font-weight:400;color:var(--grayscale-black);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}@media (min-width: 48rem){.hy-person-profile-listing__item{font-size:1.0625rem;line-height:26px}}.hy-person-profile-listing__item a{text-decoration:none;color:var(--link-blue)}.hy-person-profile-listing__item a:hover{text-decoration:underline}.hy-person-profile-listing__item hy-icon{display:none !important;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:28px;width:28px}@media (min-width: 48rem){.hy-person-profile-listing__item hy-icon{display:-webkit-inline-box !important;display:-ms-inline-flexbox !important;display:inline-flex !important}}.without-icons .hy-person-profile-listing__item hy-icon{display:none !important}";
+const PersonProfile = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.items = undefined;
+    this.col = "col-2";
+    this.inline = undefined;
+    this.withoutIcons = undefined;
+    this.textSpacingTight = undefined;
+    this.isResearch = false;
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("ul", { class: `hy-person-profile-listing ${this.col} ${this.inline ? "is-inline" : ""} ${this.withoutIcons ? "without-icons" : ""} ${this.textSpacingTight ? "text-tight" : ""}` }, this.isResearch && index.h("h3", { class: "hy-person-profile-listing__label" }, this.items[0].label), this.items.map(({ label, items }) => {
+      if (items.filter(({ label }) => label !== "").length > 0) {
+        return (index.h("li", null, !this.isResearch && index.h("h3", { class: "hy-person-profile-listing__label" }, label), index.h("ul", { class: "hy-person-profile-listing__items" }, items.map(({ label, url }, index$1) => {
+          if (url) {
+            return (index.h("li", { class: "hy-person-profile-listing__item" }, index.h("a", { href: url }, index$1 !== 0 && index.h("hy-icon", { icon: "hy-icon-caret-right", size: 10 }), index.h("span", null, label))));
+          }
+          return (index.h("li", { class: "hy-person-profile-listing__item" }, index$1 !== 0 && index.h("hy-icon", { icon: "hy-icon-caret-right", size: 10 }), index.h("span", null, label)));
+        }))));
+      }
+    }))));
+  }
+};
+PersonProfile.style = personProfileListingCss;
+exports.hy_person_profile_listing = PersonProfile;
+//# sourceMappingURL=hy-person-profile-listing.cjs.entry.js.map

package/dist/cjs/hy-person-profile-listing.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"hy-person-profile-listing.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,uBAAuB,GAAG,mvGAAmvG;;MCctwG,aAAa;;;;eAEoB,OAAO;;;;sBAIrB,KAAK;;EAEnC,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,gBACE,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,IAAIA,gBAAI,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,QACEA,oBACG,CAAC,IAAI,CAAC,UAAU,IAAIA,gBAAI,KAAK,EAAC,kCAAkC,IAAE,KAAK,CAAM,EAE9EA,gBAAI,KAAK,EAAC,kCAAkC,IACxC,KAAa,CAAC,GAAG,CAAC,CAAC,EAAC,KAAK,EAAE,GAAG,EAAC,EAAEE,OAAK;UACtC,IAAI,GAAG,EAAE;YACP,QACEF,gBAAI,KAAK,EAAC,iCAAiC,IACzCA,eAAG,IAAI,EAAE,GAAG,IACTE,OAAK,KAAK,CAAC,IAAIF,qBAAS,IAAI,EAAE,qBAAqB,EAAE,IAAI,EAAE,EAAE,GAAI,EAClEA,sBAAO,KAAK,CAAQ,CAClB,CACD,EACL;WACH;UAED,QACEA,gBAAI,KAAK,EAAC,iCAAiC,IACxCE,OAAK,KAAK,CAAC,IAAIF,qBAAS,IAAI,EAAE,qBAAqB,EAAE,IAAI,EAAE,EAAE,GAAI,EAClEA,sBAAO,KAAK,CAAQ,CACjB,EACL;SACH,CAAC,CACC,CACF,EACL;OACH;KACF,CAAC,CACC,CACA,EACP;GACH;;;;;;","names":["h","Host","index"],"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/dist/cjs/hy-person-profile.cjs.entry.js ADDED Viewed

@@ -0,0 +1,74 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-32830401.js');
+const utils = require('./utils-bfc1127a.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 = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    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 (index.h(index.Host, null, index.h("section", { class: "hy-profile-page" }, index.h("a", { href: this.peopleFinderReturnLink, class: "hy-profile-page__back-button" }, index.h("hy-icon", { icon: "hy-icon-arrow-left", size: 24 }), index.h("span", null, this.peopleFinderReturnLabel)), index.h("section", { class: "hy-profile-page__section" }, index.h("div", { class: "hy-profile-page__person-information" }, index.h("div", null, index.h("h1", { class: "hy-profile-page__name" }, name), job_title && index.h("p", { class: "hy-profile-page__job-title" }, job_title), additional_information && (index.h("p", { class: "hy-profile-page__additional-information" }, additional_information))), image_url ? (index.h("img", { src: image_url, alt: "", class: "hy-profile-page__image" })) : (index.h("div", { class: "hy-profile-page__image", "aria-hidden": "true" }))), contact_information && (index.h("div", { class: "hy-profile-page__contact-information" }, contact_information.label && index.h("h2", null, contact_information.label), contact_information.items && (index.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) && (index.h("section", { class: "hy-profile-page__section" }, organization_units.label && index.h("h2", null, organization_units.label), organizations.items.length > 0 && (index.h("section", { class: "hy-profile-page__organization-units-section" }, index.h("h3", null, organizations.label), index.h("ul", { class: "hy-profile-page__organizations" }, index.h("li", null, organizations.items.map((item, index$1) => {
+      return (index.h("span", null, index$1 > 1 && index.h("hy-icon", { icon: "hy-icon-caret-right", size: 10 }), index$1 !== 0 && (index.h("span", null, index.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 && (index.h("section", { class: "hy-profile-page__organization-units-section" }, index.h("h3", null, research_organizations.label), index.h("ul", { class: "hy-profile-page__research-organizations" }, Object.values(research_organizations.items).map(([...item]) => (index.h("li", null, item.map((item, index$1) => {
+      return (index.h(index.Fragment, null, index$1 > 1 && (index.h("ul", null, index.h("li", null, index.h("span", null, index.h("hy-icon", { icon: "hy-icon-caret-right", size: 10 }), index.h("span", null, index.h("a", { href: organization_units.people_finder_path[organization_units.lang] +
+          "?researchOrganizations.id[]=" +
+          item.id, target: "_blank" }, item.name[organization_units.lang])))))), index$1 == 1 && (index.h("span", null, index.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 && (index.h("section", { class: "hy-profile-page__section" }, about.description && (index.h(index.Fragment, null, index.h("h2", null, about.label), index.h("div", { class: "hy-profile-page__person-about-text", innerHTML: !this.isFullAboutTextHidden && aboutDescriptionLength > 650
+        ? trimmedAboutDescription
+        : about.description }))), aboutDescriptionLength > 650 && (index.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)) && (index.h("section", { class: "hy-profile-page__section" }, index.h("div", { class: "hy-profile-page__section__research_title" }, research.label && index.h("h2", null, research.label), research.label && person_content.research_url.length > 0 && (index.h("hy-cta-button", { "link-content": research_portal_title, "sc-label": research_portal_title, url: person_content.research_url, "is-external": "true", variant: utils.CtaLinkButtonVariants.onWhiteBkgd }))), research.items && (index.h("hy-person-profile-listing", { items: research.items, col: "col-1", textSpacingTight: true, "is-research": true, inline: true })), person_content.research_url.length > 0 && (index.h("div", { class: "hy-profile-page__loader", role: "presentation" }, index.h("div", null), index.h("div", null), index.h("div", null), index.h("div", null))), person_content.research_url.length > 0 && this.viewportSize < 768 && (index.h("div", { class: "hy-profile-page__person-content-container" }, index.h("hy-accordion-container", { accordionid: "accordion-container-person-content" }, person_content.publications && (index.h("hy-accordion-item", { "data-accordion-id": "publications", accordiontitle: person_content.publications.label })), person_content.projects && (index.h("hy-accordion-item", { "data-accordion-id": "projects", accordiontitle: person_content.projects.label })), person_content.activities && (index.h("hy-accordion-item", { "data-accordion-id": "activities", accordiontitle: person_content.activities.label }))))), person_content.research_url.length > 0 && this.viewportSize >= 768 && (index.h("div", { class: "hy-profile-page__person-content-container" }, index.h("hy-tabs", { "tab-id": "tabs-container-person-content" }, person_content.publications && (index.h("hy-tabs-item", { "data-tab-id": "publications", "tab-title": person_content.publications.label })), person_content.projects && (index.h("hy-tabs-item", { "data-tab-id": "projects", "tab-title": person_content.projects.label })), person_content.activities && (index.h("hy-tabs-item", { "data-tab-id": "activities", "tab-title": person_content.activities.label }))))))))));
+  }
+};
+PersonProfile.style = personProfileCss;
+exports.hy_person_profile = PersonProfile;
+//# sourceMappingURL=hy-person-profile.cjs.entry.js.map

package/dist/cjs/hy-person-profile.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"hy-person-profile.entry.cjs.js","mappings":"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","names":["h","Host","index","Fragment","CtaLinkButtonVariants"],"sources":["./src/components/hy-person-profile/person-profile.scss?tag=hy-person-profile","./src/components/hy-person-profile/person-profile.tsx"],"sourcesContent":[".hy-profile-page__back-button {\n @include font-size(16px, 20px);\n @include font-weight($semibold);\n font-family: var(--main-font-family);\n letter-spacing: -0.5px;\n color: var(--brand-main-light);\n padding: 12px 10px;\n display: inline-flex;\n text-decoration: none;\n margin-left: -10px;\n align-items: center;\n margin-bottom: 16px;\n\n @include breakpoint($medium) {\n margin-bottom: 24px;\n }\n\n hy-icon {\n margin-right: 16px;\n\n svg {\n fill: var(--brand-main-light);\n }\n }\n}\n\n.hy-profile-page__section {\n padding: 32px 0;\n\n &:first-of-type {\n padding: 0 0 32px;\n }\n\n &:not(:first-of-type) {\n border-top: 1px solid var(--grayscale-medium);\n }\n\n &__research_title > h2,\n > h2 {\n @include font-size(26px, 32px);\n @include font-weight($bold);\n font-family: var(--main-font-family);\n letter-spacing: -0.52px;\n color: var(--grayscale-black);\n margin: 0 0 32px;\n\n @include breakpoint($medium) {\n @include font-size(34px, 40px);\n letter-spacing: -0.68px;\n }\n }\n\n &__research_title {\n display: block;\n align-items: center;\n @include breakpoint($medium) {\n display: flex;\n }\n\n > hy-cta-button {\n margin: 0 0 32px 0;\n @include breakpoint($medium) {\n margin: 0 0 32px auto;\n }\n }\n }\n}\n\n.hy-profile-page__organization-units-section {\n font-family: var(--main-font-family);\n padding: 0;\n margin: 0;\n list-style: none;\n\n h3 {\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\n.hy-profile-page__organization-units-section {\n margin-top: 24px;\n\n @include breakpoint($medium) {\n margin-top: 32px;\n }\n\n a {\n text-decoration: none;\n color: var(--link-blue);\n\n &:hover {\n text-decoration: underline;\n }\n }\n}\n\n.hy-profile-page__organizations,\n.hy-profile-page__research-organizations {\n &,\n ul {\n list-style: none;\n margin: 0;\n padding: 0;\n display: grid;\n gap: 8px;\n }\n\n li {\n display: inline-flex;\n flex-wrap: wrap;\n\n span {\n @include font-size(15px, 22px);\n @include font-weight($regular);\n color: var(--grayscale-black);\n\n @include breakpoint($medium) {\n @include font-size(17px, 26px);\n }\n }\n\n > span {\n display: inline-flex;\n }\n\n hy-icon {\n justify-content: center;\n align-items: center;\n height: 22px;\n width: 28px;\n\n @include breakpoint($medium) {\n height: 26px;\n }\n }\n }\n}\n\n.hy-profile-page__person-about-text {\n @include font-size(15px, 22px);\n @include font-weight($regular);\n font-family: var(--main-font-family);\n color: var(--grayscale-black);\n\n @include breakpoint($medium) {\n @include font-size(17px, 26px);\n }\n}\n\n.hy-profile-page__person-about-text-toggle {\n @include font-size(15px, 22px);\n @include font-weight($regular);\n font-family: var(--main-font-family);\n color: var(--link-blue);\n background-color: transparent;\n border: 0;\n padding: 0;\n margin: 0;\n\n @include breakpoint($medium) {\n @include font-size(17px, 26px);\n }\n\n &:hover {\n cursor: pointer;\n }\n}\n\n.hy-profile-page__person-information {\n display: flex;\n flex-direction: column;\n gap: 16px;\n margin-bottom: 24px;\n\n @include breakpoint($medium) {\n flex-direction: row-reverse;\n align-items: center;\n margin-bottom: 40px;\n justify-content: flex-end;\n }\n}\n\n.hy-profile-page__image {\n aspect-ratio: 328 / 425;\n width: 100%;\n max-width: 328px;\n object-fit: cover;\n background-color: var(--grayscale-background-box);\n\n @include breakpoint($medium) {\n max-width: 194px;\n }\n}\n\n.hy-profile-page__contact-information {\n > h2 {\n @include font-size(26px, 32px);\n @include font-weight($bold);\n font-family: var(--main-font-family);\n letter-spacing: -0.52px;\n color: var(--grayscale-black);\n margin: 0 0 32px;\n\n @include breakpoint($medium) {\n @include font-size(34px, 40px);\n letter-spacing: -0.68px;\n }\n }\n}\n\n.hy-profile-page__name {\n @include font-size(32px, 38px);\n @include font-weight($bold);\n font-family: var(--main-font-family);\n letter-spacing: -0.8px;\n color: var(--grayscale-black);\n margin: 0 0 4px;\n text-transform: uppercase;\n\n @include breakpoint($wide) {\n @include font-size(46px, 54px);\n letter-spacing: -1.15px;\n margin: 0 0 8px;\n }\n\n @include breakpoint($fullhd) {\n @include font-size(52px, 60px);\n letter-spacing: -1.3px;\n }\n}\n\n.hy-profile-page__job-title {\n @include font-size(16px, 20px);\n @include font-weight($bold);\n font-family: var(--main-font-family);\n letter-spacing: -0.32px;\n color: var(--grayscale-black);\n margin: 0 0 4px;\n text-transform: capitalize;\n\n @include breakpoint($wide) {\n @include font-size(18px, 24px);\n letter-spacing: -0.36px;\n }\n}\n\n.hy-profile-page__additional-information {\n @include font-size(15px, 22px);\n @include font-weight($regular);\n font-family: var(--main-font-family);\n color: var(--grayscale-dark-text);\n margin: 0;\n\n @include breakpoint($wide) {\n @include font-size(17px, 26px);\n }\n}\n\n.hy-profile-page__person-content-container {\n display: none;\n margin-top: 32px;\n\n @include breakpoint($medium) {\n margin-top: 44px;\n }\n}\n\n.hy-profile-page__person-content-listing {\n display: grid;\n gap: 32px;\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.hy-profile-page__person-content {\n > h2 {\n margin: 0 0 8px;\n\n a {\n @include font-size(18px, 24px);\n @include font-weight($bold);\n font-family: var(--main-font-family);\n letter-spacing: -0.36px;\n color: var(--link-blue);\n text-decoration: none;\n\n @include breakpoint($medium) {\n @include font-size(22px, 28px);\n letter-spacing: -0.44px;\n }\n }\n }\n\n > span,\n > p {\n @include font-size(15px, 22px);\n @include font-weight($regular);\n font-family: var(--main-font-family);\n color: var(--grayscale-dark-text);\n\n @include breakpoint($medium) {\n @include font-size(17px, 26px);\n letter-spacing: -0.44px;\n }\n }\n\n > p {\n margin: 8px 0 0;\n }\n}\n\n.hy-profile-page__loader {\n display: inline-block;\n position: relative;\n width: 80px;\n height: 80px;\n margin-top: 32px;\n\n &.visible {\n display: block;\n }\n\n &.hidden {\n display: none;\n }\n\n @include breakpoint($medium) {\n margin-top: 44px;\n }\n\n div {\n box-sizing: border-box;\n display: block;\n position: absolute;\n width: 64px;\n height: 64px;\n margin: 8px;\n border: 6px solid #fff;\n border-radius: 50%;\n animation: loader-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n border-color: var(--brand-main-light) transparent transparent transparent;\n\n &:nth-child(1) {\n animation-delay: -0.45s;\n }\n\n &:nth-child(2) {\n animation-delay: -0.3s;\n }\n\n &:nth-child(3) {\n animation-delay: -0.15s;\n }\n }\n}\n\n@keyframes loader-ring {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.hidden {\n display: none;\n visibility: hidden;\n}\n","import {Component, Host, h, Prop, State, Fragment} from \"@stencil/core\";\nimport {CtaLinkButtonVariants} from \"../../utils/utils\";\n\nlet timer;\n@Component({\n tag: \"hy-person-profile\",\n shadow: false,\n styleUrl: \"person-profile.scss\",\n})\nexport class PersonProfile {\n @Prop() personDataJson: string;\n @Prop() showFullAboutText: string;\n @Prop() hideFullAboutText: string;\n @Prop() organizationItemsLabelText: string;\n @Prop() peopleFinderReturnLink: string;\n @Prop() peopleFinderReturnLabel: string;\n\n @State() isFullAboutTextHidden: boolean = false;\n @State() viewportSize: number;\n\n componentWillLoad() {\n this.viewportSize = window.innerWidth;\n }\n\n toggleShowFullAboutText() {\n this.isFullAboutTextHidden = !this.isFullAboutTextHidden;\n }\n\n disconnectedCallback() {\n clearTimeout(timer);\n }\n\n render() {\n const {\n name,\n job_title,\n additional_information,\n image_url,\n contact_information,\n organization_units,\n about,\n research,\n person_content,\n } = JSON.parse(this.personDataJson);\n\n const {organizations, research_organizations} = organization_units.items;\n\n const aboutDescriptionTextDestructured = about.description;\n\n const aboutDescriptionLength = aboutDescriptionTextDestructured.length;\n\n let trimmedAboutDescription = \"\";\n\n if (aboutDescriptionLength > 650) {\n if (this.isFullAboutTextHidden) {\n const ellipsisTextArray = aboutDescriptionTextDestructured + \"...\";\n\n trimmedAboutDescription = ellipsisTextArray;\n } else {\n const ellipsisTextArray = aboutDescriptionTextDestructured.substring(0, 650) + \"...\";\n\n trimmedAboutDescription = ellipsisTextArray;\n }\n }\n\n window.addEventListener(\"resize\", () => {\n clearTimeout(timer);\n timer = setTimeout(() => {\n this.viewportSize = window.innerWidth;\n }, 250);\n });\n\n const research_portal_title = `${research.research_portal_label}: ${name}`;\n return (\n <Host>\n <section class=\"hy-profile-page\">\n <a href={this.peopleFinderReturnLink} class=\"hy-profile-page__back-button\">\n <hy-icon icon={\"hy-icon-arrow-left\"} size={24} />\n <span>{this.peopleFinderReturnLabel}</span>\n </a>\n <section class=\"hy-profile-page__section\">\n <div class=\"hy-profile-page__person-information\">\n <div>\n <h1 class=\"hy-profile-page__name\">{name}</h1>\n {job_title && <p class=\"hy-profile-page__job-title\">{job_title}</p>}\n {additional_information && (\n <p class=\"hy-profile-page__additional-information\">{additional_information}</p>\n )}\n </div>\n {image_url ? (\n <img src={image_url} alt=\"\" class=\"hy-profile-page__image\" />\n ) : (\n <div class=\"hy-profile-page__image\" aria-hidden=\"true\" />\n )}\n </div>\n {contact_information && (\n <div class=\"hy-profile-page__contact-information\">\n {contact_information.label && <h2>{contact_information.label}</h2>}\n {contact_information.items && (\n <hy-person-profile-listing\n items={contact_information.items}\n col=\"col-4\"\n withoutIcons\n textSpacingTight\n ></hy-person-profile-listing>\n )}\n </div>\n )}\n </section>\n {(organizations.items.length > 0 || Object.keys(research_organizations.items).length > 0) && (\n <section class=\"hy-profile-page__section\">\n {organization_units.label && <h2>{organization_units.label}</h2>}\n {organizations.items.length > 0 && (\n <section class=\"hy-profile-page__organization-units-section\">\n <h3>{organizations.label}</h3>\n <ul class=\"hy-profile-page__organizations\">\n <li>\n {organizations.items.map((item, index) => {\n return (\n <span>\n {index > 1 && <hy-icon icon={\"hy-icon-caret-right\"} size={10} />}\n {index !== 0 && (\n <span>\n <a\n href={\n organization_units.people_finder_path[organization_units.lang] +\n \"?researchOrganizations.id[]=\" +\n item.id\n }\n target={\"_blank\"}\n >\n {item.name[organization_units.lang]}\n </a>\n </span>\n )}\n </span>\n );\n })}\n </li>\n </ul>\n </section>\n )}\n {Object.keys(research_organizations.items).length > 0 && (\n <section class=\"hy-profile-page__organization-units-section\">\n <h3>{research_organizations.label}</h3>\n <ul class=\"hy-profile-page__research-organizations\">\n {Object.values(research_organizations.items).map(([...item]) => (\n <li>\n {item.map((item, index) => {\n return (\n <Fragment>\n {index > 1 && (\n <ul>\n <li>\n <span>\n <hy-icon icon={\"hy-icon-caret-right\"} size={10} />\n <span>\n <a\n href={\n organization_units.people_finder_path[organization_units.lang] +\n \"?researchOrganizations.id[]=\" +\n item.id\n }\n target={\"_blank\"}\n >\n {item.name[organization_units.lang]}\n </a>\n </span>\n </span>\n </li>\n </ul>\n )}\n {index == 1 && (\n <span>\n <a\n href={\n organization_units.people_finder_path[organization_units.lang] +\n \"?researchOrganizations.id[]=\" +\n item.id\n }\n target={\"_blank\"}\n >\n {item.name[organization_units.lang]}\n </a>\n </span>\n )}\n </Fragment>\n );\n })}\n </li>\n ))}\n </ul>\n </section>\n )}\n </section>\n )}\n {about && aboutDescriptionLength !== 0 && (\n <section class=\"hy-profile-page__section\">\n {about.description && (\n <Fragment>\n <h2>{about.label}</h2>\n <div\n class=\"hy-profile-page__person-about-text\"\n innerHTML={\n !this.isFullAboutTextHidden && aboutDescriptionLength > 650\n ? trimmedAboutDescription\n : about.description\n }\n ></div>\n </Fragment>\n )}\n {aboutDescriptionLength > 650 && (\n <button\n class=\"hy-profile-page__person-about-text-toggle\"\n onClick={() => this.toggleShowFullAboutText()}\n aria-expanded={`${this.isFullAboutTextHidden ? \"true\" : \"false\"}`}\n >\n {this.isFullAboutTextHidden ? this.hideFullAboutText : this.showFullAboutText}\n </button>\n )}\n </section>\n )}\n {((research && research.items.length > 0) || (person_content && person_content.research_url.length > 0)) && (\n <section class=\"hy-profile-page__section\">\n <div class=\"hy-profile-page__section__research_title\">\n {research.label && <h2>{research.label}</h2>}\n {research.label && person_content.research_url.length > 0 && (\n <hy-cta-button\n link-content={research_portal_title}\n sc-label={research_portal_title}\n url={person_content.research_url}\n is-external=\"true\"\n variant={CtaLinkButtonVariants.onWhiteBkgd}\n ></hy-cta-button>\n )}\n </div>\n\n {research.items && (\n <hy-person-profile-listing\n items={research.items}\n col=\"col-1\"\n textSpacingTight\n is-research\n inline\n ></hy-person-profile-listing>\n )}\n\n {person_content.research_url.length > 0 && (\n <div class=\"hy-profile-page__loader\" role=\"presentation\">\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n </div>\n )}\n\n {person_content.research_url.length > 0 && this.viewportSize < 768 && (\n <div class=\"hy-profile-page__person-content-container\">\n <hy-accordion-container accordionid=\"accordion-container-person-content\">\n {person_content.publications && (\n <hy-accordion-item\n data-accordion-id={\"publications\"}\n accordiontitle={person_content.publications.label}\n ></hy-accordion-item>\n )}\n {person_content.projects && (\n <hy-accordion-item\n data-accordion-id={\"projects\"}\n accordiontitle={person_content.projects.label}\n ></hy-accordion-item>\n )}\n {person_content.activities && (\n <hy-accordion-item\n data-accordion-id={\"activities\"}\n accordiontitle={person_content.activities.label}\n ></hy-accordion-item>\n )}\n </hy-accordion-container>\n </div>\n )}\n {person_content.research_url.length > 0 && this.viewportSize >= 768 && (\n <div class=\"hy-profile-page__person-content-container\">\n <hy-tabs tab-id=\"tabs-container-person-content\">\n {person_content.publications && (\n <hy-tabs-item\n data-tab-id={\"publications\"}\n tab-title={person_content.publications.label}\n ></hy-tabs-item>\n )}\n {person_content.projects && (\n <hy-tabs-item data-tab-id={\"projects\"} tab-title={person_content.projects.label}></hy-tabs-item>\n )}\n {person_content.activities && (\n <hy-tabs-item\n data-tab-id={\"activities\"}\n tab-title={person_content.activities.label}\n ></hy-tabs-item>\n )}\n </hy-tabs>\n </div>\n )}\n </section>\n )}\n </section>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/hy-process_2.cjs.entry.js ADDED Viewed

@@ -0,0 +1,86 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-32830401.js');
+const utils = require('./utils-bfc1127a.js');
+const globalScript = require('./globalScript-9994473d.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 = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.headerstyle = "common";
+    this.numberTerm = undefined;
+    this.dataItems = undefined;
+  }
+  async componentWillLoad() {
+    this._dataItems = await globalScript.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)
+      ? utils.ProcessFlowBoxVariants.default
+      : utils.ProcessFlowBoxVariants.small;
+    const itemsPerRow = processVariant == utils.ProcessFlowBoxVariants.small ? 4 : 3;
+    const classAttributes = [processVariant, "hy-process", `hy-process__${this.headerstyle}`].join(" ");
+    const classItem = "box";
+    var stepState;
+    return [
+      index.h("div", { class: classAttributes }, this._dataItems.map((x, index$1) => {
+        index$1 % itemsPerRow == 0 ? (stepState = "first") : (stepState = "default");
+        return (index.h("hy-process-flow-box", { class: classItem, variant: processVariant, "box-number": index$1 + 1, "box-title": x.heading, "box-description": x.description, "intermediate-step-title": x.step, "step-state": stepState, "number-term": this.numberTerm }));
+      })),
+    ];
+  }
+  get el() { return index.getElement(this); }
+};
+Process.style = processCss;
+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}";
+const ProcessFlowBox = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.variant = utils.ProcessFlowBoxVariants.default;
+    this.boxNumber = undefined;
+    this.boxTitle = undefined;
+    this.boxDescription = undefined;
+    this.intermediateStepTitle = "";
+    this.stepState = "default";
+    this.numberTerm = undefined;
+  }
+  render() {
+    const classVariant = [this.variant, "hy-process-flow-box"].join(" ");
+    const classContentVariant = [this.variant, "hy-process-flow-box__content"].join(" ");
+    const classIsEven = parseInt(this.boxNumber) % 2 == 0 ? "even" : "odd";
+    const classNumberVariant = [this.variant, "hy-process-flow-box__number__container"].join(" ");
+    const classStepVariant = [this.variant, this.stepState, classIsEven, "hy-process-flow-box__step__container"].join(" ");
+    return (index.h(index.Host, null, index.h("div", { class: classVariant }, this.intermediateStepTitle && (index.h("div", { class: classStepVariant }, index.h("svg", { class: "desktop", width: "210", height: "60" }, index.h("polygon", { points: "0 0, 0 60, 190 60, 210 30, 190 0, 0 0" })), index.h("svg", { class: "mobile", width: "138", height: "82" }, index.h("polygon", { points: "0 0, 69 15, 138 0, 138 50, 69 82, 0 50" })), index.h("h2", { class: "hy-process-flow-box__step" }, this.intermediateStepTitle))), index.h("div", { class: classNumberVariant }, index.h("h2", { class: "hy-process-flow-box__number", "aria-label": `${this.numberTerm && this.numberTerm} ${this.boxNumber}` }, index.h("div", { class: "hy-process-flow-box__number-title" }, this.boxNumber))), index.h("div", { class: classContentVariant }, index.h("h3", { class: "hy-process-flow-box__title", innerHTML: this.boxTitle }), index.h("div", { class: "hy-process-flow-box__description", innerHTML: this.boxDescription }))), index.h("hy-box", { mb: "1.75, 1.75, 2, 2.5" })));
+  }
+};
+ProcessFlowBox.style = processFlowBoxCss;
+exports.hy_process = Process;
+exports.hy_process_flow_box = ProcessFlowBox;
+//# sourceMappingURL=hy-process_2.cjs.entry.js.map

package/dist/cjs/hy-process_2.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"hy-process.hy-process-flow-box.entry.cjs.js","mappings":"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","names":["jsonParserWorker","ProcessFlowBoxVariants","h","index","Host"],"sources":["./src/components/hy-process/process.scss?tag=hy-process&encapsulation=shadow","./src/components/hy-process/process.tsx","./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 {\n display: block;\n justify-content: center;\n max-width: 30rem;\n margin-right: auto;\n margin-left: auto;\n width: 100%;\n\n @include breakpoint($narrow) {\n display: flex;\n flex-wrap: wrap;\n justify-content: left;\n max-width: 60rem;\n width: 100%;\n }\n @include breakpoint($wide) {\n max-width: 75rem;\n }\n}\n\n.hy-process.small {\n .box {\n display: block;\n margin: 1%;\n @include breakpoint($narrow) {\n flex-grow: 1;\n max-width: 48%;\n padding-bottom: 10px;\n width: 48%;\n }\n @include breakpoint($wide) {\n flex-grow: 1;\n max-width: 23%;\n width: 23%;\n }\n }\n}\n\n.hy-process.big {\n .box {\n display: block;\n margin: 1%;\n @include breakpoint($narrow) {\n flex-grow: 1;\n max-width: 48%;\n padding-bottom: 10px;\n width: 48%;\n }\n @include breakpoint($wide) {\n flex-grow: 1;\n max-width: 31%;\n width: 31%;\n }\n }\n}\n\n.hy-process::after {\n clear: both;\n}\n","export interface ProcessFlowBoxValue {\n heading: string;\n description: string;\n step: string;\n}\n\nimport {Component, ComponentInterface, Prop, h, Element} from \"@stencil/core\";\nimport {ProcessFlowBoxVariants} from \"../../utils/utils\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\n\n@Component({\n tag: \"hy-process\",\n styleUrl: \"process.scss\",\n shadow: true,\n})\nexport class Process implements ComponentInterface {\n @Element() el: HTMLElement;\n @Prop() headerstyle: string = \"common\";\n @Prop() numberTerm: string;\n private _dataItems: ProcessFlowBoxValue[];\n @Prop() dataItems: ProcessFlowBoxValue[] | string;\n\n async componentWillLoad() {\n this._dataItems = await jsonParserWorker(this.dataItems);\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 /*\n - Logic:\n - 3 items: big\n - 4 items: small\n - 5 items: big\n - 6 items: big\n - 7 items: small\n - 8 items: small\n - 9 items: big\n * */\n const bigVariants = [3, 5, 6, 9];\n const processVariant = bigVariants.includes(this._dataItems.length)\n ? ProcessFlowBoxVariants.default\n : ProcessFlowBoxVariants.small;\n\n const itemsPerRow = processVariant == ProcessFlowBoxVariants.small ? 4 : 3;\n const classAttributes = [processVariant, \"hy-process\", `hy-process__${this.headerstyle}`].join(\" \");\n const classItem = \"box\";\n var stepState;\n\n return [\n <div class={classAttributes}>\n {this._dataItems.map((x, index) => {\n index % itemsPerRow == 0 ? (stepState = \"first\") : (stepState = \"default\");\n return (\n <hy-process-flow-box\n class={classItem}\n variant={processVariant}\n box-number={index + 1}\n box-title={x.heading}\n box-description={x.description}\n intermediate-step-title={x.step}\n step-state={stepState}\n number-term={this.numberTerm}\n />\n );\n })}\n </div>,\n ];\n }\n}\n",":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/dist/cjs/hy-prominent-image.cjs.entry.js ADDED Viewed

@@ -0,0 +1,41 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-32830401.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 = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    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 (index.h(index.Host, null, index.h("div", { class: prominentImageClass }, index.h("div", { class: "hy-prominent-image__image" }, index.h("hy-image", { "source-set": this.sourceSet, "image-url": this.imageUrl, "image-alt": this.imageAlt, aspectRatioWidth: 2, aspectRatioHeight: 1 })), this.textTitle && index.h("div", { class: prominentImageText }, this.textTitle))));
+  }
+  get el() { return index.getElement(this); }
+};
+HyProminentImage.style = hyProminentImageCss;
+exports.hy_prominent_image = HyProminentImage;
+//# sourceMappingURL=hy-prominent-image.cjs.entry.js.map

package/dist/cjs/hy-prominent-image.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"hy-prominent-image.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,mBAAmB,GAAG,0sEAA0sE;;MCcztE,gBAAgB;;;;;oBAGA,EAAE;uBACC,QAAQ;;;EAItC,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,mBAAmB,GAAG;MAC1B,oBAAoB;MACpB,IAAI,CAAC,WAAW;MAChB,uBAAuB,IAAI,CAAC,WAAW,EAAE;KAC1C,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEZ,MAAM,kBAAkB,GAAG,CAAC,0BAA0B,EAAE,6BAA6B,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEnH,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAE,mBAAmB,IAC7BA,iBAAK,KAAK,EAAC,2BAA2B,IACpCA,oCACc,IAAI,CAAC,SAAS,eACf,IAAI,CAAC,QAAQ,eACb,IAAI,CAAC,QAAQ,EACxB,gBAAgB,EAAE,CAAC,EACnB,iBAAiB,EAAE,CAAC,GACpB,CACE,EACL,IAAI,CAAC,SAAS,IAAIA,iBAAK,KAAK,EAAE,kBAAkB,IAAG,IAAI,CAAC,SAAS,CAAO,CACrE,CACD,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["./src/components/hy-prominent-image/hy-prominent-image.scss?tag=hy-prominent-image&encapsulation=shadow","./src/components/hy-prominent-image/hy-prominent-image.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-prominent-image {\n position: relative;\n\n &__text {\n // font: h5 small size\n @include font-size(16px, 20px);\n background-color: var(--grayscale-black);\n bottom: 12px;\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n font-weight: bold;\n left: -8px;\n letter-spacing: -0.5px;\n max-width: 46%; // 5.5 columns\n padding: 6px 12px;\n position: absolute;\n text-transform: uppercase;\n\n @include breakpoint($narrow) {\n // font: h4 small size\n @include font-size(18px, 24px);\n bottom: 20px;\n left: -16px;\n letter-spacing: -0.56px;\n max-width: 58%; // 7 columns\n padding: 12px 24px;\n position: absolute;\n }\n\n @include breakpoint($wide) {\n // font: h4 medium size\n @include font-size(22px, 28px);\n bottom: 24px;\n left: -16px;\n letter-spacing: -0.69px;\n padding: 16px 24px;\n position: absolute;\n }\n @include breakpoint($xlarge) {\n // font: h3 medium size\n @include font-size(26px, 32px);\n bottom: 28px;\n left: -16px;\n letter-spacing: -0.8px;\n padding: 20px 24px;\n position: absolute;\n }\n\n &__large {\n @include breakpoint($extrawide) {\n // font: h3 medium size\n @include font-size(26px, 32px);\n bottom: 28px;\n left: -16px;\n letter-spacing: -0.8px;\n padding: 20px 24px;\n position: absolute;\n }\n }\n }\n}\n","export interface ImageSrcSet {\n src: any;\n media: string;\n type: string;\n sizes: string | null;\n}\n\nimport {Component, Element, Host, h, Prop} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-prominent-image\",\n styleUrl: \"hy-prominent-image.scss\",\n shadow: true,\n})\nexport class HyProminentImage {\n @Prop() textTitle?: string;\n @Prop() imageUrl?: string;\n @Prop() imageAlt: string = \"\";\n @Prop() headerstyle: string = \"common\";\n @Prop() sourceSet: ImageSrcSet[] | string;\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 prominentImageClass = [\n \"hy-prominent-image\",\n this.headerstyle,\n `hy-prominent-image__${this.headerstyle}`,\n ].join(\" \");\n\n const prominentImageText = [\"hy-prominent-image__text\", `hy-prominent-image__text__${this.headerstyle}`].join(\" \");\n\n return (\n <Host>\n <div class={prominentImageClass}>\n <div class=\"hy-prominent-image__image\">\n <hy-image\n source-set={this.sourceSet}\n image-url={this.imageUrl}\n image-alt={this.imageAlt}\n aspectRatioWidth={2}\n aspectRatioHeight={1}\n />\n </div>\n {this.textTitle && <div class={prominentImageText}>{this.textTitle}</div>}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}