npm - @itcenteratunihelsinki/huds-lib - Versions diffs - 0.8.66 → 0.8.68 - Mend

@itcenteratunihelsinki/huds-lib 0.8.66 → 0.8.68

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

package/dist/huds-lib/hy-list-item.entry.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{r as i,h as e,g as t}from"./index-f84f2a7d.js";import{L as n}from"./utils-2819fd7e.js";const o=':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-list-item{display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);text-decoration:none}.hy-list-item__default{margin-bottom:28px}@media (min-width: 60rem){.hy-list-item__default{margin-bottom:32px}}.hy-list-item__default__info-container__header{font-size:0.75rem;line-height:14px;color:var(--grayscale-dark);letter-spacing:0;margin-bottom:4px}@media (min-width: 30rem){.hy-list-item__default__info-container__header{font-size:0.875rem;line-height:18px;margin-bottom:2px}}.hy-list-item__default__info-container__title{font-size:1.125rem;line-height:22px;font-weight:700;color:var(--brand-main-light);letter-spacing:-0.56px;margin-bottom:6px}@media (min-width: 30rem){.hy-list-item__default__info-container__title{font-size:1.375rem;line-height:28px;letter-spacing:-0.69px;margin-bottom:10px}}@media (min-width: 1601px){.hy-list-item__default__info-container__title{font-size:1.625rem;line-height:32px;letter-spacing:-0.8px;margin-bottom:8px}}@media (min-width: 75.0625rem){.hy-list-item__default__info-container__title__large{font-size:1.625rem;line-height:32px;letter-spacing:-0.8px;margin-bottom:8px}}.hy-list-item__default__info-container__link-container{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:6px}@media (min-width: 30rem){.hy-list-item__default__info-container__link-container{margin-bottom:8px}}.hy-list-item__default__info-container__link{font-size:0.75rem;line-height:16px;color:var(--grayscale-dark);letter-spacing:-0.07px;margin-left:4px}@media (min-width: 30rem){.hy-list-item__default__info-container__link{margin-left:5px}}.hy-list-item__default__info-container__link__icon svg{fill:var(--grayscale-dark)}.hy-list-item__default__info-container__description{font-size:0.875rem;line-height:20px;color:var(--grayscale-black);letter-spacing:0}@media (min-width: 30rem){.hy-list-item__default__info-container__description{font-size:1rem;line-height:24px}}.hy-list-item__position{background:radial-gradient(circle, var(--grayscale-light) 0%, var(--grayscale-background-box) 100%);-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@media (min-width: 30rem){.hy-list-item__position{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.hy-list-item__position__info-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin:0;padding:12px;position:relative}@media (min-width: 60rem){.hy-list-item__position__info-container{padding:12px 16px}}@media (min-width: 1601px){.hy-list-item__position__info-container{padding:20px 24px}}.hy-list-item__position__info-container__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;color:var(--brand-main);font-family:var(--main-font-family);font-size:14px;font-weight:600;letter-spacing:-0.2px;line-height:14px;margin-bottom:14px}.hy-list-item__position__info-container__header .icon{margin-right:0.75rem}.hy-list-item__position__info-container__header .icon svg{fill:var(--brand-main)}@media (min-width: 75.0625rem){.hy-list-item__position__info-container__large{padding:20px 24px}}.hy-list-item__position__info-container__data{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.hy-list-item__position__info-container__title{font-size:1.125rem;line-height:20px;font-weight:700;font-family:var(--main-font-family);color:var(--grayscale-black);margin-bottom:12px;letter-spacing:-0.45px;line-height:22px}@media (min-width: 30rem){.hy-list-item__position__info-container__title{letter-spacing:-0.5px}}.hy-list-item__position__info-container__description{font-size:0.875rem;color:var(--grayscale-dark-text);display:none;font-family:var(--main-font-family);letter-spacing:0.8px;margin-bottom:14px;line-height:20px}@media (min-width: 30rem){.hy-list-item__position__info-container__description{display:block}}.hy-list-item__position__info-container__outgoing-link{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;position:relative;padding:0 24px 24px 12px}@media (min-width: 30rem){.hy-list-item__position__info-container__outgoing-link{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:0 24px 24px 0}}.hy-list-item__position__info-container__outgoing-link .label{color:var(--link-blue);font-family:var(--main-font-family);font-size:16px;font-weight:600;letter-spacing:-0.3px;line-height:20px}.hy-list-item__position__info-container__outgoing-link .icon{margin-right:4px;margin-bottom:2px}.hy-list-item__position__info-container__outgoing-link .icon svg{fill:var(--link-blue)}.hy-list-item__degree{background:radial-gradient(circle, var(--grayscale-light) 0%, var(--grayscale-background-box) 100%);-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@media (min-width: 30rem){.hy-list-item__degree{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.hy-list-item__degree__image-container{display:block;position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1}@media (min-width: 30rem){.hy-list-item__degree__image-container{-webkit-box-flex:0;-ms-flex:0 0 24%;flex:0 0 24%}}.hy-list-item__degree__image-container__image{vertical-align:bottom;max-width:100%;height:100%}.hy-list-item__degree__image-container__image img{-o-object-fit:cover;object-fit:cover;width:100%;height:100%}.hy-list-item__degree__image-container span{font-weight:600;font-size:0.75rem;line-height:14px;background-color:var(--additional-yellow);-webkit-box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.05);box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.05);color:var(--grayscale-black);left:-4px;letter-spacing:-0.07px;padding:5px 8px;position:absolute;top:16px;text-transform:uppercase}@media (min-width: 30rem){.hy-list-item__degree__image-container span{left:-8px}}@media (min-width: 60rem){.hy-list-item__degree__image-container span{top:22px}}.hy-list-item__degree__info-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin:0;padding:12px;position:relative}@media (min-width: 60rem){.hy-list-item__degree__info-container{padding:12px 16px}}@media (min-width: 1601px){.hy-list-item__degree__info-container{padding:20px 24px}}@media (min-width: 75.0625rem){.hy-list-item__degree__info-container__large{padding:20px 24px}}.hy-list-item__degree__info-container__data{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.hy-list-item__degree__info-container__title{font-size:1.125rem;line-height:22px;font-weight:700;color:var(--link-blue);letter-spacing:-0.54px;margin-bottom:8px}@media (min-width: 60rem){.hy-list-item__degree__info-container__title{font-size:1.125rem;line-height:24px;letter-spacing:-0.5px}}@media (min-width: 1601px){.hy-list-item__degree__info-container__title{font-size:1.25rem;line-height:26px;letter-spacing:-0.6px}}@media (min-width: 75.0625rem){.hy-list-item__degree__info-container__title__large{font-size:1.25rem;line-height:26px;letter-spacing:-0.6px}}.hy-list-item__degree__info-container__description{font-size:0.875rem;line-height:18px;color:var(--grayscale-dark);letter-spacing:0;margin-bottom:16px}@media (min-width: 60rem){.hy-list-item__degree__info-container__description{letter-spacing:-0.2}}@media (min-width: 1601px){.hy-list-item__degree__info-container__description{font-size:1rem;line-height:20px;letter-spacing:-0.25px}}@media (min-width: 75.0625rem){.hy-list-item__degree__info-container__description__large{font-size:1rem;line-height:20px;letter-spacing:-0.25px}}.hy-list-item__degree__info-container__metadata-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-top:16px;width:100%}@media (min-width: 30rem){.hy-list-item__degree__info-container__metadata-wrapper{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}}.hy-list-item__degree__info-container__metadata-wrapper.link-only{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.hy-list-item__degree__info-container__additional-info{width:100%}.hy-list-item__degree__info-container__additional-info__item{font-size:0.75rem;line-height:16px;font-weight:300;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--grayscale-black);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;letter-spacing:-0.2px}@media (min-width: 1601px){.hy-list-item__degree__info-container__additional-info__item{font-size:0.875rem;line-height:16px}}@media (min-width: 75.0625rem){.hy-list-item__degree__info-container__additional-info__item__large{font-size:0.875rem;line-height:16px}}.hy-list-item__degree__info-container__additional-info__item.active::before{content:" ";-webkit-box-sizing:border-box;box-sizing:border-box;height:14px;width:14px;border:3px solid #ffffff;border-radius:50%;background-color:#f9a21a;left:-7px;position:absolute}@media (min-width: 30rem){.hy-list-item__degree__info-container__additional-info__item.active::before{border:none;height:8px;margin-right:6px;width:8px;left:0;position:relative}}.hy-list-item__degree__info-container__outgoing-link{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;position:relative;width:100%}.hy-list-item__degree__info-container__outgoing-link a{-webkit-box-align:center;-ms-flex-align:center;align-items:center;bottom:0;top:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;position:relative;right:-18px;text-decoration:none}@media (min-width: 60rem){.hy-list-item__degree__info-container__outgoing-link a{right:-22px}}@media (min-width: 1601px){.hy-list-item__degree__info-container__outgoing-link a{right:-30px}}.hy-list-item__degree__info-container__outgoing-link a .label{font-size:0.875rem;line-height:16px;font-weight:700;color:var(--link-blue);letter-spacing:-0.5px;margin-right:8px;text-align:right}.hy-list-item__degree__info-container__outgoing-link a .icon-wrapper{background-color:var(--brand-main-light);z-index:10}.hy-list-item__degree__info-container__outgoing-link a .icon-wrapper .icon{position:relative;overflow:hidden}.hy-list-item__degree__info-container__outgoing-link a .icon-wrapper .icon svg{background-color:transparent;-webkit-box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.1);box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.1);fill:var(--grayscale-white);padding:6.4px}@media (min-width: 1601px){.hy-list-item__degree__info-container__outgoing-link a .icon-wrapper .icon svg{height:36px;width:36px;padding:7.2px}}@media (min-width: 75.0625rem){.hy-list-item__degree__info-container__outgoing-link__large svg{height:36px;width:36px;padding:7.2px}}.hy-list-item-wrapper{font-family:var(--main-font-family)}.hy-list-item-wrapper__degree{margin-bottom:16px}@media (min-width: 30rem){.hy-list-item-wrapper__degree{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin-bottom:24px}}@media (min-width: 60rem){.hy-list-item-wrapper__degree{margin-bottom:28px}}@media (min-width: 1601px){.hy-list-item-wrapper__degree{margin-bottom:32px}}@media (min-width: 75.0625rem){.hy-list-item-wrapper__degree__large{margin-bottom:32px}}.hy-list-item-wrapper__degree__related-info{background:radial-gradient(circle, #f8f8f8 0%, #f5f5f5 100%);margin-top:4px;padding:0 12px 0 16px}@media (min-width: 30rem){.hy-list-item-wrapper__degree__related-info{padding:0 24px 0 16px}}@media (min-width: 60rem){.hy-list-item-wrapper__degree__related-info{margin-top:6px;padding:0 24px 0 24px}}@media (min-width: 1601px){.hy-list-item-wrapper__degree__related-info{margin-top:8px}}@media (min-width: 75.0625rem){.hy-list-item-wrapper__degree__related-info__large{margin-top:8px}}.hy-list-item-wrapper__degree__related-info__heading__link{text-decoration:none}.hy-list-item-wrapper__degree__related-info__heading__button{font-size:0.75rem;line-height:16px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:radial-gradient(circle, #f8f8f8 0%, #f5f5f5 100%);border:none;color:var(--grayscale-black);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;font-family:var(--main-font-family);letter-spacing:-0.2px;height:100%;padding:8px 0;text-align:left;width:100%}@media (min-width: 30rem){.hy-list-item-wrapper__degree__related-info__heading__button{font-size:0.75rem;line-height:20px;padding:14px 0}}@media (min-width: 60rem){.hy-list-item-wrapper__degree__related-info__heading__button{font-size:0.875rem;line-height:20px;letter-spacing:-0.4px;padding:18px 0}}.hy-list-item-wrapper__degree__related-info__heading__button:hover{cursor:pointer}.hy-list-item-wrapper__degree__related-info__heading__button__is-open svg{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.hy-list-item-wrapper__degree__related-info__heading__icon{margin-right:0.5rem;z-index:0}@media (min-width: 60rem){.hy-list-item-wrapper__degree__related-info__heading__icon{margin-right:12px}}.hy-list-item-wrapper__degree__related-info__heading__icon svg{fill:var(--brand-main);height:14px;width:14px}@media (min-width: 60rem){.hy-list-item-wrapper__degree__related-info__heading__icon svg{height:18px;width:18px}}.hy-list-item-wrapper__degree__related-info__content{display:none}.hy-list-item-wrapper__degree__related-info__content__is-open{border-top:1px solid #d2d2d2;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:20px 8px 5px 8px}@media (min-width: 60rem){.hy-list-item-wrapper__degree__related-info__content__is-open{padding:20px 0 14px 0}}.hy-list-item-wrapper__degree__related-info__link{font-size:0.875rem;line-height:16px;font-weight:700;color:var(--link-blue);letter-spacing:-0.4px;margin-bottom:16px;text-decoration:none}';let a={enter:"Enter",space:"Space"};const r=class{constructor(e){i(this,e);this.isExpandedRelatedContent=false;this.variant=n.default;this.itemType=undefined;this.itemTitle=undefined;this.itemDescription=undefined;this.url=undefined;this.isExternal=false;this.scLabel=undefined;this.itemImageUrl=undefined;this.itemImageAlt=undefined;this.disableLazy=false;this.relatedLinksBlockTitle=undefined;this.relatedLinks=undefined;this.imageLabel=undefined;this.outGoingUrlLabel="Go to programme page";this.additionalInfo=undefined;this.headerstyle="common";this.sourceSet=undefined;this.truncateDescription=false;this.truncateLimit=140;this._imageMinHeight=0;this._imageMinWidth=0}relatedLinksWatcher(i){if(typeof i==="string"){this._relatedLinks=JSON.parse(i)}else{this._relatedLinks=i}}additionalInfoWatcher(i){if(typeof i==="string"){this._additionalInfo=JSON.parse(i)}else{this._additionalInfo=i}}srcSetWatcher(i){this._sourceSet=typeof i==="string"?JSON.parse(i):i}expandRelatedInfoPanel(i){let e=`hy-list-item-wrapper__${this.variant}__related-info__content`;let t="hy-list-item-wrapper__degree__related-info__heading__button";let n=document.querySelectorAll(`[aria-labelledBy="${i.id}"]`)[0];if(n){if(!this.isExpandedRelatedContent){n.classList.add(`${e}__is-open`);i.classList.add(`${t}__is-open`)}else{n.classList.remove(`${e}__is-open`);i.classList.remove(`${t}__is-open`)}this.isExpandedRelatedContent=!this.isExpandedRelatedContent}}handleKeyDown(i){const e=i.code;let t=i.target;const n=t.tagName.toLowerCase();const o=[n].some((i=>["svg","path","button","a"].indexOf(i)>=0));if(t&&o&&!t.classList.contains("hy-list-item-wrapper__degree__related-info__link")&&[a.enter,a.space].includes(e)){if(n!=="button"){t=t.closest(`.hy-list-item-wrapper__${this.variant}__related-info__heading__button`)}this.expandRelatedInfoPanel(t);i.preventDefault()}}handleClick(i){let e=i.target;const t=e.tagName.toLowerCase();const n=[t].some((i=>["svg","path","button","a"].indexOf(i)>=0));if(e&&n&&!e.classList.contains("hy-list-item-wrapper__degree__related-info__link")){if(t!=="button"){e=e.closest(`.hy-list-item-wrapper__${this.variant}__related-info__heading__button`)}this.expandRelatedInfoPanel(e);i.preventDefault();i.stopImmediatePropagation()}}componentWillLoad(){this.relatedLinksWatcher(this.relatedLinks);this.additionalInfoWatcher(this.additionalInfo);this.srcSetWatcher(this.sourceSet)}componentDidLoad(){let i=this.el.closest(".hy-main");if(i){if(!i.classList.contains("with-sidebar")){this.headerstyle="large"}}if(this.variant==n.degreeProgramme){const i=document.querySelector(".hy-list-item__degree__image-container__image img");if(i){i.addEventListener("load",(function(){const e=1;const t=i.naturalHeight;const n=i.naturalWidth;const o=n/t;this._imageMinWidth=n;this._imageMinHeight=t;if(o>e){this._imageMinWidth=t*e}else if(o<e){this._imageMinHeight=n/e}}))}}}render(){const i=["hy-list-item-wrapper",`hy-list-item-wrapper__${this.variant}`,`hy-list-item-wrapper__${this.variant}__${this.headerstyle}`].join(" ");const t=["hy-list-item",`hy-list-item__${this.variant}`].join(" ");const o=[`hy-list-item__${this.variant}__info-container`,`hy-list-item__${this.variant}__info-container__${this.headerstyle}`].join(" ");const a=[`hy-list-item__${this.variant}__info-container__header`,`hy-list-item__${this.variant}__info-container__header__${this.headerstyle}`].join(" ");const r=[`hy-list-item__${this.variant}__info-container__title`,`hy-list-item__${this.variant}__info-container__title__${this.headerstyle}`].join(" ");const _=[`hy-list-item__${this.variant}__info-container__description`,`hy-list-item__${this.variant}__info-container__description__${this.headerstyle}`].join(" ");const l=[`hy-list-item__${this.variant}__info-container__link-container`].join(" ");const s=[`hy-list-item__${this.variant}__info-container__link__icon`].join(" ");const d=[`hy-list-item__${this.variant}__info-container__link`].join(" ");const m=this.isExternal?"_blank":"_self";function h(i,e){return i.length>e?i.substr(0,e-1)+"...":i}switch(this.variant){case n.position:{const i=[`hy-list-item__${this.variant}__info-container__outgoing-link`,`hy-list-item__${this.variant}__info-container__outgoing-link__${this.headerstyle}`].join(" ");return e("article",null,e("a",{class:t,href:this.url,target:m,"aria-label":this.scLabel},e("div",{class:o},e("div",{class:a},e("div",{class:"icon"},e("hy-icon",{icon:"hy-icon-units-and-faculties",size:18})),this.itemType),e("div",{class:r},this.itemTitle),this.itemDescription&&e("div",{class:_,innerHTML:this.truncateDescription?h(this.itemDescription,this.truncateLimit):this.itemDescription})),e("div",{class:i},e("span",{class:"icon"},e("hy-icon",{icon:"hy-icon-done",size:14})),e("span",{class:"label"},this.outGoingUrlLabel))))}case n.degreeProgramme:{const n=[`hy-list-item__${this.variant}__image-container`].join(" ");const a=[`hy-list-item__${this.variant}__image-container__image`].join(" ");const l=[`hy-list-item__${this.variant}__info-container__additional-info`,`hy-list-item__${this.variant}__info-container__additional-info__${this.headerstyle}`].join(" ");const s=this._additionalInfo&&this._additionalInfo.length>0?"":"link-only";const d=[`hy-list-item__${this.variant}__info-container__metadata-wrapper`,s].join(" ");const h=[`hy-list-item__${this.variant}__info-container__content-wrapper`].join(" ");const c=[`hy-list-item__${this.variant}__info-container__outgoing-link`,`hy-list-item__${this.variant}__info-container__outgoing-link__${this.headerstyle}`].join(" ");const p=[`hy-list-item__${this.variant}__info-container__outgoing-link__link`].join(" ");const f=[`hy-list-item-wrapper__${this.variant}__related-info`,`hy-list-item-wrapper__${this.variant}__related-info__${this.headerstyle}`].join(" ");const g=[`hy-list-item-wrapper__${this.variant}__related-info__heading`].join(" ");const x=[`hy-list-item-wrapper__${this.variant}__related-info__heading__link`].join(" ");const b=[`hy-list-item-wrapper__${this.variant}__related-info__heading__button`].join(" ");const y=[`hy-list-item-wrapper__${this.variant}__related-info__heading__icon`].join(" ");const w=[`hy-list-item-wrapper__${this.variant}__related-info__content`].join(" ");const k=[`hy-list-item-wrapper__${this.variant}__related-info__link`].join(" ");const u=this.relatedLinksBlockTitle&&this.relatedLinksBlockTitle.length>0?`${this.itemTitle}-${this.relatedLinksBlockTitle}`.toLowerCase().replace(/\W/g,"-"):"";const v="#"+u+"--title";const $=this.relatedLinksBlockTitle&&this.relatedLinksBlockTitle.length>0?this._relatedLinks.length:"";return[e("article",{class:i},e("a",{class:t,href:this.url,target:m,"aria-label":this.scLabel},e("div",{class:n},e("div",{class:a},this._sourceSet?e("picture",null,this._sourceSet.map((i=>e("source",{srcSet:i.src,media:i.media,type:i.type,sizes:i.sizes?i.sizes:""}))),e("img",{loading:this.disableLazy?"eager":"lazy","aria-hidden":"true",src:this.itemImageUrl,alt:this.itemImageAlt,style:{"--minheight":`${this._imageMinHeight}px`,"--minwidth":`${this._imageMinWidth}px`}})):e("img",{loading:this.disableLazy?"eager":"lazy","aria-hidden":"true",src:this.itemImageUrl,alt:this.itemImageAlt,style:{"--minheight":`${this._imageMinHeight}px`,"--minwidth":`${this._imageMinWidth}px`}})),this.imageLabel&&e("span",null,this.imageLabel)),e("div",{class:o},e("div",{class:h},e("div",{class:r},this.itemTitle),this.itemDescription&&e("div",{class:_,innerHTML:this.itemDescription})),e("div",{class:d},this._additionalInfo&&e("div",{class:l},this._additionalInfo.map((i=>{let t=[`hy-list-item__${this.variant}__info-container__additional-info__item`,`hy-list-item__${this.variant}__info-container__additional-info__item__${this.headerstyle}`,`${i.isActive.toString()=="true"?"active":""}`].join(" ");return e("div",{class:t},i.text)}))),e("div",{class:c},e("a",{href:this.url,target:m,"aria-label":this.scLabel,class:p,tabindex:"-1"},e("span",{class:"label"},this.outGoingUrlLabel),e("span",{class:"icon-wrapper"},e("div",{class:"icon"},e("hy-icon",{icon:"hy-icon-arrow-to-right",size:32})))))))),this.relatedLinksBlockTitle&&e("div",{class:f},e("div",{class:g},e("a",{href:v,class:x,tabindex:"-1"},e("button",{"aria-expanded":"false","aria-controls":`${u}--content`,class:b,id:`${u}--title`},e("span",{class:y},e("hy-icon",{icon:"hy-icon-caret-down",size:14})),this.relatedLinksBlockTitle," (",$,")"))),e("div",{class:w,"aria-labelledBy":`${u}--title`,id:`${u}--content`,role:"region","aria-hidden":"true"},this._relatedLinks.map((i=>{let t=i.isExternal?"_blank":"_self";return e("a",{class:k,href:i.url,target:m,"aria-label":t},i.label)})))))]}default:{return e("article",null,e("a",{class:t,href:this.url,target:m,"aria-label":this.scLabel},e("div",{class:o},e("div",{class:a},this.itemType),e("div",{class:r},this.itemTitle),e("div",{class:l},e("span",{class:s},e("hy-icon",{icon:"hy-icon-link",size:15})),e("div",{class:d},this.url)),this.itemDescription&&e("div",{class:_,innerHTML:this.itemDescription}))))}}}get el(){return t(this)}static get watchers(){return{relatedLinks:["relatedLinksWatcher"],additionalInfo:["additionalInfoWatcher"],sourceSet:["srcSetWatcher"]}}};r.style=o;export{r as hy_list_item};
+import{r as i,h as e,g as t}from"./index-f84f2a7d.js";import{L as n}from"./utils-2819fd7e.js";const o=':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-list-item{display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);text-decoration:none}.hy-list-item__default{margin-bottom:28px}@media (min-width: 60rem){.hy-list-item__default{margin-bottom:32px}}.hy-list-item__default__info-container__header{font-size:0.75rem;line-height:14px;color:var(--grayscale-dark);letter-spacing:0;margin-bottom:4px}@media (min-width: 30rem){.hy-list-item__default__info-container__header{font-size:0.875rem;line-height:18px;margin-bottom:2px}}.hy-list-item__default__info-container__title{font-size:1.125rem;line-height:22px;font-weight:700;color:var(--brand-main-light);letter-spacing:-0.56px;margin-bottom:6px}@media (min-width: 30rem){.hy-list-item__default__info-container__title{font-size:1.375rem;line-height:28px;letter-spacing:-0.69px;margin-bottom:10px}}@media (min-width: 1601px){.hy-list-item__default__info-container__title{font-size:1.625rem;line-height:32px;letter-spacing:-0.8px;margin-bottom:8px}}@media (min-width: 75.0625rem){.hy-list-item__default__info-container__title__large{font-size:1.625rem;line-height:32px;letter-spacing:-0.8px;margin-bottom:8px}}.hy-list-item__default__info-container__link-container{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:6px}@media (min-width: 30rem){.hy-list-item__default__info-container__link-container{margin-bottom:8px}}.hy-list-item__default__info-container__link{font-size:0.75rem;line-height:16px;color:var(--grayscale-dark);letter-spacing:-0.07px;margin-left:4px}@media (min-width: 30rem){.hy-list-item__default__info-container__link{margin-left:5px}}.hy-list-item__default__info-container__link__icon svg{fill:var(--grayscale-dark)}.hy-list-item__default__info-container__description{font-size:0.875rem;line-height:20px;color:var(--grayscale-black);letter-spacing:0}@media (min-width: 30rem){.hy-list-item__default__info-container__description{font-size:1rem;line-height:24px}}.hy-list-item__position{background:radial-gradient(circle, var(--grayscale-light) 0%, var(--grayscale-background-box) 100%);-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@media (min-width: 30rem){.hy-list-item__position{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.hy-list-item__position__info-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin:0;padding:12px;position:relative}@media (min-width: 60rem){.hy-list-item__position__info-container{padding:12px 16px}}@media (min-width: 1601px){.hy-list-item__position__info-container{padding:20px 24px}}.hy-list-item__position__info-container__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;color:var(--brand-main);font-family:var(--main-font-family);font-size:14px;font-weight:600;letter-spacing:-0.2px;line-height:14px;margin-bottom:14px}.hy-list-item__position__info-container__header .icon{margin-right:0.75rem}.hy-list-item__position__info-container__header .icon svg{fill:var(--brand-main)}@media (min-width: 75.0625rem){.hy-list-item__position__info-container__large{padding:20px 24px}}.hy-list-item__position__info-container__data{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.hy-list-item__position__info-container__title{font-size:1.125rem;line-height:20px;font-weight:700;font-family:var(--main-font-family);color:var(--grayscale-black);margin-bottom:12px;letter-spacing:-0.45px;line-height:22px}@media (min-width: 30rem){.hy-list-item__position__info-container__title{letter-spacing:-0.5px}}.hy-list-item__position__info-container__description{font-size:0.875rem;color:var(--grayscale-dark-text);display:none;font-family:var(--main-font-family);letter-spacing:0.8px;margin-bottom:14px;line-height:20px}@media (min-width: 30rem){.hy-list-item__position__info-container__description{display:block}}.hy-list-item__position__info-container__outgoing-link{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;position:relative;padding:0 24px 24px 12px}@media (min-width: 30rem){.hy-list-item__position__info-container__outgoing-link{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:0 24px 24px 0}}.hy-list-item__position__info-container__outgoing-link .label{color:var(--link-blue);font-family:var(--main-font-family);font-size:16px;font-weight:600;letter-spacing:-0.3px;line-height:20px}.hy-list-item__position__info-container__outgoing-link .icon{margin-right:4px;margin-bottom:2px}.hy-list-item__position__info-container__outgoing-link .icon svg{fill:var(--link-blue)}.hy-list-item__degree{background:radial-gradient(circle, var(--grayscale-light) 0%, var(--grayscale-background-box) 100%);-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@media (min-width: 30rem){.hy-list-item__degree{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.hy-list-item__degree__image-container{display:block;position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1}@media (min-width: 30rem){.hy-list-item__degree__image-container{-webkit-box-flex:0;-ms-flex:0 0 24%;flex:0 0 24%}}.hy-list-item__degree__image-container__image{vertical-align:bottom;max-width:100%;height:100%}.hy-list-item__degree__image-container__image img{-o-object-fit:cover;object-fit:cover;width:100%;height:100%}.hy-list-item__degree__image-container span{font-weight:600;font-size:0.75rem;line-height:14px;background-color:var(--additional-yellow);-webkit-box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.05);box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.05);color:var(--grayscale-black);left:-4px;letter-spacing:-0.07px;padding:5px 8px;position:absolute;top:16px;text-transform:uppercase}@media (min-width: 30rem){.hy-list-item__degree__image-container span{left:-8px}}@media (min-width: 60rem){.hy-list-item__degree__image-container span{top:22px}}.hy-list-item__degree__info-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin:0;padding:12px;position:relative}@media (min-width: 60rem){.hy-list-item__degree__info-container{padding:12px 16px}}@media (min-width: 1601px){.hy-list-item__degree__info-container{padding:20px 24px}}@media (min-width: 75.0625rem){.hy-list-item__degree__info-container__large{padding:20px 24px}}.hy-list-item__degree__info-container__data{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.hy-list-item__degree__info-container__title{font-size:1.125rem;line-height:22px;font-weight:700;color:var(--link-blue);letter-spacing:-0.54px;margin-bottom:8px}@media (min-width: 60rem){.hy-list-item__degree__info-container__title{font-size:1.125rem;line-height:24px;letter-spacing:-0.5px}}@media (min-width: 1601px){.hy-list-item__degree__info-container__title{font-size:1.25rem;line-height:26px;letter-spacing:-0.6px}}@media (min-width: 75.0625rem){.hy-list-item__degree__info-container__title__large{font-size:1.25rem;line-height:26px;letter-spacing:-0.6px}}.hy-list-item__degree__info-container__description{font-size:0.875rem;line-height:18px;color:var(--grayscale-dark);letter-spacing:0;margin-bottom:16px}@media (min-width: 60rem){.hy-list-item__degree__info-container__description{letter-spacing:-0.2}}@media (min-width: 1601px){.hy-list-item__degree__info-container__description{font-size:1rem;line-height:20px;letter-spacing:-0.25px}}@media (min-width: 75.0625rem){.hy-list-item__degree__info-container__description__large{font-size:1rem;line-height:20px;letter-spacing:-0.25px}}.hy-list-item__degree__info-container__metadata-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-top:16px;width:100%}@media (min-width: 30rem){.hy-list-item__degree__info-container__metadata-wrapper{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}}.hy-list-item__degree__info-container__metadata-wrapper.link-only{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.hy-list-item__degree__info-container__additional-info{width:100%}.hy-list-item__degree__info-container__additional-info__item{font-size:0.75rem;line-height:16px;font-weight:300;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--grayscale-black);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;letter-spacing:-0.2px}@media (min-width: 1601px){.hy-list-item__degree__info-container__additional-info__item{font-size:0.875rem;line-height:16px}}@media (min-width: 75.0625rem){.hy-list-item__degree__info-container__additional-info__item__large{font-size:0.875rem;line-height:16px}}.hy-list-item__degree__info-container__additional-info__item.active::before{content:" ";-webkit-box-sizing:border-box;box-sizing:border-box;height:14px;width:14px;border:3px solid #ffffff;border-radius:50%;background-color:#f9a21a;left:-7px;position:absolute}@media (min-width: 30rem){.hy-list-item__degree__info-container__additional-info__item.active::before{border:none;height:8px;margin-right:6px;width:8px;left:0;position:relative}}.hy-list-item__degree__info-container__outgoing-link{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;position:relative;width:100%}.hy-list-item__degree__info-container__outgoing-link a{-webkit-box-align:center;-ms-flex-align:center;align-items:center;bottom:0;top:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;position:relative;right:-18px;text-decoration:none}@media (min-width: 60rem){.hy-list-item__degree__info-container__outgoing-link a{right:-22px}}@media (min-width: 1601px){.hy-list-item__degree__info-container__outgoing-link a{right:-30px}}.hy-list-item__degree__info-container__outgoing-link a .label{font-size:0.875rem;line-height:16px;font-weight:700;color:var(--link-blue);letter-spacing:-0.5px;margin-right:8px;text-align:right}.hy-list-item__degree__info-container__outgoing-link a .icon-wrapper{background-color:var(--brand-main-light);z-index:10}.hy-list-item__degree__info-container__outgoing-link a .icon-wrapper .icon{position:relative;overflow:hidden}.hy-list-item__degree__info-container__outgoing-link a .icon-wrapper .icon svg{background-color:transparent;-webkit-box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.1);box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.1);fill:var(--grayscale-white);padding:6.4px}@media (min-width: 1601px){.hy-list-item__degree__info-container__outgoing-link a .icon-wrapper .icon svg{height:36px;width:36px;padding:7.2px}}@media (min-width: 75.0625rem){.hy-list-item__degree__info-container__outgoing-link__large svg{height:36px;width:36px;padding:7.2px}}.hy-list-item-wrapper{font-family:var(--main-font-family)}.hy-list-item-wrapper__degree{margin-bottom:16px}@media (min-width: 30rem){.hy-list-item-wrapper__degree{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin-bottom:24px}}@media (min-width: 60rem){.hy-list-item-wrapper__degree{margin-bottom:28px}}@media (min-width: 1601px){.hy-list-item-wrapper__degree{margin-bottom:32px}}@media (min-width: 75.0625rem){.hy-list-item-wrapper__degree__large{margin-bottom:32px}}.hy-list-item-wrapper__degree__related-info{background:radial-gradient(circle, #f8f8f8 0%, #f5f5f5 100%);margin-top:4px;padding:0 12px 0 16px}@media (min-width: 30rem){.hy-list-item-wrapper__degree__related-info{padding:0 24px 0 16px}}@media (min-width: 60rem){.hy-list-item-wrapper__degree__related-info{margin-top:6px;padding:0 24px 0 24px}}@media (min-width: 1601px){.hy-list-item-wrapper__degree__related-info{margin-top:8px}}@media (min-width: 75.0625rem){.hy-list-item-wrapper__degree__related-info__large{margin-top:8px}}.hy-list-item-wrapper__degree__related-info__heading__link{text-decoration:none}.hy-list-item-wrapper__degree__related-info__heading__button{font-size:0.75rem;line-height:16px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:radial-gradient(circle, #f8f8f8 0%, #f5f5f5 100%);border:none;color:var(--grayscale-black);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;font-family:var(--main-font-family);letter-spacing:-0.2px;height:100%;padding:8px 0;text-align:left;width:100%}@media (min-width: 30rem){.hy-list-item-wrapper__degree__related-info__heading__button{font-size:0.75rem;line-height:20px;padding:14px 0}}@media (min-width: 60rem){.hy-list-item-wrapper__degree__related-info__heading__button{font-size:0.875rem;line-height:20px;letter-spacing:-0.4px;padding:18px 0}}.hy-list-item-wrapper__degree__related-info__heading__button:hover{cursor:pointer}.hy-list-item-wrapper__degree__related-info__heading__button__is-open svg{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.hy-list-item-wrapper__degree__related-info__heading__icon{margin-right:0.5rem;z-index:0}@media (min-width: 60rem){.hy-list-item-wrapper__degree__related-info__heading__icon{margin-right:12px}}.hy-list-item-wrapper__degree__related-info__heading__icon svg{fill:var(--brand-main);height:14px;width:14px}@media (min-width: 60rem){.hy-list-item-wrapper__degree__related-info__heading__icon svg{height:18px;width:18px}}.hy-list-item-wrapper__degree__related-info__content{display:none}.hy-list-item-wrapper__degree__related-info__content__is-open{border-top:1px solid #d2d2d2;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:20px 8px 5px 8px}@media (min-width: 60rem){.hy-list-item-wrapper__degree__related-info__content__is-open{padding:20px 0 14px 0}}.hy-list-item-wrapper__degree__related-info__link{font-size:0.875rem;line-height:16px;font-weight:700;color:var(--link-blue);letter-spacing:-0.4px;margin-bottom:16px;text-decoration:none}';let a={enter:"Enter",space:"Space"};const r=class{constructor(e){i(this,e);this.isExpandedRelatedContent=false;this.variant=n.default;this.itemType=undefined;this.itemTitle=undefined;this.itemDescription=undefined;this.url=undefined;this.isExternal=false;this.scLabel=undefined;this.itemImageUrl=undefined;this.itemImageAlt=undefined;this.disableLazy=false;this.relatedLinksBlockTitle=undefined;this.relatedLinks=undefined;this.imageLabel=undefined;this.outGoingUrlLabel="Go to programme page";this.additionalInfo=undefined;this.headerstyle="common";this.sourceSet=undefined;this.truncateDescription=false;this.truncateLimit=140;this._imageMinHeight=0;this._imageMinWidth=0}relatedLinksWatcher(i){if(typeof i==="string"){this._relatedLinks=JSON.parse(i)}else{this._relatedLinks=i}}additionalInfoWatcher(i){if(typeof i==="string"){this._additionalInfo=JSON.parse(i)}else{this._additionalInfo=i}}srcSetWatcher(i){this._sourceSet=typeof i==="string"?JSON.parse(i):i}expandRelatedInfoPanel(i){let e=`hy-list-item-wrapper__${this.variant}__related-info__content`;let t="hy-list-item-wrapper__degree__related-info__heading__button";let n=document.querySelectorAll(`[aria-labelledBy="${i.id}"]`)[0];if(n){if(!this.isExpandedRelatedContent){n.classList.add(`${e}__is-open`);i.classList.add(`${t}__is-open`)}else{n.classList.remove(`${e}__is-open`);i.classList.remove(`${t}__is-open`)}this.isExpandedRelatedContent=!this.isExpandedRelatedContent}}handleKeyDown(i){const e=i.code;let t=i.target;const n=t.tagName.toLowerCase();const o=[n].some((i=>["svg","path","button","a"].indexOf(i)>=0));if(t&&o&&!t.classList.contains("hy-list-item-wrapper__degree__related-info__link")&&[a.enter,a.space].includes(e)){if(n!=="button"){t=t.closest(`.hy-list-item-wrapper__${this.variant}__related-info__heading__button`)}this.expandRelatedInfoPanel(t);i.preventDefault()}}handleClick(i){let e=i.target;const t=e.tagName.toLowerCase();const n=[t].some((i=>["svg","path","button","a"].indexOf(i)>=0));if(e&&n&&!e.classList.contains("hy-list-item-wrapper__degree__related-info__link")){if(t!=="button"){e=e.closest(`.hy-list-item-wrapper__${this.variant}__related-info__heading__button`)}this.expandRelatedInfoPanel(e);i.preventDefault();i.stopImmediatePropagation()}}componentWillLoad(){this.relatedLinksWatcher(this.relatedLinks);this.additionalInfoWatcher(this.additionalInfo);this.srcSetWatcher(this.sourceSet)}componentDidLoad(){let i=this.el.closest(".hy-main");if(i){if(!i.classList.contains("with-sidebar")){this.headerstyle="large"}}if(this.variant==n.degreeProgramme){const i=document.querySelector(".hy-list-item__degree__image-container__image img");if(i){i.addEventListener("load",(function(){const e=1;const t=i.naturalHeight;const n=i.naturalWidth;const o=n/t;this._imageMinWidth=n;this._imageMinHeight=t;if(o>e){this._imageMinWidth=t*e}else if(o<e){this._imageMinHeight=n/e}}))}}}render(){const i=["hy-list-item-wrapper",`hy-list-item-wrapper__${this.variant}`,`hy-list-item-wrapper__${this.variant}__${this.headerstyle}`].join(" ");const t=["hy-list-item",`hy-list-item__${this.variant}`].join(" ");const o=[`hy-list-item__${this.variant}__info-container`,`hy-list-item__${this.variant}__info-container__${this.headerstyle}`].join(" ");const a=[`hy-list-item__${this.variant}__info-container__header`,`hy-list-item__${this.variant}__info-container__header__${this.headerstyle}`].join(" ");const r=[`hy-list-item__${this.variant}__info-container__title`,`hy-list-item__${this.variant}__info-container__title__${this.headerstyle}`].join(" ");const _=[`hy-list-item__${this.variant}__info-container__description`,`hy-list-item__${this.variant}__info-container__description__${this.headerstyle}`].join(" ");const l=[`hy-list-item__${this.variant}__info-container__link-container`].join(" ");const s=[`hy-list-item__${this.variant}__info-container__link__icon`].join(" ");const d=[`hy-list-item__${this.variant}__info-container__link`].join(" ");const m=this.isExternal?"_blank":"_self";function h(i,e){return i.length>e?i.substr(0,e-1)+"...":i}switch(this.variant){case n.position:{const i=[`hy-list-item__${this.variant}__info-container__outgoing-link`,`hy-list-item__${this.variant}__info-container__outgoing-link__${this.headerstyle}`].join(" ");return e("div",{class:"hy-list-item__wrapper"},e("a",{class:t,href:this.url,target:m,"aria-label":this.scLabel},e("div",{class:o},e("div",{class:a},e("div",{class:"icon"},e("hy-icon",{icon:"hy-icon-units-and-faculties",size:18})),this.itemType),e("div",{class:r},this.itemTitle),this.itemDescription&&e("div",{class:_,innerHTML:this.truncateDescription?h(this.itemDescription,this.truncateLimit):this.itemDescription})),e("div",{class:i},e("span",{class:"icon"},e("hy-icon",{icon:"hy-icon-done",size:14})),e("span",{class:"label"},this.outGoingUrlLabel))))}case n.degreeProgramme:{const n=[`hy-list-item__${this.variant}__image-container`].join(" ");const a=[`hy-list-item__${this.variant}__image-container__image`].join(" ");const l=[`hy-list-item__${this.variant}__info-container__additional-info`,`hy-list-item__${this.variant}__info-container__additional-info__${this.headerstyle}`].join(" ");const s=this._additionalInfo&&this._additionalInfo.length>0?"":"link-only";const d=[`hy-list-item__${this.variant}__info-container__metadata-wrapper`,s].join(" ");const h=[`hy-list-item__${this.variant}__info-container__content-wrapper`].join(" ");const c=[`hy-list-item__${this.variant}__info-container__outgoing-link`,`hy-list-item__${this.variant}__info-container__outgoing-link__${this.headerstyle}`].join(" ");const p=[`hy-list-item__${this.variant}__info-container__outgoing-link__link`].join(" ");const f=[`hy-list-item-wrapper__${this.variant}__related-info`,`hy-list-item-wrapper__${this.variant}__related-info__${this.headerstyle}`].join(" ");const g=[`hy-list-item-wrapper__${this.variant}__related-info__heading`].join(" ");const x=[`hy-list-item-wrapper__${this.variant}__related-info__heading__link`].join(" ");const b=[`hy-list-item-wrapper__${this.variant}__related-info__heading__button`].join(" ");const y=[`hy-list-item-wrapper__${this.variant}__related-info__heading__icon`].join(" ");const w=[`hy-list-item-wrapper__${this.variant}__related-info__content`].join(" ");const k=[`hy-list-item-wrapper__${this.variant}__related-info__link`].join(" ");const u=this.relatedLinksBlockTitle&&this.relatedLinksBlockTitle.length>0?`${this.itemTitle}-${this.relatedLinksBlockTitle}`.toLowerCase().replace(/\W/g,"-"):"";const v="#"+u+"--title";const $=this.relatedLinksBlockTitle&&this.relatedLinksBlockTitle.length>0?this._relatedLinks.length:"";return[e("article",{class:i},e("a",{class:t,href:this.url,target:m,"aria-label":this.scLabel},e("div",{class:n},e("div",{class:a},this._sourceSet?e("picture",null,this._sourceSet.map((i=>e("source",{srcSet:i.src,media:i.media,type:i.type,sizes:i.sizes?i.sizes:""}))),e("img",{loading:this.disableLazy?"eager":"lazy","aria-hidden":"true",src:this.itemImageUrl,alt:this.itemImageAlt,style:{"--minheight":`${this._imageMinHeight}px`,"--minwidth":`${this._imageMinWidth}px`}})):e("img",{loading:this.disableLazy?"eager":"lazy","aria-hidden":"true",src:this.itemImageUrl,alt:this.itemImageAlt,style:{"--minheight":`${this._imageMinHeight}px`,"--minwidth":`${this._imageMinWidth}px`}})),this.imageLabel&&e("span",null,this.imageLabel)),e("div",{class:o},e("div",{class:h},e("div",{class:r},this.itemTitle),this.itemDescription&&e("div",{class:_,innerHTML:this.itemDescription})),e("div",{class:d},this._additionalInfo&&e("div",{class:l},this._additionalInfo.map((i=>{let t=[`hy-list-item__${this.variant}__info-container__additional-info__item`,`hy-list-item__${this.variant}__info-container__additional-info__item__${this.headerstyle}`,`${i.isActive.toString()=="true"?"active":""}`].join(" ");return e("div",{class:t},i.text)}))),e("div",{class:c},e("a",{href:this.url,target:m,"aria-label":this.scLabel,class:p,tabindex:"-1"},e("span",{class:"label"},this.outGoingUrlLabel),e("span",{class:"icon-wrapper"},e("div",{class:"icon"},e("hy-icon",{icon:"hy-icon-arrow-to-right",size:32})))))))),this.relatedLinksBlockTitle&&e("div",{class:f},e("div",{class:g},e("a",{href:v,class:x,tabindex:"-1"},e("button",{"aria-expanded":"false","aria-controls":`${u}--content`,class:b,id:`${u}--title`},e("span",{class:y},e("hy-icon",{icon:"hy-icon-caret-down",size:14})),this.relatedLinksBlockTitle," (",$,")"))),e("div",{class:w,"aria-labelledBy":`${u}--title`,id:`${u}--content`,role:"region","aria-hidden":"true"},this._relatedLinks.map((i=>{let t=i.isExternal?"_blank":"_self";return e("a",{class:k,href:i.url,target:m,"aria-label":t},i.label)})))))]}default:{return e("article",null,e("a",{class:t,href:this.url,target:m,"aria-label":this.scLabel},e("div",{class:o},e("div",{class:a},this.itemType),e("div",{class:r},this.itemTitle),e("div",{class:l},e("span",{class:s},e("hy-icon",{icon:"hy-icon-link",size:15})),e("div",{class:d},this.url)),this.itemDescription&&e("div",{class:_,innerHTML:this.itemDescription}))))}}}get el(){return t(this)}static get watchers(){return{relatedLinks:["relatedLinksWatcher"],additionalInfo:["additionalInfoWatcher"],sourceSet:["srcSetWatcher"]}}};r.style=o;export{r as hy_list_item};
 //# sourceMappingURL=hy-list-item.entry.js.map

package/dist/huds-lib/hy-list-item.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["hyListItemCss","keys","enter","space","HyListItem","ListItemVariants","default","relatedLinksWatcher","newValue","this","_relatedLinks","JSON","parse","additionalInfoWatcher","_additionalInfo","srcSetWatcher","data","_sourceSet","expandRelatedInfoPanel","target","contentSelector","variant","targetButtonClass","contentSection","document","querySelectorAll","id","isExpandedRelatedContent","classList","add","remove","handleKeyDown","event","key","code","targetElement","tagName","toLowerCase","possibleTags","some","r","indexOf","contains","includes","closest","preventDefault","handleClick","stopImmediatePropagation","componentWillLoad","relatedLinks","additionalInfo","sourceSet","componentDidLoad","hyMainDiv","el","headerstyle","degreeProgramme","image","querySelector","addEventListener","outputImageAspectRatio","imageHeight","naturalHeight","imageWidth","naturalWidth","inputImageAspectRatio","_imageMinWidth","_imageMinHeight","render","classWrapperAttributes","join","classAttributes","classInfoContainerAttributes","classInfoContainerHeader","classInfoContainerTitle","classInfoContainerDescription","classInfoContainerLinkContainer","classInfoContainerLinkIcon","classInfoContainerLink","isExternal","truncate","str","n","length","substr","position","classInfoContainerOutgoingLink","h","class","href","url","scLabel","icon","size","itemType","itemTitle","itemDescription","innerHTML","truncateDescription","truncateLimit","outGoingUrlLabel","classImageContainerAttributes","classImageContainerImage","classInfoContainerAdditionalInfoAttributes","withAdditionalInfo","classMetadataWrapper","classContentWrapper","classInfoContainerOutgoingLinkUrl","classRelatedInfoContainer","classRelatedInfoHeading","classRelatedInfoHeadingLink","classRelatedInfoHeadingButton","classRelatedInfoHeadingIcon","classRelatedInfoContent","classRelatedInfoLink","titleAsId","relatedLinksBlockTitle","replace","accordionItemHref","relatedLinksCount","map","item","srcSet","src","media","type","sizes","loading","disableLazy","itemImageUrl","alt","itemImageAlt","style","imageLabel","x","classInfoContainerAdditionalInfoItem","isActive","toString","text","tabindex","role","relatedLinkTarget","label"],"sources":["./src/components/hy-list-item/hy-list-item.scss?tag=hy-list-item","./src/components/hy-list-item/hy-list-item.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-list-item {\n display: flex;\n font-family: var(--main-font-family);\n text-decoration: none;\n\n &__default {\n margin-bottom: 28px;\n @include breakpoint($wide) {\n margin-bottom: 32px;\n }\n\n &__info-container {\n &__header {\n @include font-size(12px, 14px);\n color: var(--grayscale-dark);\n letter-spacing: 0;\n margin-bottom: 4px;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 18px);\n margin-bottom: 2px;\n }\n }\n\n &__title {\n @include font-size(18px, 22px);\n @include font-weight($bold);\n color: var(--brand-main-light);\n letter-spacing: -0.56px;\n margin-bottom: 6px;\n\n @include breakpoint($narrow) {\n @include font-size(22px, 28px);\n letter-spacing: -0.69px;\n margin-bottom: 10px;\n }\n @include breakpoint($xlarge) {\n @include font-size(26px, 32px);\n letter-spacing: -0.8px;\n margin-bottom: 8px;\n }\n\n &__large {\n // >1200 no sidebar;\n @include breakpoint($extrawide) {\n @include font-size(26px, 32px);\n letter-spacing: -0.8px;\n margin-bottom: 8px;\n }\n }\n }\n\n &__link-container {\n align-items: center;\n display: flex;\n margin-bottom: 6px;\n\n @include breakpoint($narrow) {\n margin-bottom: 8px;\n }\n }\n\n &__link {\n @include font-size(12px, 16px);\n color: var(--grayscale-dark);\n letter-spacing: -0.07px;\n margin-left: 4px;\n\n @include breakpoint($narrow) {\n margin-left: 5px;\n }\n\n &__icon {\n svg {\n fill: var(--grayscale-dark);\n }\n }\n }\n\n &__description {\n @include font-size(14px, 20px);\n color: var(--grayscale-black);\n letter-spacing: 0;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px);\n }\n }\n }\n }\n\n // Opem position\n &__position {\n background: radial-gradient(circle, var(--grayscale-light) 0%, var(--grayscale-background-box) 100%);\n flex-direction: column;\n @include breakpoint($narrow) {\n flex-direction: row;\n }\n\n &__info-container {\n display: flex;\n flex: 1;\n flex-direction: column;\n justify-content: space-between;\n margin: 0;\n padding: 12px;\n position: relative;\n\n // 960-1600 with Sidebar;\n @include breakpoint($wide) {\n padding: 12px 16px;\n }\n // >1600 with sidebar same as >1200 without sidebar\n @include breakpoint($xlarge) {\n padding: 20px 24px;\n }\n\n &__header {\n display: flex;\n align-items: center;\n flex-direction: row;\n color: var(--brand-main);\n font-family: var(--main-font-family);\n font-size: 14px;\n font-weight: 600;\n letter-spacing: -0.2px;\n line-height: 14px;\n margin-bottom: 14px;\n\n .icon {\n margin-right: 0.75rem;\n\n svg {\n fill: var(--brand-main);\n }\n }\n }\n\n // >1200 no sidebar;\n &__large {\n @include breakpoint($extrawide) {\n padding: 20px 24px;\n }\n }\n\n &__data {\n display: flex;\n flex-direction: column;\n }\n\n &__title {\n @include font-size(18px, 20px);\n @include font-weight($bold);\n font-family: var(--main-font-family);\n color: var(--grayscale-black);\n margin-bottom: 12px;\n letter-spacing: -0.45px;\n line-height: 22px;\n\n @include breakpoint($narrow) {\n letter-spacing: -0.5px;\n }\n }\n\n &__description {\n @include font-size(14px);\n color: var(--grayscale-dark-text);\n display: none;\n font-family: var(--main-font-family);\n letter-spacing: 0.8px;\n margin-bottom: 14px;\n line-height: 20px;\n\n @include breakpoint($narrow) {\n display: block;\n }\n }\n\n &__outgoing-link {\n align-items: flex-end;\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n position: relative;\n padding: 0 24px 24px 12px;\n\n @include breakpoint($narrow) {\n justify-content: center;\n padding: 0 24px 24px 0;\n }\n\n .label {\n color: var(--link-blue);\n font-family: var(--main-font-family);\n font-size: 16px;\n font-weight: 600;\n letter-spacing: -0.3px;\n line-height: 20px;\n }\n\n .icon {\n margin-right: 4px;\n margin-bottom: 2px;\n\n svg {\n fill: var(--link-blue);\n }\n }\n }\n }\n }\n\n // Degree programmes.\n &__degree {\n background: radial-gradient(circle, var(--grayscale-light) 0%, var(--grayscale-background-box) 100%);\n flex-direction: column;\n @include breakpoint($narrow) {\n flex-direction: row;\n }\n\n &__image-container {\n display: block;\n position: relative;\n flex: 1;\n\n @include breakpoint($narrow) {\n flex: 0 0 24%;\n }\n\n &__image {\n vertical-align: bottom;\n max-width: 100%;\n height: 100%;\n\n img {\n object-fit: cover;\n width: 100%;\n height: 100%;\n }\n }\n\n span {\n @include font-weight($semibold);\n @include font-size(12px, 14px);\n background-color: var(--additional-yellow);\n box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);\n color: var(--grayscale-black);\n left: -4px;\n letter-spacing: -0.07px;\n padding: 5px 8px;\n position: absolute;\n top: 16px;\n text-transform: uppercase;\n\n @include breakpoint($narrow) {\n left: -8px;\n }\n @include breakpoint($wide) {\n top: 22px;\n }\n }\n }\n\n &__info-container {\n display: flex;\n flex: 1;\n flex-direction: column;\n justify-content: space-between;\n margin: 0;\n padding: 12px;\n position: relative;\n\n // 960-1600 with Sidebar;\n @include breakpoint($wide) {\n padding: 12px 16px;\n }\n // >1600 with sidebar same as >1200 without sidebar\n @include breakpoint($xlarge) {\n padding: 20px 24px;\n }\n\n // >1200 no sidebar;\n &__large {\n @include breakpoint($extrawide) {\n padding: 20px 24px;\n }\n }\n\n &__data {\n display: flex;\n flex-direction: column;\n }\n\n &__title {\n @include font-size(18px, 22px);\n @include font-weight($bold);\n color: var(--link-blue);\n letter-spacing: -0.54px;\n margin-bottom: 8px;\n\n // 960-1600 with Sidebar;\n @include breakpoint($wide) {\n @include font-size(18px, 24px);\n letter-spacing: -0.5px;\n }\n\n // >1600 with sidebar same as >1200 without sidebar\n @include breakpoint($xlarge) {\n @include font-size(20px, 26px);\n letter-spacing: -0.6px;\n }\n\n &__large {\n // >1200 no sidebar;\n @include breakpoint($extrawide) {\n @include font-size(20px, 26px);\n letter-spacing: -0.6px;\n }\n }\n }\n\n &__description {\n @include font-size(14px, 18px);\n color: var(--grayscale-dark);\n letter-spacing: 0;\n margin-bottom: 16px;\n\n // 960-1600 with Sidebar;\n @include breakpoint($wide) {\n letter-spacing: -0.2;\n }\n // >1600 with sidebar same as >1200 without sidebar\n @include breakpoint($xlarge) {\n @include font-size(16px, 20px);\n letter-spacing: -0.25px;\n }\n\n &__large {\n // >1200 no sidebar;\n @include breakpoint($extrawide) {\n @include font-size(16px, 20px);\n letter-spacing: -0.25px;\n }\n }\n }\n\n &__metadata-wrapper {\n display: flex;\n flex-direction: column;\n margin-top: 16px;\n width: 100%;\n\n @include breakpoint($narrow) {\n align-items: center;\n flex-direction: row;\n justify-content: space-between;\n }\n\n &.link-only {\n justify-content: flex-end;\n }\n }\n\n &__additional-info {\n width: 100%;\n\n &__item {\n @include font-size(12px, 16px);\n @include font-weight($light);\n align-items: center;\n color: var(--grayscale-black);\n display: flex;\n flex-direction: row;\n letter-spacing: -0.2px;\n\n @include breakpoint($xlarge) {\n @include font-size(14px, 16px);\n }\n // >1200 no sidebar;\n &__large {\n @include breakpoint($extrawide) {\n @include font-size(14px, 16px);\n }\n }\n }\n &__item.active::before {\n content: \" \";\n box-sizing: border-box;\n height: 14px;\n width: 14px;\n border: 3px solid #ffffff;\n border-radius: 50%;\n background-color: #f9a21a;\n left: -7px;\n position: absolute;\n\n @include breakpoint($narrow) {\n border: none;\n height: 8px;\n margin-right: 6px;\n width: 8px;\n left: 0;\n position: relative;\n }\n }\n }\n\n &__outgoing-link {\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n position: relative;\n width: 100%;\n\n a {\n align-items: center;\n bottom: 0;\n top: 0;\n display: flex;\n flex-direction: row;\n position: relative;\n right: -18px;\n text-decoration: none;\n\n @include breakpoint($wide) {\n right: -22px;\n }\n @include breakpoint($xlarge) {\n right: -30px;\n }\n\n .label {\n @include font-size(14px, 16px);\n @include font-weight($bold);\n color: var(--link-blue);\n letter-spacing: -0.5px;\n margin-right: 8px;\n text-align: right;\n }\n\n .icon-wrapper {\n background-color: var(--brand-main-light);\n z-index: 10;\n\n .icon {\n position: relative;\n overflow: hidden;\n\n svg {\n background-color: transparent;\n box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);\n fill: var(--grayscale-white);\n padding: 6.4px;\n\n @include breakpoint($xlarge) {\n height: 36px;\n width: 36px;\n padding: 7.2px;\n }\n }\n }\n }\n }\n\n // >1200 no sidebar;\n &__large {\n svg {\n @include breakpoint($extrawide) {\n height: 36px;\n width: 36px;\n padding: 7.2px;\n }\n }\n }\n }\n }\n }\n}\n\n.hy-list-item-wrapper {\n font-family: var(--main-font-family);\n\n &__degree {\n margin-bottom: 16px;\n @include breakpoint($narrow) {\n flex-direction: row;\n margin-bottom: 24px;\n }\n @include breakpoint($wide) {\n margin-bottom: 28px;\n }\n @include breakpoint($xlarge) {\n margin-bottom: 32px;\n }\n // >1200 no sidebar;\n &__large {\n @include breakpoint($extrawide) {\n margin-bottom: 32px;\n }\n }\n\n &__related-info {\n background: radial-gradient(circle, #f8f8f8 0%, #f5f5f5 100%);\n margin-top: 4px;\n padding: 0 12px 0 16px;\n\n @include breakpoint($narrow) {\n padding: 0 24px 0 16px;\n }\n @include breakpoint($wide) {\n margin-top: 6px;\n padding: 0 24px 0 24px;\n }\n @include breakpoint($xlarge) {\n margin-top: 8px;\n }\n // >1200 no sidebar;\n &__large {\n @include breakpoint($extrawide) {\n margin-top: 8px;\n }\n }\n\n &__heading {\n &__link {\n text-decoration: none;\n }\n\n &__button {\n @include font-size(12px, 16px);\n align-items: center;\n background: radial-gradient(circle, #f8f8f8 0%, #f5f5f5 100%);\n border: none;\n color: var(--grayscale-black);\n display: flex;\n flex-direction: row;\n font-family: var(--main-font-family);\n letter-spacing: -0.2px;\n height: 100%;\n padding: 8px 0;\n text-align: left;\n width: 100%;\n\n @include breakpoint($narrow) {\n @include font-size(12px, 20px);\n padding: 14px 0;\n }\n @include breakpoint($wide) {\n @include font-size(14px, 20px);\n letter-spacing: -0.4px;\n padding: 18px 0;\n }\n\n &:hover {\n cursor: pointer;\n }\n\n &__is-open {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n\n &__icon {\n margin-right: 0.5rem;\n z-index: 0;\n\n @include breakpoint($wide) {\n margin-right: 12px;\n }\n\n svg {\n fill: var(--brand-main);\n height: 14px;\n width: 14px;\n\n @include breakpoint($wide) {\n height: 18px;\n width: 18px;\n }\n }\n }\n }\n\n &__content {\n display: none;\n\n &__is-open {\n border-top: 1px solid #d2d2d2;\n display: flex;\n flex-direction: column;\n padding: 20px 8px 5px 8px;\n\n @include breakpoint($wide) {\n padding: 20px 0 14px 0;\n }\n }\n }\n\n &__link {\n @include font-size(14px, 16px);\n @include font-weight($bold);\n color: var(--link-blue);\n letter-spacing: -0.4px;\n margin-bottom: 16px;\n text-decoration: none;\n }\n }\n }\n}\n","export interface RelatedLink {\n label: string;\n url: string;\n isExternal: boolean;\n scLabel: string;\n}\n\nexport interface AdditionalInfo {\n text: string;\n isActive: boolean;\n}\n\nexport interface ImageSrcSet {\n src: any;\n media: string;\n type: string;\n sizes: string \| null;\n}\n\nimport {Component, h, Prop, Watch, State, Listen, Element} from \"@stencil/core\";\nimport {ListItemVariants} from \"../../utils/utils\";\n\nlet keys = {\n enter: \"Enter\",\n space: \"Space\",\n};\n\n@Component({\n tag: \"hy-list-item\",\n styleUrl: \"hy-list-item.scss\",\n shadow: false,\n})\nexport class HyListItem {\n @Element() el: HTMLElement;\n @State() isExpandedRelatedContent: boolean = false;\n @Prop() variant: ListItemVariants = ListItemVariants.default;\n @Prop() itemType?: string;\n @Prop() itemTitle?: string;\n @Prop() itemDescription?: any;\n @Prop() url?: string;\n @Prop() isExternal: boolean = false;\n @Prop() scLabel?: string;\n @Prop() itemImageUrl?: string;\n @Prop() itemImageAlt?: string;\n @Prop() disableLazy: boolean = false;\n @Prop() relatedLinksBlockTitle?: string;\n private _relatedLinks: RelatedLink[];\n @Prop() relatedLinks?: RelatedLink[] \| string;\n @Prop() imageLabel?: string;\n @Prop() outGoingUrlLabel?: string = \"Go to programme page\";\n private _additionalInfo: AdditionalInfo[];\n @Prop() additionalInfo?: AdditionalInfo[] \| string;\n @Prop() headerstyle: string = \"common\";\n private _sourceSet: ImageSrcSet[];\n @Prop() sourceSet: ImageSrcSet[] \| string;\n @Prop() truncateDescription: boolean = false;\n @Prop() truncateLimit: number = 140;\n\n @State() _imageMinHeight: number = 0;\n @State() _imageMinWidth: number = 0;\n\n @Watch(\"relatedLinks\")\n relatedLinksWatcher(newValue: RelatedLink[] \| string) {\n if (typeof newValue === \"string\") {\n this._relatedLinks = JSON.parse(newValue);\n } else {\n this._relatedLinks = newValue;\n }\n }\n\n @Watch(\"additionalInfo\")\n additionalInfoWatcher(newValue: AdditionalInfo[] \| string) {\n if (typeof newValue === \"string\") {\n this._additionalInfo = JSON.parse(newValue);\n } else {\n this._additionalInfo = newValue;\n }\n }\n\n @Watch(\"sourceSet\") srcSetWatcher(data: ImageSrcSet[] \| string) {\n this._sourceSet = typeof data === \"string\" ? JSON.parse(data) : data;\n }\n\n expandRelatedInfoPanel(target) {\n let contentSelector = `hy-list-item-wrapper__${this.variant}__related-info__content`;\n let targetButtonClass = \"hy-list-item-wrapper__degree__related-info__heading__button\";\n let contentSection = document.querySelectorAll(`[aria-labelledBy=\"${target.id}\"]`)[0] as HTMLElement;\n if (contentSection) {\n if (!this.isExpandedRelatedContent) {\n contentSection.classList.add(`${contentSelector}__is-open`);\n target.classList.add(`${targetButtonClass}__is-open`);\n } else {\n contentSection.classList.remove(`${contentSelector}__is-open`);\n target.classList.remove(`${targetButtonClass}__is-open`);\n }\n this.isExpandedRelatedContent = !this.isExpandedRelatedContent;\n }\n }\n\n @Listen(\"keydown\")\n handleKeyDown(event: KeyboardEvent) {\n const key = event.code;\n let target = event.target as HTMLButtonElement;\n\n const targetElement = target.tagName.toLowerCase();\n const possibleTags = [targetElement].some((r) => [\"svg\", \"path\", \"button\", \"a\"].indexOf(r) >= 0);\n\n if (\n target &&\n possibleTags &&\n !target.classList.contains(\"hy-list-item-wrapper__degree__related-info__link\") &&\n [keys.enter, keys.space].includes(key)\n ) {\n if (targetElement !== \"button\") {\n target = target.closest(`.hy-list-item-wrapper__${this.variant}__related-info__heading__button`);\n }\n this.expandRelatedInfoPanel(target);\n event.preventDefault();\n }\n }\n\n @Listen(\"click\")\n handleClick(event) {\n let target = event.target as HTMLElement;\n const targetElement = target.tagName.toLowerCase();\n const possibleTags = [targetElement].some((r) => [\"svg\", \"path\", \"button\", \"a\"].indexOf(r) >= 0);\n\n if (target && possibleTags && !target.classList.contains(\"hy-list-item-wrapper__degree__related-info__link\")) {\n if (targetElement !== \"button\") {\n target = target.closest(`.hy-list-item-wrapper__${this.variant}__related-info__heading__button`);\n }\n this.expandRelatedInfoPanel(target);\n event.preventDefault();\n event.stopImmediatePropagation();\n }\n }\n\n componentWillLoad() {\n this.relatedLinksWatcher(this.relatedLinks);\n this.additionalInfoWatcher(this.additionalInfo);\n this.srcSetWatcher(this.sourceSet);\n }\n\n componentDidLoad() {\n let hyMainDiv = this.el.closest(\".hy-main\");\n if (hyMainDiv) {\n if (!hyMainDiv.classList.contains(\"with-sidebar\")) {\n this.headerstyle = \"large\";\n }\n }\n if (this.variant == ListItemVariants.degreeProgramme) {\n const image = document.querySelector(\".hy-list-item__degree__image-container__image img\") as any;\n\n if (image) {\n image.addEventListener(\"load\", function () {\n const outputImageAspectRatio = 1;\n const imageHeight = image.naturalHeight;\n const imageWidth = image.naturalWidth;\n const inputImageAspectRatio = imageWidth / imageHeight;\n this._imageMinWidth = imageWidth;\n this._imageMinHeight = imageHeight;\n if (inputImageAspectRatio > outputImageAspectRatio) {\n this._imageMinWidth = imageHeight * outputImageAspectRatio;\n } else if (inputImageAspectRatio < outputImageAspectRatio) {\n this._imageMinHeight = imageWidth / outputImageAspectRatio;\n }\n });\n }\n }\n }\n\n render() {\n const classWrapperAttributes = [\n \"hy-list-item-wrapper\",\n `hy-list-item-wrapper__${this.variant}`,\n `hy-list-item-wrapper__${this.variant}__${this.headerstyle}`,\n ].join(\" \");\n const classAttributes = [\"hy-list-item\", `hy-list-item__${this.variant}`].join(\" \");\n const classInfoContainerAttributes = [\n `hy-list-item__${this.variant}__info-container`,\n `hy-list-item__${this.variant}__info-container__${this.headerstyle}`,\n ].join(\" \");\n /const classInfoContainerDataAttributes = [\n `hy-list-item__${this.variant}__info-container__data`,\n `hy-list-item__${this.variant}__info-container__data__${this.headerstyle}`,\n ].join(' ');/\n const classInfoContainerHeader = [\n `hy-list-item__${this.variant}__info-container__header`,\n `hy-list-item__${this.variant}__info-container__header__${this.headerstyle}`,\n ].join(\" \");\n const classInfoContainerTitle = [\n `hy-list-item__${this.variant}__info-container__title`,\n `hy-list-item__${this.variant}__info-container__title__${this.headerstyle}`,\n ].join(\" \");\n const classInfoContainerDescription = [\n `hy-list-item__${this.variant}__info-container__description`,\n `hy-list-item__${this.variant}__info-container__description__${this.headerstyle}`,\n ].join(\" \");\n const classInfoContainerLinkContainer = [`hy-list-item__${this.variant}__info-container__link-container`].join(\" \");\n const classInfoContainerLinkIcon = [`hy-list-item__${this.variant}__info-container__link__icon`].join(\" \");\n const classInfoContainerLink = [`hy-list-item__${this.variant}__info-container__link`].join(\" \");\n\n const target = this.isExternal ? \"_blank\" : \"_self\";\n\n function truncate(str, n) {\n return str.length > n ? str.substr(0, n - 1) + \"...\" : str;\n }\n\n switch (this.variant) {\n case ListItemVariants.position: {\n const classInfoContainerOutgoingLink = [\n `hy-list-item__${this.variant}__info-container__outgoing-link`,\n `hy-list-item__${this.variant}__info-container__outgoing-link__${this.headerstyle}`,\n ].join(\" \");\n return (\n <article>\n <a class={classAttributes} href={this.url} target={target} aria-label={this.scLabel}>\n <div class={classInfoContainerAttributes}>\n <div class={classInfoContainerHeader}>\n <div class=\"icon\">\n <hy-icon icon={\"hy-icon-units-and-faculties\"} size={18} />\n </div>\n {this.itemType}\n </div>\n <div class={classInfoContainerTitle}>{this.itemTitle}</div>\n\n {this.itemDescription && (\n <div\n class={classInfoContainerDescription}\n innerHTML={\n this.truncateDescription\n ? truncate(this.itemDescription, this.truncateLimit)\n : this.itemDescription\n }\n ></div>\n )}\n </div>\n <div class={classInfoContainerOutgoingLink}>\n <span class=\"icon\">\n <hy-icon icon={\"hy-icon-done\"} size={14}></hy-icon>\n </span>\n <span class=\"label\">{this.outGoingUrlLabel}</span>\n </div>\n </a>\n </article>\n );\n }\n case ListItemVariants.degreeProgramme: {\n const classImageContainerAttributes = [`hy-list-item__${this.variant}__image-container`].join(\" \");\n const classImageContainerImage = [`hy-list-item__${this.variant}__image-container__image`].join(\" \");\n\n const classInfoContainerAdditionalInfoAttributes = [\n `hy-list-item__${this.variant}__info-container__additional-info`,\n `hy-list-item__${this.variant}__info-container__additional-info__${this.headerstyle}`,\n ].join(\" \");\n\n const withAdditionalInfo = this._additionalInfo && this._additionalInfo.length > 0 ? \"\" : \"link-only\";\n const classMetadataWrapper = [\n `hy-list-item__${this.variant}__info-container__metadata-wrapper`,\n withAdditionalInfo,\n ].join(\" \");\n const classContentWrapper = [`hy-list-item__${this.variant}__info-container__content-wrapper`].join(\" \");\n\n const classInfoContainerOutgoingLink = [\n `hy-list-item__${this.variant}__info-container__outgoing-link`,\n `hy-list-item__${this.variant}__info-container__outgoing-link__${this.headerstyle}`,\n ].join(\" \");\n const classInfoContainerOutgoingLinkUrl = [\n `hy-list-item__${this.variant}__info-container__outgoing-link__link`,\n ].join(\" \");\n\n const classRelatedInfoContainer = [\n `hy-list-item-wrapper__${this.variant}__related-info`,\n `hy-list-item-wrapper__${this.variant}__related-info__${this.headerstyle}`,\n ].join(\" \");\n const classRelatedInfoHeading = [`hy-list-item-wrapper__${this.variant}__related-info__heading`].join(\" \");\n const classRelatedInfoHeadingLink = [`hy-list-item-wrapper__${this.variant}__related-info__heading__link`].join(\n \" \"\n );\n const classRelatedInfoHeadingButton = [\n `hy-list-item-wrapper__${this.variant}__related-info__heading__button`,\n ].join(\" \");\n const classRelatedInfoHeadingIcon = [`hy-list-item-wrapper__${this.variant}__related-info__heading__icon`].join(\n \" \"\n );\n const classRelatedInfoContent = [`hy-list-item-wrapper__${this.variant}__related-info__content`].join(\" \");\n const classRelatedInfoLink = [`hy-list-item-wrapper__${this.variant}__related-info__link`].join(\" \");\n\n const titleAsId =\n this.relatedLinksBlockTitle && this.relatedLinksBlockTitle.length > 0\n ? `${this.itemTitle}-${this.relatedLinksBlockTitle}`.toLowerCase().replace(/\\W/g, \"-\")\n : \"\";\n const accordionItemHref = \"#\" + titleAsId + \"--title\";\n\n const relatedLinksCount =\n this.relatedLinksBlockTitle && this.relatedLinksBlockTitle.length > 0 ? this._relatedLinks.length : \"\";\n\n return [\n <article class={classWrapperAttributes}>\n <a class={classAttributes} href={this.url} target={target} aria-label={this.scLabel}>\n <div class={classImageContainerAttributes}>\n <div class={classImageContainerImage}>\n {this._sourceSet ? (\n <picture>\n {this._sourceSet.map((item) => (\n <source\n srcSet={item.src}\n media={item.media}\n type={item.type}\n sizes={item.sizes ? item.sizes : \"\"}\n />\n ))}\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n aria-hidden=\"true\"\n src={this.itemImageUrl}\n alt={this.itemImageAlt}\n style={{\n \"--minheight\": `${this._imageMinHeight}px` as \"minHeight\",\n \"--minwidth\": `${this._imageMinWidth}px` as \"minWidth\",\n }}\n />\n </picture>\n ) : (\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n aria-hidden=\"true\"\n src={this.itemImageUrl}\n alt={this.itemImageAlt}\n style={{\n \"--minheight\": `${this._imageMinHeight}px` as \"minHeight\",\n \"--minwidth\": `${this._imageMinWidth}px` as \"minWidth\",\n }}\n />\n )}\n </div>\n {this.imageLabel && <span>{this.imageLabel}</span>}\n </div>\n <div class={classInfoContainerAttributes}>\n <div class={classContentWrapper}>\n <div class={classInfoContainerTitle}>{this.itemTitle}</div>\n {this.itemDescription && (\n <div class={classInfoContainerDescription} innerHTML={this.itemDescription}></div>\n )}\n </div>\n <div class={classMetadataWrapper}>\n {this._additionalInfo && (\n <div class={classInfoContainerAdditionalInfoAttributes}>\n {this._additionalInfo.map((x) => {\n let classInfoContainerAdditionalInfoItem = [\n `hy-list-item__${this.variant}__info-container__additional-info__item`,\n `hy-list-item__${this.variant}__info-container__additional-info__item__${this.headerstyle}`,\n `${x.isActive.toString() == \"true\" ? \"active\" : \"\"}`,\n ].join(\" \");\n return <div class={classInfoContainerAdditionalInfoItem}>{x.text}</div>;\n })}\n </div>\n )}\n <div class={classInfoContainerOutgoingLink}>\n <a\n href={this.url}\n target={target}\n aria-label={this.scLabel}\n class={classInfoContainerOutgoingLinkUrl}\n tabindex=\"-1\"\n >\n <span class=\"label\">{this.outGoingUrlLabel}</span>\n <span class=\"icon-wrapper\">\n <div class=\"icon\">\n <hy-icon icon={\"hy-icon-arrow-to-right\"} size={32} />\n </div>\n </span>\n </a>\n </div>\n </div>\n </div>\n </a>\n {this.relatedLinksBlockTitle && (\n <div class={classRelatedInfoContainer}>\n <div class={classRelatedInfoHeading}>\n <a href={accordionItemHref} class={classRelatedInfoHeadingLink} tabindex=\"-1\">\n <button\n aria-expanded=\"false\"\n aria-controls={`${titleAsId}--content`}\n class={classRelatedInfoHeadingButton}\n id={`${titleAsId}--title`}\n >\n <span class={classRelatedInfoHeadingIcon}>\n <hy-icon icon={\"hy-icon-caret-down\"} size={14} />\n </span>\n {this.relatedLinksBlockTitle} ({relatedLinksCount})\n </button>\n </a>\n </div>\n <div\n class={classRelatedInfoContent}\n aria-labelledBy={`${titleAsId}--title`}\n id={`${titleAsId}--content`}\n role=\"region\"\n aria-hidden=\"true\"\n >\n {this._relatedLinks.map((x) => {\n let relatedLinkTarget = x.isExternal ? \"_blank\" : \"_self\";\n return (\n <a class={classRelatedInfoLink} href={x.url} target={target} aria-label={relatedLinkTarget}>\n {x.label}\n </a>\n );\n })}\n </div>\n </div>\n )}\n </article>,\n ];\n }\n default: {\n return (\n <article>\n <a class={classAttributes} href={this.url} target={target} aria-label={this.scLabel}>\n <div class={classInfoContainerAttributes}>\n <div class={classInfoContainerHeader}>{this.itemType}</div>\n <div class={classInfoContainerTitle}>{this.itemTitle}</div>\n\n <div class={classInfoContainerLinkContainer}>\n <span class={classInfoContainerLinkIcon}>\n <hy-icon icon={\"hy-icon-link\"} size={15} />\n </span>\n <div class={classInfoContainerLink}>{this.url}</div>\n </div>\n\n {this.itemDescription && (\n <div class={classInfoContainerDescription} innerHTML={this.itemDescription}></div>\n )}\n </div>\n </a>\n </article>\n );\n }\n }\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"names":["hyListItemCss","keys","enter","space","HyListItem","ListItemVariants","default","relatedLinksWatcher","newValue","this","_relatedLinks","JSON","parse","additionalInfoWatcher","_additionalInfo","srcSetWatcher","data","_sourceSet","expandRelatedInfoPanel","target","contentSelector","variant","targetButtonClass","contentSection","document","querySelectorAll","id","isExpandedRelatedContent","classList","add","remove","handleKeyDown","event","key","code","targetElement","tagName","toLowerCase","possibleTags","some","r","indexOf","contains","includes","closest","preventDefault","handleClick","stopImmediatePropagation","componentWillLoad","relatedLinks","additionalInfo","sourceSet","componentDidLoad","hyMainDiv","el","headerstyle","degreeProgramme","image","querySelector","addEventListener","outputImageAspectRatio","imageHeight","naturalHeight","imageWidth","naturalWidth","inputImageAspectRatio","_imageMinWidth","_imageMinHeight","render","classWrapperAttributes","join","classAttributes","classInfoContainerAttributes","classInfoContainerHeader","classInfoContainerTitle","classInfoContainerDescription","classInfoContainerLinkContainer","classInfoContainerLinkIcon","classInfoContainerLink","isExternal","truncate","str","n","length","substr","position","classInfoContainerOutgoingLink","h","class","href","url","scLabel","icon","size","itemType","itemTitle","itemDescription","innerHTML","truncateDescription","truncateLimit","outGoingUrlLabel","classImageContainerAttributes","classImageContainerImage","classInfoContainerAdditionalInfoAttributes","withAdditionalInfo","classMetadataWrapper","classContentWrapper","classInfoContainerOutgoingLinkUrl","classRelatedInfoContainer","classRelatedInfoHeading","classRelatedInfoHeadingLink","classRelatedInfoHeadingButton","classRelatedInfoHeadingIcon","classRelatedInfoContent","classRelatedInfoLink","titleAsId","relatedLinksBlockTitle","replace","accordionItemHref","relatedLinksCount","map","item","srcSet","src","media","type","sizes","loading","disableLazy","itemImageUrl","alt","itemImageAlt","style","imageLabel","x","classInfoContainerAdditionalInfoItem","isActive","toString","text","tabindex","role","relatedLinkTarget","label"],"sources":["./src/components/hy-list-item/hy-list-item.scss?tag=hy-list-item","./src/components/hy-list-item/hy-list-item.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-list-item {\n display: flex;\n font-family: var(--main-font-family);\n text-decoration: none;\n\n &__default {\n margin-bottom: 28px;\n @include breakpoint($wide) {\n margin-bottom: 32px;\n }\n\n &__info-container {\n &__header {\n @include font-size(12px, 14px);\n color: var(--grayscale-dark);\n letter-spacing: 0;\n margin-bottom: 4px;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 18px);\n margin-bottom: 2px;\n }\n }\n\n &__title {\n @include font-size(18px, 22px);\n @include font-weight($bold);\n color: var(--brand-main-light);\n letter-spacing: -0.56px;\n margin-bottom: 6px;\n\n @include breakpoint($narrow) {\n @include font-size(22px, 28px);\n letter-spacing: -0.69px;\n margin-bottom: 10px;\n }\n @include breakpoint($xlarge) {\n @include font-size(26px, 32px);\n letter-spacing: -0.8px;\n margin-bottom: 8px;\n }\n\n &__large {\n // >1200 no sidebar;\n @include breakpoint($extrawide) {\n @include font-size(26px, 32px);\n letter-spacing: -0.8px;\n margin-bottom: 8px;\n }\n }\n }\n\n &__link-container {\n align-items: center;\n display: flex;\n margin-bottom: 6px;\n\n @include breakpoint($narrow) {\n margin-bottom: 8px;\n }\n }\n\n &__link {\n @include font-size(12px, 16px);\n color: var(--grayscale-dark);\n letter-spacing: -0.07px;\n margin-left: 4px;\n\n @include breakpoint($narrow) {\n margin-left: 5px;\n }\n\n &__icon {\n svg {\n fill: var(--grayscale-dark);\n }\n }\n }\n\n &__description {\n @include font-size(14px, 20px);\n color: var(--grayscale-black);\n letter-spacing: 0;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px);\n }\n }\n }\n }\n\n // Opem position\n &__position {\n background: radial-gradient(circle, var(--grayscale-light) 0%, var(--grayscale-background-box) 100%);\n flex-direction: column;\n @include breakpoint($narrow) {\n flex-direction: row;\n }\n\n &__info-container {\n display: flex;\n flex: 1;\n flex-direction: column;\n justify-content: space-between;\n margin: 0;\n padding: 12px;\n position: relative;\n\n // 960-1600 with Sidebar;\n @include breakpoint($wide) {\n padding: 12px 16px;\n }\n // >1600 with sidebar same as >1200 without sidebar\n @include breakpoint($xlarge) {\n padding: 20px 24px;\n }\n\n &__header {\n display: flex;\n align-items: center;\n flex-direction: row;\n color: var(--brand-main);\n font-family: var(--main-font-family);\n font-size: 14px;\n font-weight: 600;\n letter-spacing: -0.2px;\n line-height: 14px;\n margin-bottom: 14px;\n\n .icon {\n margin-right: 0.75rem;\n\n svg {\n fill: var(--brand-main);\n }\n }\n }\n\n // >1200 no sidebar;\n &__large {\n @include breakpoint($extrawide) {\n padding: 20px 24px;\n }\n }\n\n &__data {\n display: flex;\n flex-direction: column;\n }\n\n &__title {\n @include font-size(18px, 20px);\n @include font-weight($bold);\n font-family: var(--main-font-family);\n color: var(--grayscale-black);\n margin-bottom: 12px;\n letter-spacing: -0.45px;\n line-height: 22px;\n\n @include breakpoint($narrow) {\n letter-spacing: -0.5px;\n }\n }\n\n &__description {\n @include font-size(14px);\n color: var(--grayscale-dark-text);\n display: none;\n font-family: var(--main-font-family);\n letter-spacing: 0.8px;\n margin-bottom: 14px;\n line-height: 20px;\n\n @include breakpoint($narrow) {\n display: block;\n }\n }\n\n &__outgoing-link {\n align-items: flex-end;\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n position: relative;\n padding: 0 24px 24px 12px;\n\n @include breakpoint($narrow) {\n justify-content: center;\n padding: 0 24px 24px 0;\n }\n\n .label {\n color: var(--link-blue);\n font-family: var(--main-font-family);\n font-size: 16px;\n font-weight: 600;\n letter-spacing: -0.3px;\n line-height: 20px;\n }\n\n .icon {\n margin-right: 4px;\n margin-bottom: 2px;\n\n svg {\n fill: var(--link-blue);\n }\n }\n }\n }\n }\n\n // Degree programmes.\n &__degree {\n background: radial-gradient(circle, var(--grayscale-light) 0%, var(--grayscale-background-box) 100%);\n flex-direction: column;\n @include breakpoint($narrow) {\n flex-direction: row;\n }\n\n &__image-container {\n display: block;\n position: relative;\n flex: 1;\n\n @include breakpoint($narrow) {\n flex: 0 0 24%;\n }\n\n &__image {\n vertical-align: bottom;\n max-width: 100%;\n height: 100%;\n\n img {\n object-fit: cover;\n width: 100%;\n height: 100%;\n }\n }\n\n span {\n @include font-weight($semibold);\n @include font-size(12px, 14px);\n background-color: var(--additional-yellow);\n box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);\n color: var(--grayscale-black);\n left: -4px;\n letter-spacing: -0.07px;\n padding: 5px 8px;\n position: absolute;\n top: 16px;\n text-transform: uppercase;\n\n @include breakpoint($narrow) {\n left: -8px;\n }\n @include breakpoint($wide) {\n top: 22px;\n }\n }\n }\n\n &__info-container {\n display: flex;\n flex: 1;\n flex-direction: column;\n justify-content: space-between;\n margin: 0;\n padding: 12px;\n position: relative;\n\n // 960-1600 with Sidebar;\n @include breakpoint($wide) {\n padding: 12px 16px;\n }\n // >1600 with sidebar same as >1200 without sidebar\n @include breakpoint($xlarge) {\n padding: 20px 24px;\n }\n\n // >1200 no sidebar;\n &__large {\n @include breakpoint($extrawide) {\n padding: 20px 24px;\n }\n }\n\n &__data {\n display: flex;\n flex-direction: column;\n }\n\n &__title {\n @include font-size(18px, 22px);\n @include font-weight($bold);\n color: var(--link-blue);\n letter-spacing: -0.54px;\n margin-bottom: 8px;\n\n // 960-1600 with Sidebar;\n @include breakpoint($wide) {\n @include font-size(18px, 24px);\n letter-spacing: -0.5px;\n }\n\n // >1600 with sidebar same as >1200 without sidebar\n @include breakpoint($xlarge) {\n @include font-size(20px, 26px);\n letter-spacing: -0.6px;\n }\n\n &__large {\n // >1200 no sidebar;\n @include breakpoint($extrawide) {\n @include font-size(20px, 26px);\n letter-spacing: -0.6px;\n }\n }\n }\n\n &__description {\n @include font-size(14px, 18px);\n color: var(--grayscale-dark);\n letter-spacing: 0;\n margin-bottom: 16px;\n\n // 960-1600 with Sidebar;\n @include breakpoint($wide) {\n letter-spacing: -0.2;\n }\n // >1600 with sidebar same as >1200 without sidebar\n @include breakpoint($xlarge) {\n @include font-size(16px, 20px);\n letter-spacing: -0.25px;\n }\n\n &__large {\n // >1200 no sidebar;\n @include breakpoint($extrawide) {\n @include font-size(16px, 20px);\n letter-spacing: -0.25px;\n }\n }\n }\n\n &__metadata-wrapper {\n display: flex;\n flex-direction: column;\n margin-top: 16px;\n width: 100%;\n\n @include breakpoint($narrow) {\n align-items: center;\n flex-direction: row;\n justify-content: space-between;\n }\n\n &.link-only {\n justify-content: flex-end;\n }\n }\n\n &__additional-info {\n width: 100%;\n\n &__item {\n @include font-size(12px, 16px);\n @include font-weight($light);\n align-items: center;\n color: var(--grayscale-black);\n display: flex;\n flex-direction: row;\n letter-spacing: -0.2px;\n\n @include breakpoint($xlarge) {\n @include font-size(14px, 16px);\n }\n // >1200 no sidebar;\n &__large {\n @include breakpoint($extrawide) {\n @include font-size(14px, 16px);\n }\n }\n }\n &__item.active::before {\n content: \" \";\n box-sizing: border-box;\n height: 14px;\n width: 14px;\n border: 3px solid #ffffff;\n border-radius: 50%;\n background-color: #f9a21a;\n left: -7px;\n position: absolute;\n\n @include breakpoint($narrow) {\n border: none;\n height: 8px;\n margin-right: 6px;\n width: 8px;\n left: 0;\n position: relative;\n }\n }\n }\n\n &__outgoing-link {\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n position: relative;\n width: 100%;\n\n a {\n align-items: center;\n bottom: 0;\n top: 0;\n display: flex;\n flex-direction: row;\n position: relative;\n right: -18px;\n text-decoration: none;\n\n @include breakpoint($wide) {\n right: -22px;\n }\n @include breakpoint($xlarge) {\n right: -30px;\n }\n\n .label {\n @include font-size(14px, 16px);\n @include font-weight($bold);\n color: var(--link-blue);\n letter-spacing: -0.5px;\n margin-right: 8px;\n text-align: right;\n }\n\n .icon-wrapper {\n background-color: var(--brand-main-light);\n z-index: 10;\n\n .icon {\n position: relative;\n overflow: hidden;\n\n svg {\n background-color: transparent;\n box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);\n fill: var(--grayscale-white);\n padding: 6.4px;\n\n @include breakpoint($xlarge) {\n height: 36px;\n width: 36px;\n padding: 7.2px;\n }\n }\n }\n }\n }\n\n // >1200 no sidebar;\n &__large {\n svg {\n @include breakpoint($extrawide) {\n height: 36px;\n width: 36px;\n padding: 7.2px;\n }\n }\n }\n }\n }\n }\n}\n\n.hy-list-item-wrapper {\n font-family: var(--main-font-family);\n\n &__degree {\n margin-bottom: 16px;\n @include breakpoint($narrow) {\n flex-direction: row;\n margin-bottom: 24px;\n }\n @include breakpoint($wide) {\n margin-bottom: 28px;\n }\n @include breakpoint($xlarge) {\n margin-bottom: 32px;\n }\n // >1200 no sidebar;\n &__large {\n @include breakpoint($extrawide) {\n margin-bottom: 32px;\n }\n }\n\n &__related-info {\n background: radial-gradient(circle, #f8f8f8 0%, #f5f5f5 100%);\n margin-top: 4px;\n padding: 0 12px 0 16px;\n\n @include breakpoint($narrow) {\n padding: 0 24px 0 16px;\n }\n @include breakpoint($wide) {\n margin-top: 6px;\n padding: 0 24px 0 24px;\n }\n @include breakpoint($xlarge) {\n margin-top: 8px;\n }\n // >1200 no sidebar;\n &__large {\n @include breakpoint($extrawide) {\n margin-top: 8px;\n }\n }\n\n &__heading {\n &__link {\n text-decoration: none;\n }\n\n &__button {\n @include font-size(12px, 16px);\n align-items: center;\n background: radial-gradient(circle, #f8f8f8 0%, #f5f5f5 100%);\n border: none;\n color: var(--grayscale-black);\n display: flex;\n flex-direction: row;\n font-family: var(--main-font-family);\n letter-spacing: -0.2px;\n height: 100%;\n padding: 8px 0;\n text-align: left;\n width: 100%;\n\n @include breakpoint($narrow) {\n @include font-size(12px, 20px);\n padding: 14px 0;\n }\n @include breakpoint($wide) {\n @include font-size(14px, 20px);\n letter-spacing: -0.4px;\n padding: 18px 0;\n }\n\n &:hover {\n cursor: pointer;\n }\n\n &__is-open {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n\n &__icon {\n margin-right: 0.5rem;\n z-index: 0;\n\n @include breakpoint($wide) {\n margin-right: 12px;\n }\n\n svg {\n fill: var(--brand-main);\n height: 14px;\n width: 14px;\n\n @include breakpoint($wide) {\n height: 18px;\n width: 18px;\n }\n }\n }\n }\n\n &__content {\n display: none;\n\n &__is-open {\n border-top: 1px solid #d2d2d2;\n display: flex;\n flex-direction: column;\n padding: 20px 8px 5px 8px;\n\n @include breakpoint($wide) {\n padding: 20px 0 14px 0;\n }\n }\n }\n\n &__link {\n @include font-size(14px, 16px);\n @include font-weight($bold);\n color: var(--link-blue);\n letter-spacing: -0.4px;\n margin-bottom: 16px;\n text-decoration: none;\n }\n }\n }\n}\n","export interface RelatedLink {\n label: string;\n url: string;\n isExternal: boolean;\n scLabel: string;\n}\n\nexport interface AdditionalInfo {\n text: string;\n isActive: boolean;\n}\n\nexport interface ImageSrcSet {\n src: any;\n media: string;\n type: string;\n sizes: string \| null;\n}\n\nimport {Component, h, Prop, Watch, State, Listen, Element} from \"@stencil/core\";\nimport {ListItemVariants} from \"../../utils/utils\";\n\nlet keys = {\n enter: \"Enter\",\n space: \"Space\",\n};\n\n@Component({\n tag: \"hy-list-item\",\n styleUrl: \"hy-list-item.scss\",\n shadow: false,\n})\nexport class HyListItem {\n @Element() el: HTMLElement;\n @State() isExpandedRelatedContent: boolean = false;\n @Prop() variant: ListItemVariants = ListItemVariants.default;\n @Prop() itemType?: string;\n @Prop() itemTitle?: string;\n @Prop() itemDescription?: any;\n @Prop() url?: string;\n @Prop() isExternal: boolean = false;\n @Prop() scLabel?: string;\n @Prop() itemImageUrl?: string;\n @Prop() itemImageAlt?: string;\n @Prop() disableLazy: boolean = false;\n @Prop() relatedLinksBlockTitle?: string;\n private _relatedLinks: RelatedLink[];\n @Prop() relatedLinks?: RelatedLink[] \| string;\n @Prop() imageLabel?: string;\n @Prop() outGoingUrlLabel?: string = \"Go to programme page\";\n private _additionalInfo: AdditionalInfo[];\n @Prop() additionalInfo?: AdditionalInfo[] \| string;\n @Prop() headerstyle: string = \"common\";\n private _sourceSet: ImageSrcSet[];\n @Prop() sourceSet: ImageSrcSet[] \| string;\n @Prop() truncateDescription: boolean = false;\n @Prop() truncateLimit: number = 140;\n\n @State() _imageMinHeight: number = 0;\n @State() _imageMinWidth: number = 0;\n\n @Watch(\"relatedLinks\")\n relatedLinksWatcher(newValue: RelatedLink[] \| string) {\n if (typeof newValue === \"string\") {\n this._relatedLinks = JSON.parse(newValue);\n } else {\n this._relatedLinks = newValue;\n }\n }\n\n @Watch(\"additionalInfo\")\n additionalInfoWatcher(newValue: AdditionalInfo[] \| string) {\n if (typeof newValue === \"string\") {\n this._additionalInfo = JSON.parse(newValue);\n } else {\n this._additionalInfo = newValue;\n }\n }\n\n @Watch(\"sourceSet\") srcSetWatcher(data: ImageSrcSet[] \| string) {\n this._sourceSet = typeof data === \"string\" ? JSON.parse(data) : data;\n }\n\n expandRelatedInfoPanel(target) {\n let contentSelector = `hy-list-item-wrapper__${this.variant}__related-info__content`;\n let targetButtonClass = \"hy-list-item-wrapper__degree__related-info__heading__button\";\n let contentSection = document.querySelectorAll(`[aria-labelledBy=\"${target.id}\"]`)[0] as HTMLElement;\n if (contentSection) {\n if (!this.isExpandedRelatedContent) {\n contentSection.classList.add(`${contentSelector}__is-open`);\n target.classList.add(`${targetButtonClass}__is-open`);\n } else {\n contentSection.classList.remove(`${contentSelector}__is-open`);\n target.classList.remove(`${targetButtonClass}__is-open`);\n }\n this.isExpandedRelatedContent = !this.isExpandedRelatedContent;\n }\n }\n\n @Listen(\"keydown\")\n handleKeyDown(event: KeyboardEvent) {\n const key = event.code;\n let target = event.target as HTMLButtonElement;\n\n const targetElement = target.tagName.toLowerCase();\n const possibleTags = [targetElement].some((r) => [\"svg\", \"path\", \"button\", \"a\"].indexOf(r) >= 0);\n\n if (\n target &&\n possibleTags &&\n !target.classList.contains(\"hy-list-item-wrapper__degree__related-info__link\") &&\n [keys.enter, keys.space].includes(key)\n ) {\n if (targetElement !== \"button\") {\n target = target.closest(`.hy-list-item-wrapper__${this.variant}__related-info__heading__button`);\n }\n this.expandRelatedInfoPanel(target);\n event.preventDefault();\n }\n }\n\n @Listen(\"click\")\n handleClick(event) {\n let target = event.target as HTMLElement;\n const targetElement = target.tagName.toLowerCase();\n const possibleTags = [targetElement].some((r) => [\"svg\", \"path\", \"button\", \"a\"].indexOf(r) >= 0);\n\n if (target && possibleTags && !target.classList.contains(\"hy-list-item-wrapper__degree__related-info__link\")) {\n if (targetElement !== \"button\") {\n target = target.closest(`.hy-list-item-wrapper__${this.variant}__related-info__heading__button`);\n }\n this.expandRelatedInfoPanel(target);\n event.preventDefault();\n event.stopImmediatePropagation();\n }\n }\n\n componentWillLoad() {\n this.relatedLinksWatcher(this.relatedLinks);\n this.additionalInfoWatcher(this.additionalInfo);\n this.srcSetWatcher(this.sourceSet);\n }\n\n componentDidLoad() {\n let hyMainDiv = this.el.closest(\".hy-main\");\n if (hyMainDiv) {\n if (!hyMainDiv.classList.contains(\"with-sidebar\")) {\n this.headerstyle = \"large\";\n }\n }\n if (this.variant == ListItemVariants.degreeProgramme) {\n const image = document.querySelector(\".hy-list-item__degree__image-container__image img\") as any;\n\n if (image) {\n image.addEventListener(\"load\", function () {\n const outputImageAspectRatio = 1;\n const imageHeight = image.naturalHeight;\n const imageWidth = image.naturalWidth;\n const inputImageAspectRatio = imageWidth / imageHeight;\n this._imageMinWidth = imageWidth;\n this._imageMinHeight = imageHeight;\n if (inputImageAspectRatio > outputImageAspectRatio) {\n this._imageMinWidth = imageHeight * outputImageAspectRatio;\n } else if (inputImageAspectRatio < outputImageAspectRatio) {\n this._imageMinHeight = imageWidth / outputImageAspectRatio;\n }\n });\n }\n }\n }\n\n render() {\n const classWrapperAttributes = [\n \"hy-list-item-wrapper\",\n `hy-list-item-wrapper__${this.variant}`,\n `hy-list-item-wrapper__${this.variant}__${this.headerstyle}`,\n ].join(\" \");\n const classAttributes = [\"hy-list-item\", `hy-list-item__${this.variant}`].join(\" \");\n const classInfoContainerAttributes = [\n `hy-list-item__${this.variant}__info-container`,\n `hy-list-item__${this.variant}__info-container__${this.headerstyle}`,\n ].join(\" \");\n /const classInfoContainerDataAttributes = [\n `hy-list-item__${this.variant}__info-container__data`,\n `hy-list-item__${this.variant}__info-container__data__${this.headerstyle}`,\n ].join(' ');/\n const classInfoContainerHeader = [\n `hy-list-item__${this.variant}__info-container__header`,\n `hy-list-item__${this.variant}__info-container__header__${this.headerstyle}`,\n ].join(\" \");\n const classInfoContainerTitle = [\n `hy-list-item__${this.variant}__info-container__title`,\n `hy-list-item__${this.variant}__info-container__title__${this.headerstyle}`,\n ].join(\" \");\n const classInfoContainerDescription = [\n `hy-list-item__${this.variant}__info-container__description`,\n `hy-list-item__${this.variant}__info-container__description__${this.headerstyle}`,\n ].join(\" \");\n const classInfoContainerLinkContainer = [`hy-list-item__${this.variant}__info-container__link-container`].join(\" \");\n const classInfoContainerLinkIcon = [`hy-list-item__${this.variant}__info-container__link__icon`].join(\" \");\n const classInfoContainerLink = [`hy-list-item__${this.variant}__info-container__link`].join(\" \");\n\n const target = this.isExternal ? \"_blank\" : \"_self\";\n\n function truncate(str, n) {\n return str.length > n ? str.substr(0, n - 1) + \"...\" : str;\n }\n\n switch (this.variant) {\n case ListItemVariants.position: {\n const classInfoContainerOutgoingLink = [\n `hy-list-item__${this.variant}__info-container__outgoing-link`,\n `hy-list-item__${this.variant}__info-container__outgoing-link__${this.headerstyle}`,\n ].join(\" \");\n return (\n <div class=\"hy-list-item__wrapper\">\n <a class={classAttributes} href={this.url} target={target} aria-label={this.scLabel}>\n <div class={classInfoContainerAttributes}>\n <div class={classInfoContainerHeader}>\n <div class=\"icon\">\n <hy-icon icon={\"hy-icon-units-and-faculties\"} size={18} />\n </div>\n {this.itemType}\n </div>\n <div class={classInfoContainerTitle}>{this.itemTitle}</div>\n\n {this.itemDescription && (\n <div\n class={classInfoContainerDescription}\n innerHTML={\n this.truncateDescription\n ? truncate(this.itemDescription, this.truncateLimit)\n : this.itemDescription\n }\n ></div>\n )}\n </div>\n <div class={classInfoContainerOutgoingLink}>\n <span class=\"icon\">\n <hy-icon icon={\"hy-icon-done\"} size={14}></hy-icon>\n </span>\n <span class=\"label\">{this.outGoingUrlLabel}</span>\n </div>\n </a>\n </div>\n );\n }\n case ListItemVariants.degreeProgramme: {\n const classImageContainerAttributes = [`hy-list-item__${this.variant}__image-container`].join(\" \");\n const classImageContainerImage = [`hy-list-item__${this.variant}__image-container__image`].join(\" \");\n\n const classInfoContainerAdditionalInfoAttributes = [\n `hy-list-item__${this.variant}__info-container__additional-info`,\n `hy-list-item__${this.variant}__info-container__additional-info__${this.headerstyle}`,\n ].join(\" \");\n\n const withAdditionalInfo = this._additionalInfo && this._additionalInfo.length > 0 ? \"\" : \"link-only\";\n const classMetadataWrapper = [\n `hy-list-item__${this.variant}__info-container__metadata-wrapper`,\n withAdditionalInfo,\n ].join(\" \");\n const classContentWrapper = [`hy-list-item__${this.variant}__info-container__content-wrapper`].join(\" \");\n\n const classInfoContainerOutgoingLink = [\n `hy-list-item__${this.variant}__info-container__outgoing-link`,\n `hy-list-item__${this.variant}__info-container__outgoing-link__${this.headerstyle}`,\n ].join(\" \");\n const classInfoContainerOutgoingLinkUrl = [\n `hy-list-item__${this.variant}__info-container__outgoing-link__link`,\n ].join(\" \");\n\n const classRelatedInfoContainer = [\n `hy-list-item-wrapper__${this.variant}__related-info`,\n `hy-list-item-wrapper__${this.variant}__related-info__${this.headerstyle}`,\n ].join(\" \");\n const classRelatedInfoHeading = [`hy-list-item-wrapper__${this.variant}__related-info__heading`].join(\" \");\n const classRelatedInfoHeadingLink = [`hy-list-item-wrapper__${this.variant}__related-info__heading__link`].join(\n \" \"\n );\n const classRelatedInfoHeadingButton = [\n `hy-list-item-wrapper__${this.variant}__related-info__heading__button`,\n ].join(\" \");\n const classRelatedInfoHeadingIcon = [`hy-list-item-wrapper__${this.variant}__related-info__heading__icon`].join(\n \" \"\n );\n const classRelatedInfoContent = [`hy-list-item-wrapper__${this.variant}__related-info__content`].join(\" \");\n const classRelatedInfoLink = [`hy-list-item-wrapper__${this.variant}__related-info__link`].join(\" \");\n\n const titleAsId =\n this.relatedLinksBlockTitle && this.relatedLinksBlockTitle.length > 0\n ? `${this.itemTitle}-${this.relatedLinksBlockTitle}`.toLowerCase().replace(/\\W/g, \"-\")\n : \"\";\n const accordionItemHref = \"#\" + titleAsId + \"--title\";\n\n const relatedLinksCount =\n this.relatedLinksBlockTitle && this.relatedLinksBlockTitle.length > 0 ? this._relatedLinks.length : \"\";\n\n return [\n <article class={classWrapperAttributes}>\n <a class={classAttributes} href={this.url} target={target} aria-label={this.scLabel}>\n <div class={classImageContainerAttributes}>\n <div class={classImageContainerImage}>\n {this._sourceSet ? (\n <picture>\n {this._sourceSet.map((item) => (\n <source\n srcSet={item.src}\n media={item.media}\n type={item.type}\n sizes={item.sizes ? item.sizes : \"\"}\n />\n ))}\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n aria-hidden=\"true\"\n src={this.itemImageUrl}\n alt={this.itemImageAlt}\n style={{\n \"--minheight\": `${this._imageMinHeight}px` as \"minHeight\",\n \"--minwidth\": `${this._imageMinWidth}px` as \"minWidth\",\n }}\n />\n </picture>\n ) : (\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n aria-hidden=\"true\"\n src={this.itemImageUrl}\n alt={this.itemImageAlt}\n style={{\n \"--minheight\": `${this._imageMinHeight}px` as \"minHeight\",\n \"--minwidth\": `${this._imageMinWidth}px` as \"minWidth\",\n }}\n />\n )}\n </div>\n {this.imageLabel && <span>{this.imageLabel}</span>}\n </div>\n <div class={classInfoContainerAttributes}>\n <div class={classContentWrapper}>\n <div class={classInfoContainerTitle}>{this.itemTitle}</div>\n {this.itemDescription && (\n <div class={classInfoContainerDescription} innerHTML={this.itemDescription}></div>\n )}\n </div>\n <div class={classMetadataWrapper}>\n {this._additionalInfo && (\n <div class={classInfoContainerAdditionalInfoAttributes}>\n {this._additionalInfo.map((x) => {\n let classInfoContainerAdditionalInfoItem = [\n `hy-list-item__${this.variant}__info-container__additional-info__item`,\n `hy-list-item__${this.variant}__info-container__additional-info__item__${this.headerstyle}`,\n `${x.isActive.toString() == \"true\" ? \"active\" : \"\"}`,\n ].join(\" \");\n return <div class={classInfoContainerAdditionalInfoItem}>{x.text}</div>;\n })}\n </div>\n )}\n <div class={classInfoContainerOutgoingLink}>\n <a\n href={this.url}\n target={target}\n aria-label={this.scLabel}\n class={classInfoContainerOutgoingLinkUrl}\n tabindex=\"-1\"\n >\n <span class=\"label\">{this.outGoingUrlLabel}</span>\n <span class=\"icon-wrapper\">\n <div class=\"icon\">\n <hy-icon icon={\"hy-icon-arrow-to-right\"} size={32} />\n </div>\n </span>\n </a>\n </div>\n </div>\n </div>\n </a>\n {this.relatedLinksBlockTitle && (\n <div class={classRelatedInfoContainer}>\n <div class={classRelatedInfoHeading}>\n <a href={accordionItemHref} class={classRelatedInfoHeadingLink} tabindex=\"-1\">\n <button\n aria-expanded=\"false\"\n aria-controls={`${titleAsId}--content`}\n class={classRelatedInfoHeadingButton}\n id={`${titleAsId}--title`}\n >\n <span class={classRelatedInfoHeadingIcon}>\n <hy-icon icon={\"hy-icon-caret-down\"} size={14} />\n </span>\n {this.relatedLinksBlockTitle} ({relatedLinksCount})\n </button>\n </a>\n </div>\n <div\n class={classRelatedInfoContent}\n aria-labelledBy={`${titleAsId}--title`}\n id={`${titleAsId}--content`}\n role=\"region\"\n aria-hidden=\"true\"\n >\n {this._relatedLinks.map((x) => {\n let relatedLinkTarget = x.isExternal ? \"_blank\" : \"_self\";\n return (\n <a class={classRelatedInfoLink} href={x.url} target={target} aria-label={relatedLinkTarget}>\n {x.label}\n </a>\n );\n })}\n </div>\n </div>\n )}\n </article>,\n ];\n }\n default: {\n return (\n <article>\n <a class={classAttributes} href={this.url} target={target} aria-label={this.scLabel}>\n <div class={classInfoContainerAttributes}>\n <div class={classInfoContainerHeader}>{this.itemType}</div>\n <div class={classInfoContainerTitle}>{this.itemTitle}</div>\n\n <div class={classInfoContainerLinkContainer}>\n <span class={classInfoContainerLinkIcon}>\n <hy-icon icon={\"hy-icon-link\"} size={15} />\n </span>\n <div class={classInfoContainerLink}>{this.url}</div>\n </div>\n\n {this.itemDescription && (\n <div class={classInfoContainerDescription} innerHTML={this.itemDescription}></div>\n )}\n </div>\n </a>\n </article>\n );\n }\n }\n }\n}\n"],"mappings":"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"}

package/dist/huds-lib/hy-person-card.entry.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{r as i,h as e}from"./index-f84f2a7d.js";import{q as n}from"./utils-2819fd7e.js";import{R as a}from"./index-ecc819ad.js";const t=":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 r=class{constructor(e){i(this,e);this.variant=n.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 a((i=>{for(const e of i){this.checkForMobile(e.contentRect.width)}}));this.ro.observe(document.body)}disconnectedCallback(){this.ro.disconnect()}checkForMobile(i){this.isMobile=i<=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 i=["hy-person-card-container__link",this.variant].join(" ");let a=this.url&&this.url.length>0?"":" inactive";i=i.concat(a);const t=["hy-person-card",this.variant].join(" ");const r=["hy-person-card__info-container__position-title",`hy-person-card__info-container__position-title__${this.variant}`].join(" ");const o=this.isExternal?"_blank":"_self";return e("article",{class:"hy-person-card-container"},e("div",{class:i},this.categoryTitle&&this.variant==n.default&&e("div",{class:"hy-person-card-container__category-title"},this.categoryTitle),e("div",{class:t},e("div",{class:"hy-person-card__image-container"},this.imageUrl?e("a",{class:"hy-person-card__image-container__image",href:this.url,target:o},e("img",{loading:this.disableLazy?"eager":"lazy","aria-hidden":"true",src:this.imageUrl,alt:this.imageAlt})):e("div",{class:"hy-person-card__image-container__no-image"},e("div",{class:"hy-person-card__image-container__no-image__initials","aria-hidden":"true"},this._initials))),e("div",{class:"hy-person-card__info-container"},e("a",{class:"hy-person-card__info-container__full-name",href:this.url,target:o},this._fullName),this.positionTitle&&e("div",{class:r},this.positionTitle),this.department&&(this.variant==n.default||this.variant==n.extended&&!this.isMobile)&&e("div",{class:"hy-person-card__info-container__department"},this.department),this.field&&(this.variant==n.default||this.variant==n.extended&&!this.isMobile)&&e("div",{class:"hy-person-card__info-container__field"},this.field),this.email&&(this.variant==n.default||this.variant==n.extended&&!this.isMobile)&&[e("div",{class:"hy-person-card__info-container__email-container"},e("span",{class:"hy-person-card__info-container__email__icon"},e("hy-icon",{icon:"hy-icon-email",size:16})),e("span",{class:"hy-person-card__info-container__email"},this.email))],this.phone&&(this.variant==n.default||this.variant==n.extended&&!this.isMobile)&&[e("div",{class:"hy-person-card__info-container__phone-container"},e("span",{class:"hy-person-card__info-container__phone__icon"},e("hy-icon",{icon:"hy-icon-phone",size:14})),e("span",{class:"hy-person-card__info-container__phone"},this.phone))])),this.variant==n.extended&&e("div",{class:"hy-person-card hy-person-card__extended-info-container"},this.department&&this.isMobile&&e("div",{class:"hy-person-card__info-container__department"},this.department),this.field&&this.isMobile&&e("div",{class:"hy-person-card__info-container__field"},this.field),this.email&&this.isMobile&&[e("div",{class:"hy-person-card__info-container__email-container"},e("span",{class:"hy-person-card__info-container__email__icon"},e("hy-icon",{icon:"hy-icon-email",size:16})),e("span",{class:"hy-person-card__info-container__email"},this.email))],this.phone&&this.isMobile&&[e("div",{class:"hy-person-card__info-container__phone-container"},e("span",{class:"hy-person-card__info-container__phone__icon"},e("hy-icon",{icon:"hy-icon-phone",size:14})),e("span",{class:"hy-person-card__info-container__phone"},this.phone))],this.aboutInfo&&e("div",{class:"hy-person-card__extended-info-container__about"},e("span",{class:"label"},this.aboutInfoLabel,":"),e("span",null,this.aboutInfo)))))}};r.style=t;export{r as hy_person_card};
+import{r as i,h as e}from"./index-f84f2a7d.js";import{q as n}from"./utils-2819fd7e.js";import{R as a}from"./index-ecc819ad.js";const t=":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 r=class{constructor(e){i(this,e);this.variant=n.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 a((i=>{for(const e of i){this.checkForMobile(e.contentRect.width)}}));this.ro.observe(document.body)}disconnectedCallback(){this.ro.disconnect()}checkForMobile(i){this.isMobile=i<=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 i=["hy-person-card-container__link",this.variant].join(" ");let a=this.url&&this.url.length>0?"":" inactive";i=i.concat(a);const t=["hy-person-card",this.variant].join(" ");const r=["hy-person-card__info-container__position-title",`hy-person-card__info-container__position-title__${this.variant}`].join(" ");const o=this.isExternal?"_blank":"_self";return e("article",{class:"hy-person-card-container"},e("div",{class:i},this.categoryTitle&&this.variant==n.default&&e("div",{class:"hy-person-card-container__category-title"},this.categoryTitle),e("div",{class:t},e("div",{class:"hy-person-card__image-container"},this.imageUrl?e("a",{class:"hy-person-card__image-container__image",href:this.url,target:o},e("img",{loading:this.disableLazy?"eager":"lazy",src:this.imageUrl,alt:this.imageAlt})):e("div",{class:"hy-person-card__image-container__no-image"},e("div",{class:"hy-person-card__image-container__no-image__initials","aria-hidden":"true"},this._initials))),e("div",{class:"hy-person-card__info-container"},e("a",{class:"hy-person-card__info-container__full-name",href:this.url,target:o},this._fullName),this.positionTitle&&e("div",{class:r},this.positionTitle),this.department&&(this.variant==n.default||this.variant==n.extended&&!this.isMobile)&&e("div",{class:"hy-person-card__info-container__department"},this.department),this.field&&(this.variant==n.default||this.variant==n.extended&&!this.isMobile)&&e("div",{class:"hy-person-card__info-container__field"},this.field),this.email&&(this.variant==n.default||this.variant==n.extended&&!this.isMobile)&&[e("div",{class:"hy-person-card__info-container__email-container"},e("span",{class:"hy-person-card__info-container__email__icon"},e("hy-icon",{icon:"hy-icon-email",size:16})),e("span",{class:"hy-person-card__info-container__email"},this.email))],this.phone&&(this.variant==n.default||this.variant==n.extended&&!this.isMobile)&&[e("div",{class:"hy-person-card__info-container__phone-container"},e("span",{class:"hy-person-card__info-container__phone__icon"},e("hy-icon",{icon:"hy-icon-phone",size:14})),e("span",{class:"hy-person-card__info-container__phone"},this.phone))])),this.variant==n.extended&&e("div",{class:"hy-person-card hy-person-card__extended-info-container"},this.department&&this.isMobile&&e("div",{class:"hy-person-card__info-container__department"},this.department),this.field&&this.isMobile&&e("div",{class:"hy-person-card__info-container__field"},this.field),this.email&&this.isMobile&&[e("div",{class:"hy-person-card__info-container__email-container"},e("span",{class:"hy-person-card__info-container__email__icon"},e("hy-icon",{icon:"hy-icon-email",size:16})),e("span",{class:"hy-person-card__info-container__email"},this.email))],this.phone&&this.isMobile&&[e("div",{class:"hy-person-card__info-container__phone-container"},e("span",{class:"hy-person-card__info-container__phone__icon"},e("hy-icon",{icon:"hy-icon-phone",size:14})),e("span",{class:"hy-person-card__info-container__phone"},this.phone))],this.aboutInfo&&e("div",{class:"hy-person-card__extended-info-container__about"},e("span",{class:"label"},this.aboutInfoLabel,":"),e("span",null,this.aboutInfo)))))}};r.style=t;export{r as hy_person_card};
 //# sourceMappingURL=hy-person-card.entry.js.map

package/dist/huds-lib/hy-person-card.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["hyPersonCardCss","HyPersonCard","PersonCardVariants","default","componentDidLoad","this","ro","ResizeObserver","entries","entry","checkForMobile","contentRect","width","observe","document","body","disconnectedCallback","disconnect","size","isMobile","componentWillRender","_fullName","firstName","lastName","_initials","imageUrl","charAt","imageAlt","scLabel","render","classLinkAttributes","variant","join","classIsActive","url","length","concat","classAttributes","classPositionTitle","target","isExternal","h","class","categoryTitle","href","loading","disableLazy","src","alt","positionTitle","department","extended","field","email","icon","phone","aboutInfo","aboutInfoLabel"],"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"],"mappings":"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"}
1	+ {"version":3,"names":["hyPersonCardCss","HyPersonCard","PersonCardVariants","default","componentDidLoad","this","ro","ResizeObserver","entries","entry","checkForMobile","contentRect","width","observe","document","body","disconnectedCallback","disconnect","size","isMobile","componentWillRender","_fullName","firstName","lastName","_initials","imageUrl","charAt","imageAlt","scLabel","render","classLinkAttributes","variant","join","classIsActive","url","length","concat","classAttributes","classPositionTitle","target","isExternal","h","class","categoryTitle","href","loading","disableLazy","src","alt","positionTitle","department","extended","field","email","icon","phone","aboutInfo","aboutInfoLabel"],"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 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"],"mappings":"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"}

package/dist/types/components/hy-search-field/hy-search-field.d.ts CHANGED Viewed

@@ -1,6 +1,8 @@
 export declare class HySearchField {
   el: HTMLElement;
   label: string;
+  ariaLabel: string;
+  resetLabel: string;
   isLabelBold: boolean;
   labelLarge: boolean;
   isLuomusSearch: boolean;

package/dist/types/components.d.ts CHANGED Viewed

@@ -758,6 +758,7 @@ export namespace Components {
         "margin": number;
     }
     interface HySearchField {
+        "ariaLabel": string;
         "inputId": string;
         "isLabelBold": boolean;
         "isLabelHidden"?: boolean;
@@ -766,6 +767,7 @@ export namespace Components {
         "labelLarge": boolean;
         "placeholder": string;
         "prefillParameter": string;
+        "resetLabel": string;
     }
     interface HySectionContainer {
     }
@@ -2242,6 +2244,7 @@ declare namespace LocalJSX {
         "margin"?: number;
     }
     interface HySearchField {
+        "ariaLabel"?: string;
         "inputId"?: string;
         "isLabelBold"?: boolean;
         "isLabelHidden"?: boolean;
@@ -2250,6 +2253,7 @@ declare namespace LocalJSX {
         "labelLarge"?: boolean;
         "placeholder"?: string;
         "prefillParameter"?: string;
+        "resetLabel"?: string;
     }
     interface HySectionContainer {
     }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@itcenteratunihelsinki/huds-lib",
-  "version": "0.8.66",
+  "version": "0.8.68",
   "description": "Helsinki University Design System library",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -68,5 +68,5 @@
       "pre-commit": "pretty-quick --staged"
     }
   },
-  "gitHead": "010cb09335088901f9b548d1c8b50552c084a051"
+  "gitHead": "7a2ac708c199b2f97637924fd4214b6be98519a0"
 }