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

@itcenteratunihelsinki/huds-lib 0.8.66 → 0.8.67

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

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

@@ -1,2 +1,2 @@
-import{r as e,h as i,H as o,g as t}from"./index-f84f2a7d.js";import{j as n}from"./globalScript-5a4b7abf.js";const a=':root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}.hy-dropdown{display:inline-block;min-width:100%;position:relative}@media (min-width: 30rem){.hy-dropdown{min-width:48.3%}}@media (min-width: 75.0625rem){.hy-dropdown{min-width:23.03%}}.hy-dropdown label.hy-dropdown__button-label{font-size:1rem;line-height:20px;font-weight:700;display:block;font-family:var(--main-font-family);letter-spacing:-0.32px;margin-bottom:8px}.hy-dropdown--single .hy-dropdown__panel{width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:330px;min-width:100%}.hy-dropdown__toggle{font-size:0.875rem;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-white);border-radius:0;border:1px solid var(--grayscale-medium-dark);color:var(--link-blue);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);font-weight:600;min-height:40px;height:auto;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;letter-spacing:normal;padding:0 0 0 16px;text-align:left;max-width:280px;width:100%}@media (min-width: 30rem){.hy-dropdown__toggle{font-size:1rem;line-height:24px;min-height:44px}}@media (min-width: 75.0625rem){.hy-dropdown__toggle{min-height:48px}}.hy-dropdown__toggle:hover{border-color:var(--brand-main-light);cursor:pointer}.hy-dropdown__toggle:focus{border-color:var(--brand-main-light);border-style:solid inset solid solid;border-width:2px;outline:0;text-indent:-1px}.hy-dropdown__toggle svg{pointer-events:none}.hy-dropdown__toggle.is-open .hy-dropdown__icon{background-color:var(--brand-main-light);-webkit-transform:rotate(180deg);transform:rotate(180deg)}.hy-dropdown__toggle.is-open .hy-dropdown__icon::before{display:none}.hy-dropdown__toggle.is-open .hy-dropdown__icon svg{fill:var(--grayscale-white)}.hy-dropdown__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-negative:0;flex-shrink:0;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:0 0 0 16px;position:relative;width:40px}.hy-dropdown__icon::before{border-left:0.5px solid var(--grayscale-medium-dark);content:"";display:inline-block;height:65%;left:0;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}@media (min-width: 30rem){.hy-dropdown__icon{height:44px;width:44px}}@media (min-width: 75.0625rem){.hy-dropdown__icon{height:48px;width:48px}}.hy-dropdown__icon svg{fill:var(--link-blue)}@media (min-width: 30rem){.hy-dropdown__icon svg{height:16px;width:16px}}.hy-dropdown__panel{background-color:var(--grayscale-white);-webkit-box-shadow:0 10px 20px 0 rgba(0, 49, 70, 0.2);box-shadow:0 10px 20px 0 rgba(0, 49, 70, 0.2);list-style:none;margin:0;padding:6px;position:absolute;width:100%;z-index:11}.hy-dropdown__panel.is-hidden{display:none;visibility:hidden}.hy-dropdown__panel-item{position:relative}.hy-dropdown__panel-item:not(.is-last){margin-bottom:6px}.hy-dropdown__label{font-size:0.875rem;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-white);border-radius:0;border:1px solid var(--grayscale-medium-dark);color:var(--link-blue);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);font-weight:600;min-height:40px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;letter-spacing:normal;padding:0 16px;text-align:left;width:100%}@media (min-width: 30rem){.hy-dropdown__label{font-size:1rem;line-height:24px}}.hy-dropdown__label-icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:none !important;-ms-flex-negative:0;flex-shrink:0;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;visibility:hidden;width:40px}.hy-dropdown__checkbox{height:100%;margin:0;opacity:0;position:absolute;width:100%;z-index:10}.hy-dropdown__checkbox:checked+label{border-color:var(--grayscale-black);border-style:solid inset solid solid;border-width:2px;color:var(--grayscale-black);outline:0;text-indent:-1px}.hy-dropdown__checkbox:checked+label .hy-dropdown__label-icon{display:-webkit-inline-box !important;display:-ms-inline-flexbox !important;display:inline-flex !important;visibility:visible}.hy-dropdown__checkbox:hover{cursor:pointer}.hy-dropdown__checkbox:hover+label{border-color:var(--brand-main-light)}.hy-dropdown__checkbox:focus+label{border-color:var(--brand-main-light);border-style:solid inset solid solid;border-width:2px;outline:0;text-indent:-1px}';const r=class{constructor(i){e(this,i);this.single=false;this.dropdownLabel=null;this.dropdownId="dropdownToggle";this.dropdownOptions=undefined;this.defaultLabel="All";this.defaultOption=null;this.isPanelOpen=false;this.isChecked=false;this.currentSingle=[{id:0,label:this.defaultLabel,value:0}]}async componentWillLoad(){this._dropdownOptions=await n(this.dropdownOptions)}componentWillUpdate(){const e=this.el.querySelectorAll(".hy-dropdown__checkbox");if(e){if([...e].some((e=>e.checked==true))){this.isChecked=true}else{this.isChecked=false}}}watchPropHandler(e,i){if(!this.single)return;if(e!==i){const i=this.el.getElementsByClassName("hy-dropdown__checkbox");Array.from(i).filter((i=>{if(i.id==e){i.checked=true;this.currentSingle=this._dropdownOptions.filter((i=>i.id==e));return}return null}))}}handlePanelToggle(){this.isPanelOpen=!this.isPanelOpen}handleClick(e){const i=this.el.querySelector(`#${this.dropdownId}`);const o=this.el.querySelector(".hy-dropdown__panel");const t=this.el.querySelectorAll(".hy-dropdown__checkbox");const n=this.el.querySelector(".hy-dropdown__icon");const{target:a}=e;const r=[i,o,n,...t];if(this.isPanelOpen&&!r.includes(a)){this.isPanelOpen=false}e.stopPropagation()}handleSingleClick(e){if(!this.single||!this.isPanelOpen)return;const i=this.el.getElementsByClassName("hy-dropdown__checkbox");const o=[...i];const{target:t}=e;if(!o.includes(t))return;Array.from(i).filter((e=>{if(e.id==t.id){if(!e.checked){this.currentSingle=[{id:null,label:this.defaultLabel,value:null}];return}this.currentSingle=this._dropdownOptions.filter((e=>e.id==t.id));return}if(e.id!==t.id&&e.checked){e.checked=false;return}return null}));e.stopPropagation()}render(){const{label:e,id:t,value:n}=this.currentSingle[0];const a=["hy-dropdown",this.single?"hy-dropdown--single":""].join(" ");if(this.single){return i(o,{class:a},this.dropdownLabel&&i("label",{class:"hy-dropdown__button-label",htmlFor:this.dropdownId},this.dropdownLabel),i("button",{id:this.dropdownId,class:`hy-dropdown__toggle ${this.isPanelOpen?"is-open":""}`,"aria-expanded":`${this.isPanelOpen||false}`,"aria-haspopup":"true","aria-controls":"dropdownPanel",onClick:()=>this.handlePanelToggle(),"aria-label":`${!this.isPanelOpen?"Open":"Close"} dropdown`,"data-current-id":t,"data-current-value":n,value:t,type:"button"},e,i("hy-icon",{class:"hy-dropdown__icon",icon:"hy-icon-caret-down",size:14,"aria-hidden":"true"})),i("hy-dropdown-panel",{"checkbox-checked":this.isChecked?"true":"false","is-hidden":!this.isPanelOpen},this._dropdownOptions.map((({id:e,label:o,value:t},n)=>i("hy-dropdown-panel-item",{"dropdown-item-id":e,"dropdown-item-label":o,"dropdown-item-value":t,"is-last":this._dropdownOptions.length-1===n})))))}else{return i(o,{class:a},i("button",{id:this.dropdownId,class:`hy-dropdown__toggle ${this.isPanelOpen?"is-open":""}`,"aria-expanded":`${this.isPanelOpen||false}`,"aria-haspopup":"true","aria-controls":"dropdownPanel",onClick:()=>this.handlePanelToggle(),"aria-label":`${!this.isPanelOpen?"Open":"Close"} dropdown`,type:"button"},this.dropdownLabel&&this.dropdownLabel,i("hy-icon",{class:"hy-dropdown__icon",icon:"hy-icon-caret-down",size:14,"aria-hidden":"true"})),i("hy-dropdown-panel",{"checkbox-checked":this.isChecked?"true":"false","is-hidden":!this.isPanelOpen},this._dropdownOptions.map((({id:e,label:o,value:t},n)=>i("hy-dropdown-panel-item",{"dropdown-item-id":e,"dropdown-item-label":o,"dropdown-item-value":t,"is-last":this._dropdownOptions.length-1===n})))))}}get el(){return t(this)}static get watchers(){return{defaultOption:["watchPropHandler"]}}};r.style=a;const d=class{constructor(i){e(this,i);this.isHidden=undefined}render(){return i("ul",{id:"dropdownPanel",class:`hy-dropdown__panel ${this.isHidden?"is-hidden":""}`,"aria-hidden":`${this.isHidden||false}`,role:"region","aria-labelledby":"dropdownToggle"},i("slot",null))}};const l=class{constructor(i){e(this,i);this.isLast=false;this.dropdownItemId=undefined;this.dropdownItemValue=undefined;this.dropdownItemLabel=undefined}render(){return i("li",{class:`hy-dropdown__panel-item ${this.isLast?"is-last":""}`},i("input",{type:"checkbox",class:"hy-dropdown__checkbox",id:`${this.dropdownItemId}`,value:`${this.dropdownItemValue}`}),i("label",{class:"hy-dropdown__label",htmlFor:`${this.dropdownItemId}`},this.dropdownItemLabel,i("hy-icon",{class:"hy-dropdown__label-icon",icon:"hy-icon-done",size:14,"aria-hidden":"true"})))}};export{r as hy_dropdown,d as hy_dropdown_panel,l as hy_dropdown_panel_item};
+import{r as e,h as i,H as t,g as o}from"./index-f84f2a7d.js";import{j as n}from"./globalScript-5a4b7abf.js";const a=':root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}.hy-dropdown{display:inline-block;min-width:100%;position:relative}@media (min-width: 30rem){.hy-dropdown{min-width:48.3%}}@media (min-width: 75.0625rem){.hy-dropdown{min-width:23.03%}}.hy-dropdown label.hy-dropdown__button-label{font-size:1rem;line-height:20px;font-weight:700;display:block;font-family:var(--main-font-family);letter-spacing:-0.32px;margin-bottom:8px}.hy-dropdown--single .hy-dropdown__panel{width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:330px;min-width:100%}.hy-dropdown__toggle{font-size:0.875rem;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-white);border-radius:0;border:1px solid var(--grayscale-medium-dark);color:var(--link-blue);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);font-weight:600;min-height:40px;height:auto;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;letter-spacing:normal;padding:0 0 0 16px;text-align:left;max-width:280px;width:100%}@media (min-width: 30rem){.hy-dropdown__toggle{font-size:1rem;line-height:24px;min-height:44px}}@media (min-width: 75.0625rem){.hy-dropdown__toggle{min-height:48px}}.hy-dropdown__toggle:hover{border-color:var(--brand-main-light);cursor:pointer}.hy-dropdown__toggle:focus{border-color:var(--brand-main-light);border-style:solid inset solid solid;border-width:2px;outline:0;text-indent:-1px}.hy-dropdown__toggle svg{pointer-events:none}.hy-dropdown__toggle.is-open .hy-dropdown__icon{background-color:var(--brand-main-light);-webkit-transform:rotate(180deg);transform:rotate(180deg)}.hy-dropdown__toggle.is-open .hy-dropdown__icon::before{display:none}.hy-dropdown__toggle.is-open .hy-dropdown__icon svg{fill:var(--grayscale-white)}.hy-dropdown__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-negative:0;flex-shrink:0;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:0 0 0 16px;position:relative;width:40px}.hy-dropdown__icon::before{border-left:0.5px solid var(--grayscale-medium-dark);content:"";display:inline-block;height:65%;left:0;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}@media (min-width: 30rem){.hy-dropdown__icon{height:44px;width:44px}}@media (min-width: 75.0625rem){.hy-dropdown__icon{height:48px;width:48px}}.hy-dropdown__icon svg{fill:var(--link-blue)}@media (min-width: 30rem){.hy-dropdown__icon svg{height:16px;width:16px}}.hy-dropdown__panel{background-color:var(--grayscale-white);-webkit-box-shadow:0 10px 20px 0 rgba(0, 49, 70, 0.2);box-shadow:0 10px 20px 0 rgba(0, 49, 70, 0.2);list-style:none;margin:0;padding:6px;position:absolute;width:100%;z-index:11}.hy-dropdown__panel.is-hidden{display:none;visibility:hidden}.hy-dropdown__panel-item{position:relative}.hy-dropdown__panel-item:not(.is-last){margin-bottom:6px}.hy-dropdown__label{font-size:0.875rem;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-white);border-radius:0;border:1px solid var(--grayscale-medium-dark);color:var(--link-blue);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);font-weight:600;min-height:40px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;letter-spacing:normal;padding:0 16px;text-align:left;width:100%}@media (min-width: 30rem){.hy-dropdown__label{font-size:1rem;line-height:24px}}.hy-dropdown__label-icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:none !important;-ms-flex-negative:0;flex-shrink:0;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;visibility:hidden;width:40px}.hy-dropdown__checkbox{height:100%;margin:0;opacity:0;position:absolute;width:100%;z-index:10}.hy-dropdown__checkbox:checked+label{border-color:var(--grayscale-black);border-style:solid inset solid solid;border-width:2px;color:var(--grayscale-black);outline:0;text-indent:-1px}.hy-dropdown__checkbox:checked+label .hy-dropdown__label-icon{display:-webkit-inline-box !important;display:-ms-inline-flexbox !important;display:inline-flex !important;visibility:visible}.hy-dropdown__checkbox:hover{cursor:pointer}.hy-dropdown__checkbox:hover+label{border-color:var(--brand-main-light)}.hy-dropdown__checkbox:focus+label{border-color:var(--brand-main-light);border-style:solid inset solid solid;border-width:2px;outline:0;text-indent:-1px}';const r=class{constructor(i){e(this,i);this.single=false;this.dropdownLabel=null;this.dropdownId="dropdownToggle";this.dropdownOptions=undefined;this.defaultLabel="All";this.defaultOption=null;this.isPanelOpen=false;this.isChecked=false;this.currentSingle=[{id:0,label:this.defaultLabel,value:0}]}async componentWillLoad(){this._dropdownOptions=await n(this.dropdownOptions)}componentWillUpdate(){const e=this.el.querySelectorAll(".hy-dropdown__checkbox");if(e){if([...e].some((e=>e.checked==true))){this.isChecked=true}else{this.isChecked=false}}}watchPropHandler(e,i){if(!this.single)return;if(e!==i){const i=this.el.getElementsByClassName("hy-dropdown__checkbox");Array.from(i).filter((i=>{if(i.id==e){i.checked=true;this.currentSingle=this._dropdownOptions.filter((i=>i.id==e));return}return null}))}}handlePanelToggle(){this.isPanelOpen=!this.isPanelOpen}handleClick(e){const i=this.el.querySelector(`#${this.dropdownId}`);const t=this.el.querySelector(".hy-dropdown__panel");const o=this.el.querySelectorAll(".hy-dropdown__checkbox");const n=this.el.querySelector(".hy-dropdown__icon");const{target:a}=e;const r=[i,t,n,...o];if(this.isPanelOpen&&!r.includes(a)){this.isPanelOpen=false}e.stopPropagation()}handleSingleClick(e){if(!this.single||!this.isPanelOpen)return;const i=this.el.getElementsByClassName("hy-dropdown__checkbox");const t=[...i];const{target:o}=e;if(!t.includes(o))return;Array.from(i).filter((e=>{if(e.id==o.id){if(!e.checked){this.currentSingle=[{id:null,label:this.defaultLabel,value:null}];return}this.currentSingle=this._dropdownOptions.filter((e=>e.id==o.id));return}if(e.id!==o.id&&e.checked){e.checked=false;return}return null}));e.stopPropagation()}render(){const{label:e,id:o,value:n}=this.currentSingle[0];const a=["hy-dropdown",this.single?"hy-dropdown--single":""].join(" ");if(this.single){return i(t,{class:a},this.dropdownLabel&&i("label",{class:"hy-dropdown__button-label",htmlFor:this.dropdownId},this.dropdownLabel),i("button",{id:this.dropdownId,class:`hy-dropdown__toggle ${this.isPanelOpen?"is-open":""}`,"aria-expanded":`${this.isPanelOpen||false}`,"aria-controls":"dropdownPanel",onClick:()=>this.handlePanelToggle(),"aria-label":this.dropdownLabel,"data-current-id":o,"data-current-value":n,value:o,type:"button"},e,i("hy-icon",{class:"hy-dropdown__icon",icon:"hy-icon-caret-down",size:14,"aria-hidden":"true"})),i("hy-dropdown-panel",{"checkbox-checked":this.isChecked?"true":"false","is-hidden":!this.isPanelOpen},this._dropdownOptions.map((({id:e,label:t,value:o},n)=>i("hy-dropdown-panel-item",{"dropdown-item-id":e,"dropdown-item-label":t,"dropdown-item-value":o,"is-last":this._dropdownOptions.length-1===n})))))}else{return i(t,{class:a},i("button",{id:this.dropdownId,class:`hy-dropdown__toggle ${this.isPanelOpen?"is-open":""}`,"aria-expanded":`${this.isPanelOpen||false}`,"aria-controls":"dropdownPanel",onClick:()=>this.handlePanelToggle(),"aria-label":this.dropdownLabel,type:"button"},this.dropdownLabel&&this.dropdownLabel,i("hy-icon",{class:"hy-dropdown__icon",icon:"hy-icon-caret-down",size:14,"aria-hidden":"true"})),i("hy-dropdown-panel",{"checkbox-checked":this.isChecked?"true":"false","is-hidden":!this.isPanelOpen},this._dropdownOptions.map((({id:e,label:t,value:o},n)=>i("hy-dropdown-panel-item",{"dropdown-item-id":e,"dropdown-item-label":t,"dropdown-item-value":o,"is-last":this._dropdownOptions.length-1===n})))))}}get el(){return o(this)}static get watchers(){return{defaultOption:["watchPropHandler"]}}};r.style=a;const d=class{constructor(i){e(this,i);this.isHidden=undefined}render(){return i("ul",{id:"dropdownPanel",class:`hy-dropdown__panel ${this.isHidden?"is-hidden":""}`,"aria-hidden":`${this.isHidden||false}`,role:"region","aria-labelledby":"dropdownToggle"},i("slot",null))}};const l=class{constructor(i){e(this,i);this.isLast=false;this.dropdownItemId=undefined;this.dropdownItemValue=undefined;this.dropdownItemLabel=undefined}render(){return i("li",{class:`hy-dropdown__panel-item ${this.isLast?"is-last":""}`},i("input",{type:"checkbox",class:"hy-dropdown__checkbox",id:`${this.dropdownItemId}`,value:`${this.dropdownItemValue}`}),i("label",{class:"hy-dropdown__label",htmlFor:`${this.dropdownItemId}`},this.dropdownItemLabel,i("hy-icon",{class:"hy-dropdown__label-icon",icon:"hy-icon-done",size:14,"aria-hidden":"true"})))}};export{r as hy_dropdown,d as hy_dropdown_panel,l as hy_dropdown_panel_item};
 //# sourceMappingURL=hy-dropdown_3.entry.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"names":["hyDropdownCss","HyDropdown","id","label","this","defaultLabel","value","async","_dropdownOptions","jsonParserWorker","dropdownOptions","componentWillUpdate","items","el","querySelectorAll","some","item","checked","isChecked","watchPropHandler","newValue","oldValue","single","dropdownPanelCheckboxElements","getElementsByClassName","Array","from","filter","currentSingle","option","handlePanelToggle","isPanelOpen","handleClick","event","dropdownToggleButtonElement","querySelector","dropdownId","dropdownPanelElement","dropdownToggleButtonIconElement","target","allowedElements","includes","stopPropagation","handleSingleClick","render","currentLabel","currentId","currentValue","classAttributes","join","h","Host","class","dropdownLabel","htmlFor","onClick","type","icon","size","map","index","length","HyDropdownPanel","isHidden","role","HyDropdownPanelItem","isLast","dropdownItemId","dropdownItemValue","dropdownItemLabel"],"sources":["./src/components/hy-dropdown/hy-dropdown.scss?tag=hy-dropdown","./src/components/hy-dropdown/hy-dropdown.tsx","./src/components/hy-dropdown/hy-dropdown.panel.tsx","./src/components/hy-dropdown/hy-dropdown.panel.item.tsx"],"sourcesContent":[".hy-dropdown {\n display: inline-block;\n min-width: 100%;\n position: relative;\n\n @include breakpoint($narrow) {\n min-width: 48.3%;\n }\n\n @include breakpoint($extrawide) {\n min-width: 23.03%;\n }\n\n label.hy-dropdown__button-label {\n @include font-size(16px, 20px);\n @include font-weight($bold);\n\n display: block;\n font-family: var(--main-font-family);\n letter-spacing: -0.32px;\n margin-bottom: 8px;\n }\n\n &--single {\n .hy-dropdown__panel {\n width: max-content;\n max-width: 330px;\n min-width: 100%;\n }\n }\n}\n\n.hy-dropdown__toggle {\n @include font-size(14px, 24px);\n align-items: center;\n background-color: var(--grayscale-white);\n border-radius: 0;\n border: 1px solid var(--grayscale-medium-dark);\n color: var(--link-blue);\n display: inline-flex;\n font-family: var(--main-font-family);\n font-weight: $semibold;\n min-height: 40px;\n height: auto;\n justify-content: space-between;\n letter-spacing: normal;\n padding: 0 0 0 16px;\n text-align: left;\n max-width: 280px;\n width: 100%;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px);\n min-height: 44px;\n }\n\n @include breakpoint($extrawide) {\n min-height: 48px;\n }\n\n &:hover {\n border-color: var(--brand-main-light);\n cursor: pointer;\n }\n\n &:focus {\n border-color: var(--brand-main-light);\n border-style: solid inset solid solid;\n border-width: 2px;\n outline: 0;\n text-indent: -1px; // Text stays in place.\n }\n\n svg {\n pointer-events: none;\n }\n\n &.is-open {\n .hy-dropdown__icon {\n background-color: var(--brand-main-light);\n transform: rotate(180deg);\n\n &::before {\n display: none;\n }\n\n svg {\n fill: var(--grayscale-white);\n }\n }\n }\n}\n\n.hy-dropdown__icon {\n align-items: center;\n display: inline-flex;\n flex-shrink: 0;\n height: 40px;\n justify-content: center;\n margin: 0 0 0 16px;\n position: relative;\n width: 40px;\n\n &::before {\n //border-left: 1px dashed var(--grayscale-medium-dark);\n //Line weight 0,5 px; Line color #979797\n border-left: 0.5px solid var(--grayscale-medium-dark);\n content: \"\";\n display: inline-block;\n height: 65%;\n left: 0;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n }\n\n @include breakpoint($narrow) {\n height: 44px;\n width: 44px;\n }\n\n @include breakpoint($extrawide) {\n height: 48px;\n width: 48px;\n }\n\n svg {\n fill: var(--link-blue);\n\n @include breakpoint($narrow) {\n height: 16px;\n width: 16px;\n }\n }\n}\n\n.hy-dropdown__panel {\n background-color: var(--grayscale-white);\n box-shadow: 0 10px 20px 0 rgba(0, 49, 70, 0.2);\n list-style: none;\n margin: 0;\n padding: 6px;\n position: absolute;\n width: 100%;\n z-index: 11;\n\n &.is-hidden {\n display: none;\n visibility: hidden;\n }\n}\n\n.hy-dropdown__panel-item {\n position: relative;\n\n &:not(.is-last) {\n margin-bottom: 6px;\n }\n}\n\n.hy-dropdown__label {\n @include font-size(14px, 24px);\n align-items: center;\n background-color: var(--grayscale-white);\n border-radius: 0;\n border: 1px solid var(--grayscale-medium-dark);\n color: var(--link-blue);\n display: inline-flex;\n font-family: var(--main-font-family);\n font-weight: $semibold;\n min-height: 40px;\n justify-content: space-between;\n letter-spacing: normal;\n padding: 0 16px;\n text-align: left;\n width: 100%;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px);\n }\n}\n\n.hy-dropdown__label-icon {\n align-items: center;\n display: none !important;\n flex-shrink: 0;\n height: 40px;\n justify-content: center;\n position: relative;\n visibility: hidden;\n width: 40px;\n}\n\n.hy-dropdown__checkbox {\n height: 100%;\n margin: 0;\n opacity: 0;\n position: absolute;\n width: 100%;\n z-index: 10;\n\n &:checked {\n & + label {\n border-color: var(--grayscale-black);\n border-style: solid inset solid solid;\n border-width: 2px;\n color: var(--grayscale-black);\n outline: 0;\n text-indent: -1px; // Text stays in place.\n\n .hy-dropdown__label-icon {\n display: inline-flex !important;\n visibility: visible;\n }\n }\n }\n\n &:hover {\n cursor: pointer;\n\n & + label {\n border-color: var(--brand-main-light);\n }\n }\n\n &:focus {\n & + label {\n border-color: var(--brand-main-light);\n border-style: solid inset solid solid;\n border-width: 2px;\n outline: 0;\n text-indent: -1px; // Text stays in place.\n }\n }\n}\n","import {Component, Element, Host, h, State, Listen, Prop, Watch} from \"@stencil/core\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\n\nexport interface IDropdownItem {\n id: string \| number;\n label: string;\n value: string \| number;\n}\n\nexport interface DefaultValue {\n id: string \| number;\n label: string;\n value: string \| number;\n}\n\n@Component({\n tag: \"hy-dropdown\",\n styleUrl: \"hy-dropdown.scss\",\n shadow: false,\n})\nexport class HyDropdown {\n private _dropdownOptions: IDropdownItem[];\n @Element() el: HTMLElement;\n @Prop() single: boolean = false;\n @Prop() dropdownLabel: string = null;\n @Prop() dropdownId: string = \"dropdownToggle\";\n @Prop() dropdownOptions: IDropdownItem[] \| string;\n @Prop() defaultLabel: string = \"All\";\n @Prop({mutable: true}) defaultOption: string \| number = null;\n @State() isPanelOpen: boolean = false;\n @State() isChecked: boolean = false;\n @State() currentSingle: DefaultValue[] = [{id: 0, label: this.defaultLabel, value: 0}];\n\n async componentWillLoad() {\n this._dropdownOptions = await jsonParserWorker(this.dropdownOptions);\n }\n\n componentWillUpdate() {\n const items = this.el.querySelectorAll(\".hy-dropdown__checkbox\") as any;\n if (items) {\n if ([...items].some((item) => item.checked == true)) {\n this.isChecked = true;\n } else {\n this.isChecked = false;\n }\n }\n }\n\n @Watch(\"defaultOption\")\n watchPropHandler(newValue: string \| number, oldValue: string \| number) {\n if (!this.single) return;\n\n if (newValue !== oldValue) {\n const dropdownPanelCheckboxElements = this.el.getElementsByClassName(\"hy-dropdown__checkbox\") as HTMLCollectionOf<\n HTMLInputElement\n >;\n\n Array.from(dropdownPanelCheckboxElements).filter((item) => {\n if (item.id == newValue) {\n item.checked = true;\n this.currentSingle = this._dropdownOptions.filter((option) => option.id == newValue) as any;\n return;\n }\n return null;\n });\n }\n }\n\n handlePanelToggle() {\n this.isPanelOpen = !this.isPanelOpen;\n }\n\n @Listen(\"click\", {target: \"window\"})\n handleClick(event) {\n const dropdownToggleButtonElement = this.el.querySelector(`#${this.dropdownId}`) as HTMLButtonElement;\n const dropdownPanelElement = this.el.querySelector(\".hy-dropdown__panel\") as HTMLElement;\n const dropdownPanelCheckboxElements = this.el.querySelectorAll(\".hy-dropdown__checkbox\");\n const dropdownToggleButtonIconElement = this.el.querySelector(\".hy-dropdown__icon\") as HTMLElement;\n\n const {target} = event;\n\n const allowedElements = [\n dropdownToggleButtonElement,\n dropdownPanelElement,\n dropdownToggleButtonIconElement,\n ...dropdownPanelCheckboxElements, // Spread (\"copy\") items to allowedElement array.\n ];\n\n if (this.isPanelOpen && !allowedElements.includes(target)) {\n this.isPanelOpen = false;\n }\n event.stopPropagation();\n }\n\n @Listen(\"click\", {capture: true})\n handleSingleClick(event) {\n if (!this.single \|\| !this.isPanelOpen) return;\n const dropdownPanelCheckboxElements = this.el.getElementsByClassName(\"hy-dropdown__checkbox\") as HTMLCollectionOf<\n HTMLInputElement\n >;\n const allowedElements = [...dropdownPanelCheckboxElements];\n const {target} = event;\n if (!allowedElements.includes(target)) return;\n Array.from(dropdownPanelCheckboxElements).filter((item) => {\n if (item.id == target.id) {\n if (!item.checked) {\n this.currentSingle = [{id: null, label: this.defaultLabel, value: null}];\n return;\n }\n this.currentSingle = this._dropdownOptions.filter((option) => option.id == target.id) as any;\n return;\n }\n if (item.id !== target.id && item.checked) {\n item.checked = false;\n return;\n }\n return null;\n });\n\n event.stopPropagation();\n }\n\n render() {\n const {label: currentLabel, id: currentId, value: currentValue} = this.currentSingle[0];\n const classAttributes = [\"hy-dropdown\", this.single ? \"hy-dropdown--single\" : \"\"].join(\" \");\n\n if (this.single) {\n return (\n <Host class={classAttributes}>\n {this.dropdownLabel && (\n <label class=\"hy-dropdown__button-label\" htmlFor={this.dropdownId}>\n {this.dropdownLabel}\n </label>\n )}\n <button\n id={this.dropdownId}\n class={`hy-dropdown__toggle ${this.isPanelOpen ? \"is-open\" : \"\"}`}\n aria-expanded={`${this.isPanelOpen \|\| false}`}\n aria-haspopup=\"true\"\n aria-controls=\"dropdownPanel\"\n onClick={() => this.handlePanelToggle()}\n aria-label={`${!this.isPanelOpen ? \"Open\" : \"Close\"} dropdown`}\n data-current-id={currentId}\n data-current-value={currentValue}\n value={currentId}\n type=\"button\"\n >\n {currentLabel}\n <hy-icon class=\"hy-dropdown__icon\" icon={\"hy-icon-caret-down\"} size={14} aria-hidden=\"true\" />\n </button>\n <hy-dropdown-panel checkbox-checked={this.isChecked ? \"true\" : \"false\"} is-hidden={!this.isPanelOpen}>\n {this._dropdownOptions.map(({id, label, value}, index) => (\n <hy-dropdown-panel-item\n dropdown-item-id={id}\n dropdown-item-label={label}\n dropdown-item-value={value}\n is-last={this._dropdownOptions.length - 1 === index}\n />\n ))}\n </hy-dropdown-panel>\n </Host>\n );\n } else {\n return (\n <Host class={classAttributes}>\n <button\n id={this.dropdownId}\n class={`hy-dropdown__toggle ${this.isPanelOpen ? \"is-open\" : \"\"}`}\n aria-expanded={`${this.isPanelOpen \|\| false}`}\n aria-haspopup=\"true\"\n aria-controls=\"dropdownPanel\"\n onClick={() => this.handlePanelToggle()}\n aria-label={`${!this.isPanelOpen ? \"Open\" : \"Close\"} dropdown`}\n type=\"button\"\n >\n {this.dropdownLabel && this.dropdownLabel}\n <hy-icon class=\"hy-dropdown__icon\" icon={\"hy-icon-caret-down\"} size={14} aria-hidden=\"true\" />\n </button>\n <hy-dropdown-panel checkbox-checked={this.isChecked ? \"true\" : \"false\"} is-hidden={!this.isPanelOpen}>\n {this._dropdownOptions.map(({id, label, value}, index) => (\n <hy-dropdown-panel-item\n dropdown-item-id={id}\n dropdown-item-label={label}\n dropdown-item-value={value}\n is-last={this._dropdownOptions.length - 1 === index}\n />\n ))}\n </hy-dropdown-panel>\n </Host>\n );\n }\n }\n}\n","import {Component, h, Prop} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-dropdown-panel\",\n shadow: false,\n})\nexport class HyDropdownPanel {\n @Prop() isHidden: boolean;\n\n render() {\n return (\n <ul\n id=\"dropdownPanel\"\n class={`hy-dropdown__panel ${this.isHidden ? \"is-hidden\" : \"\"}`}\n aria-hidden={`${this.isHidden \|\| false}`}\n role=\"region\"\n aria-labelledby=\"dropdownToggle\"\n >\n <slot />\n </ul>\n );\n }\n}\n","import {Component, h, Prop} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-dropdown-panel-item\",\n shadow: false,\n})\nexport class HyDropdownPanelItem {\n @Prop() isLast?: boolean = false;\n @Prop() dropdownItemId: string \| number;\n @Prop() dropdownItemValue: string \| number;\n @Prop() dropdownItemLabel: string;\n\n render() {\n return (\n <li class={`hy-dropdown__panel-item ${this.isLast ? \"is-last\" : \"\"}`}>\n <input\n type=\"checkbox\"\n class=\"hy-dropdown__checkbox\"\n id={`${this.dropdownItemId}`}\n value={`${this.dropdownItemValue}`}\n />\n <label class=\"hy-dropdown__label\" htmlFor={`${this.dropdownItemId}`}>\n {this.dropdownItemLabel}\n <hy-icon class=\"hy-dropdown__label-icon\" icon={\"hy-icon-done\"} size={14} aria-hidden=\"true\" />\n </label>\n </li>\n );\n }\n}\n"],"mappings":"4GAAA,MAAMA,EAAgB,2qL,MCoBTC,EAAU,M,qCAGK,M,mBACM,K,gBACH,iB,iDAEE,M,mBACyB,K,iBACxB,M,eACF,M,mBACW,CAAC,CAACC,GAAI,EAAGC,MAAOC,KAAKC,aAAcC,MAAO,G,CAEnFC,0BACEH,KAAKI,uBAAyBC,EAAiBL,KAAKM,gB,CAGtDC,sBACE,MAAMC,EAAQR,KAAKS,GAAGC,iBAAiB,0BACvC,GAAIF,EAAO,CACT,GAAI,IAAIA,GAAOG,MAAMC,GAASA,EAAKC,SAAW,OAAO,CACnDb,KAAKc,UAAY,I,KACZ,CACLd,KAAKc,UAAY,K,GAMvBC,iBAAiBC,EAA2BC,GAC1C,IAAKjB,KAAKkB,OAAQ,OAElB,GAAIF,IAAaC,EAAU,CACzB,MAAME,EAAgCnB,KAAKS,GAAGW,uBAAuB,yBAIrEC,MAAMC,KAAKH,GAA+BI,QAAQX,IAChD,GAAIA,EAAKd,IAAMkB,EAAU,CACvBJ,EAAKC,QAAU,KACfb,KAAKwB,cAAgBxB,KAAKI,iBAAiBmB,QAAQE,GAAWA,EAAO3B,IAAMkB,IAC3E,M,CAEF,OAAO,IAAI,G,EAKjBU,oBACE1B,KAAK2B,aAAe3B,KAAK2B,W,CAI3BC,YAAYC,GACV,MAAMC,EAA8B9B,KAAKS,GAAGsB,cAAc,IAAI/B,KAAKgC,cACnE,MAAMC,EAAuBjC,KAAKS,GAAGsB,cAAc,uBACnD,MAAMZ,EAAgCnB,KAAKS,GAAGC,iBAAiB,0BAC/D,MAAMwB,EAAkClC,KAAKS,GAAGsB,cAAc,sBAE9D,MAAMI,OAACA,GAAUN,EAEjB,MAAMO,EAAkB,CACtBN,EACAG,EACAC,KACGf,GAGL,GAAInB,KAAK2B,cAAgBS,EAAgBC,SAASF,GAAS,CACzDnC,KAAK2B,YAAc,K,CAErBE,EAAMS,iB,CAIRC,kBAAkBV,GAChB,IAAK7B,KAAKkB,SAAWlB,KAAK2B,YAAa,OACvC,MAAMR,EAAgCnB,KAAKS,GAAGW,uBAAuB,yBAGrE,MAAMgB,EAAkB,IAAIjB,GAC5B,MAAMgB,OAACA,GAAUN,EACjB,IAAKO,EAAgBC,SAASF,GAAS,OACvCd,MAAMC,KAAKH,GAA+BI,QAAQX,IAChD,GAAIA,EAAKd,IAAMqC,EAAOrC,GAAI,CACxB,IAAKc,EAAKC,QAAS,CACjBb,KAAKwB,cAAgB,CAAC,CAAC1B,GAAI,KAAMC,MAAOC,KAAKC,aAAcC,MAAO,OAClE,M,CAEFF,KAAKwB,cAAgBxB,KAAKI,iBAAiBmB,QAAQE,GAAWA,EAAO3B,IAAMqC,EAAOrC,KAClF,M,CAEF,GAAIc,EAAKd,KAAOqC,EAAOrC,IAAMc,EAAKC,QAAS,CACzCD,EAAKC,QAAU,MACf,M,CAEF,OAAO,IAAI,IAGbgB,EAAMS,iB,CAGRE,SACE,MAAOzC,MAAO0C,EAAc3C,GAAI4C,EAAWxC,MAAOyC,GAAgB3C,KAAKwB,cAAc,GACrF,MAAMoB,EAAkB,CAAC,cAAe5C,KAAKkB,OAAS,sBAAwB,IAAI2B,KAAK,KAEvF,GAAI7C,KAAKkB,OAAQ,CACf,OACE4B,EAACC,EAAI,CAACC,MAAOJ,GACV5C,KAAKiD,eACJH,EAAA,SAAOE,MAAM,4BAA4BE,QAASlD,KAAKgC,YACpDhC,KAAKiD,eAGVH,EAAA,UACEhD,GAAIE,KAAKgC,WACTgB,MAAO,uBAAuBhD,KAAK2B,YAAc,UAAY,KAAI,gBAClD,GAAG3B,KAAK2B,aAAe,QAAO,gBAC/B,OAAM,gBACN,gBACdwB,QAAS,IAAMnD,KAAK0B,oBAAmB,aAC3B,IAAI1B,KAAK2B,YAAc,OAAS,mBAAkB,kBAC7Ce,EAAS,qBACNC,EACpBzC,MAAOwC,EACPU,KAAK,UAEJX,EACDK,EAAA,WAASE,MAAM,oBAAoBK,KAAM,qBAAsBC,KAAM,GAAE,cAAc,UAEvFR,EAAA,wCAAqC9C,KAAKc,UAAY,OAAS,QAAO,aAAcd,KAAK2B,aACtF3B,KAAKI,iBAAiBmD,KAAI,EAAEzD,KAAIC,QAAOG,SAAQsD,IAC9CV,EAAA,6CACoBhD,EAAE,sBACCC,EAAK,sBACLG,EAAK,UACjBF,KAAKI,iBAAiBqD,OAAS,IAAMD,O,KAMnD,CACL,OACEV,EAACC,EAAI,CAACC,MAAOJ,GACXE,EAAA,UACEhD,GAAIE,KAAKgC,WACTgB,MAAO,uBAAuBhD,KAAK2B,YAAc,UAAY,KAAI,gBAClD,GAAG3B,KAAK2B,aAAe,QAAO,gBAC/B,OAAM,gBACN,gBACdwB,QAAS,IAAMnD,KAAK0B,oBAAmB,aAC3B,IAAI1B,KAAK2B,YAAc,OAAS,mBAC5CyB,KAAK,UAEJpD,KAAKiD,eAAiBjD,KAAKiD,cAC5BH,EAAA,WAASE,MAAM,oBAAoBK,KAAM,qBAAsBC,KAAM,GAAE,cAAc,UAEvFR,EAAA,wCAAqC9C,KAAKc,UAAY,OAAS,QAAO,aAAcd,KAAK2B,aACtF3B,KAAKI,iBAAiBmD,KAAI,EAAEzD,KAAIC,QAAOG,SAAQsD,IAC9CV,EAAA,6CACoBhD,EAAE,sBACCC,EAAK,sBACLG,EAAK,UACjBF,KAAKI,iBAAiBqD,OAAS,IAAMD,O,6GClLjDE,EAAe,M,iDAG1BlB,SACE,OACEM,EAAA,MACEhD,GAAG,gBACHkD,MAAO,sBAAsBhD,KAAK2D,SAAW,YAAc,KAAI,cAClD,GAAG3D,KAAK2D,UAAY,QACjCC,KAAK,SAAQ,kBACG,kBAEhBd,EAAA,a,SCZKe,EAAmB,M,qCACH,M,gGAK3BrB,SACE,OACEM,EAAA,MAAIE,MAAO,2BAA2BhD,KAAK8D,OAAS,UAAY,MAC9DhB,EAAA,SACEM,KAAK,WACLJ,MAAM,wBACNlD,GAAI,GAAGE,KAAK+D,iBACZ7D,MAAO,GAAGF,KAAKgE,sBAEjBlB,EAAA,SAAOE,MAAM,qBAAqBE,QAAS,GAAGlD,KAAK+D,kBAChD/D,KAAKiE,kBACNnB,EAAA,WAASE,MAAM,0BAA0BK,KAAM,eAAgBC,KAAM,GAAE,cAAc,U"}
1	+ {"version":3,"names":["hyDropdownCss","HyDropdown","id","label","this","defaultLabel","value","async","_dropdownOptions","jsonParserWorker","dropdownOptions","componentWillUpdate","items","el","querySelectorAll","some","item","checked","isChecked","watchPropHandler","newValue","oldValue","single","dropdownPanelCheckboxElements","getElementsByClassName","Array","from","filter","currentSingle","option","handlePanelToggle","isPanelOpen","handleClick","event","dropdownToggleButtonElement","querySelector","dropdownId","dropdownPanelElement","dropdownToggleButtonIconElement","target","allowedElements","includes","stopPropagation","handleSingleClick","render","currentLabel","currentId","currentValue","classAttributes","join","h","Host","class","dropdownLabel","htmlFor","onClick","type","icon","size","map","index","length","HyDropdownPanel","isHidden","role","HyDropdownPanelItem","isLast","dropdownItemId","dropdownItemValue","dropdownItemLabel"],"sources":["./src/components/hy-dropdown/hy-dropdown.scss?tag=hy-dropdown","./src/components/hy-dropdown/hy-dropdown.tsx","./src/components/hy-dropdown/hy-dropdown.panel.tsx","./src/components/hy-dropdown/hy-dropdown.panel.item.tsx"],"sourcesContent":[".hy-dropdown {\n display: inline-block;\n min-width: 100%;\n position: relative;\n\n @include breakpoint($narrow) {\n min-width: 48.3%;\n }\n\n @include breakpoint($extrawide) {\n min-width: 23.03%;\n }\n\n label.hy-dropdown__button-label {\n @include font-size(16px, 20px);\n @include font-weight($bold);\n\n display: block;\n font-family: var(--main-font-family);\n letter-spacing: -0.32px;\n margin-bottom: 8px;\n }\n\n &--single {\n .hy-dropdown__panel {\n width: max-content;\n max-width: 330px;\n min-width: 100%;\n }\n }\n}\n\n.hy-dropdown__toggle {\n @include font-size(14px, 24px);\n align-items: center;\n background-color: var(--grayscale-white);\n border-radius: 0;\n border: 1px solid var(--grayscale-medium-dark);\n color: var(--link-blue);\n display: inline-flex;\n font-family: var(--main-font-family);\n font-weight: $semibold;\n min-height: 40px;\n height: auto;\n justify-content: space-between;\n letter-spacing: normal;\n padding: 0 0 0 16px;\n text-align: left;\n max-width: 280px;\n width: 100%;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px);\n min-height: 44px;\n }\n\n @include breakpoint($extrawide) {\n min-height: 48px;\n }\n\n &:hover {\n border-color: var(--brand-main-light);\n cursor: pointer;\n }\n\n &:focus {\n border-color: var(--brand-main-light);\n border-style: solid inset solid solid;\n border-width: 2px;\n outline: 0;\n text-indent: -1px; // Text stays in place.\n }\n\n svg {\n pointer-events: none;\n }\n\n &.is-open {\n .hy-dropdown__icon {\n background-color: var(--brand-main-light);\n transform: rotate(180deg);\n\n &::before {\n display: none;\n }\n\n svg {\n fill: var(--grayscale-white);\n }\n }\n }\n}\n\n.hy-dropdown__icon {\n align-items: center;\n display: inline-flex;\n flex-shrink: 0;\n height: 40px;\n justify-content: center;\n margin: 0 0 0 16px;\n position: relative;\n width: 40px;\n\n &::before {\n //border-left: 1px dashed var(--grayscale-medium-dark);\n //Line weight 0,5 px; Line color #979797\n border-left: 0.5px solid var(--grayscale-medium-dark);\n content: \"\";\n display: inline-block;\n height: 65%;\n left: 0;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n }\n\n @include breakpoint($narrow) {\n height: 44px;\n width: 44px;\n }\n\n @include breakpoint($extrawide) {\n height: 48px;\n width: 48px;\n }\n\n svg {\n fill: var(--link-blue);\n\n @include breakpoint($narrow) {\n height: 16px;\n width: 16px;\n }\n }\n}\n\n.hy-dropdown__panel {\n background-color: var(--grayscale-white);\n box-shadow: 0 10px 20px 0 rgba(0, 49, 70, 0.2);\n list-style: none;\n margin: 0;\n padding: 6px;\n position: absolute;\n width: 100%;\n z-index: 11;\n\n &.is-hidden {\n display: none;\n visibility: hidden;\n }\n}\n\n.hy-dropdown__panel-item {\n position: relative;\n\n &:not(.is-last) {\n margin-bottom: 6px;\n }\n}\n\n.hy-dropdown__label {\n @include font-size(14px, 24px);\n align-items: center;\n background-color: var(--grayscale-white);\n border-radius: 0;\n border: 1px solid var(--grayscale-medium-dark);\n color: var(--link-blue);\n display: inline-flex;\n font-family: var(--main-font-family);\n font-weight: $semibold;\n min-height: 40px;\n justify-content: space-between;\n letter-spacing: normal;\n padding: 0 16px;\n text-align: left;\n width: 100%;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px);\n }\n}\n\n.hy-dropdown__label-icon {\n align-items: center;\n display: none !important;\n flex-shrink: 0;\n height: 40px;\n justify-content: center;\n position: relative;\n visibility: hidden;\n width: 40px;\n}\n\n.hy-dropdown__checkbox {\n height: 100%;\n margin: 0;\n opacity: 0;\n position: absolute;\n width: 100%;\n z-index: 10;\n\n &:checked {\n & + label {\n border-color: var(--grayscale-black);\n border-style: solid inset solid solid;\n border-width: 2px;\n color: var(--grayscale-black);\n outline: 0;\n text-indent: -1px; // Text stays in place.\n\n .hy-dropdown__label-icon {\n display: inline-flex !important;\n visibility: visible;\n }\n }\n }\n\n &:hover {\n cursor: pointer;\n\n & + label {\n border-color: var(--brand-main-light);\n }\n }\n\n &:focus {\n & + label {\n border-color: var(--brand-main-light);\n border-style: solid inset solid solid;\n border-width: 2px;\n outline: 0;\n text-indent: -1px; // Text stays in place.\n }\n }\n}\n","import {Component, Element, Host, h, State, Listen, Prop, Watch} from \"@stencil/core\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\n\nexport interface IDropdownItem {\n id: string \| number;\n label: string;\n value: string \| number;\n}\n\nexport interface DefaultValue {\n id: string \| number;\n label: string;\n value: string \| number;\n}\n\n@Component({\n tag: \"hy-dropdown\",\n styleUrl: \"hy-dropdown.scss\",\n shadow: false,\n})\nexport class HyDropdown {\n private _dropdownOptions: IDropdownItem[];\n @Element() el: HTMLElement;\n @Prop() single: boolean = false;\n @Prop() dropdownLabel: string = null;\n @Prop() dropdownId: string = \"dropdownToggle\";\n @Prop() dropdownOptions: IDropdownItem[] \| string;\n @Prop() defaultLabel: string = \"All\";\n @Prop({mutable: true}) defaultOption: string \| number = null;\n @State() isPanelOpen: boolean = false;\n @State() isChecked: boolean = false;\n @State() currentSingle: DefaultValue[] = [{id: 0, label: this.defaultLabel, value: 0}];\n\n async componentWillLoad() {\n this._dropdownOptions = await jsonParserWorker(this.dropdownOptions);\n }\n\n componentWillUpdate() {\n const items = this.el.querySelectorAll(\".hy-dropdown__checkbox\") as any;\n if (items) {\n if ([...items].some((item) => item.checked == true)) {\n this.isChecked = true;\n } else {\n this.isChecked = false;\n }\n }\n }\n\n @Watch(\"defaultOption\")\n watchPropHandler(newValue: string \| number, oldValue: string \| number) {\n if (!this.single) return;\n\n if (newValue !== oldValue) {\n const dropdownPanelCheckboxElements = this.el.getElementsByClassName(\"hy-dropdown__checkbox\") as HTMLCollectionOf<\n HTMLInputElement\n >;\n\n Array.from(dropdownPanelCheckboxElements).filter((item) => {\n if (item.id == newValue) {\n item.checked = true;\n this.currentSingle = this._dropdownOptions.filter((option) => option.id == newValue) as any;\n return;\n }\n return null;\n });\n }\n }\n\n handlePanelToggle() {\n this.isPanelOpen = !this.isPanelOpen;\n }\n\n @Listen(\"click\", {target: \"window\"})\n handleClick(event) {\n const dropdownToggleButtonElement = this.el.querySelector(`#${this.dropdownId}`) as HTMLButtonElement;\n const dropdownPanelElement = this.el.querySelector(\".hy-dropdown__panel\") as HTMLElement;\n const dropdownPanelCheckboxElements = this.el.querySelectorAll(\".hy-dropdown__checkbox\");\n const dropdownToggleButtonIconElement = this.el.querySelector(\".hy-dropdown__icon\") as HTMLElement;\n\n const {target} = event;\n\n const allowedElements = [\n dropdownToggleButtonElement,\n dropdownPanelElement,\n dropdownToggleButtonIconElement,\n ...dropdownPanelCheckboxElements, // Spread (\"copy\") items to allowedElement array.\n ];\n\n if (this.isPanelOpen && !allowedElements.includes(target)) {\n this.isPanelOpen = false;\n }\n event.stopPropagation();\n }\n\n @Listen(\"click\", {capture: true})\n handleSingleClick(event) {\n if (!this.single \|\| !this.isPanelOpen) return;\n const dropdownPanelCheckboxElements = this.el.getElementsByClassName(\"hy-dropdown__checkbox\") as HTMLCollectionOf<\n HTMLInputElement\n >;\n const allowedElements = [...dropdownPanelCheckboxElements];\n const {target} = event;\n if (!allowedElements.includes(target)) return;\n Array.from(dropdownPanelCheckboxElements).filter((item) => {\n if (item.id == target.id) {\n if (!item.checked) {\n this.currentSingle = [{id: null, label: this.defaultLabel, value: null}];\n return;\n }\n this.currentSingle = this._dropdownOptions.filter((option) => option.id == target.id) as any;\n return;\n }\n if (item.id !== target.id && item.checked) {\n item.checked = false;\n return;\n }\n return null;\n });\n\n event.stopPropagation();\n }\n\n render() {\n const {label: currentLabel, id: currentId, value: currentValue} = this.currentSingle[0];\n const classAttributes = [\"hy-dropdown\", this.single ? \"hy-dropdown--single\" : \"\"].join(\" \");\n\n if (this.single) {\n return (\n <Host class={classAttributes}>\n {this.dropdownLabel && (\n <label class=\"hy-dropdown__button-label\" htmlFor={this.dropdownId}>\n {this.dropdownLabel}\n </label>\n )}\n <button\n id={this.dropdownId}\n class={`hy-dropdown__toggle ${this.isPanelOpen ? \"is-open\" : \"\"}`}\n aria-expanded={`${this.isPanelOpen \|\| false}`}\n aria-controls=\"dropdownPanel\"\n onClick={() => this.handlePanelToggle()}\n aria-label={this.dropdownLabel}\n data-current-id={currentId}\n data-current-value={currentValue}\n value={currentId}\n type=\"button\"\n >\n {currentLabel}\n <hy-icon class=\"hy-dropdown__icon\" icon={\"hy-icon-caret-down\"} size={14} aria-hidden=\"true\" />\n </button>\n <hy-dropdown-panel checkbox-checked={this.isChecked ? \"true\" : \"false\"} is-hidden={!this.isPanelOpen}>\n {this._dropdownOptions.map(({id, label, value}, index) => (\n <hy-dropdown-panel-item\n dropdown-item-id={id}\n dropdown-item-label={label}\n dropdown-item-value={value}\n is-last={this._dropdownOptions.length - 1 === index}\n />\n ))}\n </hy-dropdown-panel>\n </Host>\n );\n } else {\n return (\n <Host class={classAttributes}>\n <button\n id={this.dropdownId}\n class={`hy-dropdown__toggle ${this.isPanelOpen ? \"is-open\" : \"\"}`}\n aria-expanded={`${this.isPanelOpen \|\| false}`}\n aria-controls=\"dropdownPanel\"\n onClick={() => this.handlePanelToggle()}\n aria-label={this.dropdownLabel}\n type=\"button\"\n >\n {this.dropdownLabel && this.dropdownLabel}\n <hy-icon class=\"hy-dropdown__icon\" icon={\"hy-icon-caret-down\"} size={14} aria-hidden=\"true\" />\n </button>\n <hy-dropdown-panel checkbox-checked={this.isChecked ? \"true\" : \"false\"} is-hidden={!this.isPanelOpen}>\n {this._dropdownOptions.map(({id, label, value}, index) => (\n <hy-dropdown-panel-item\n dropdown-item-id={id}\n dropdown-item-label={label}\n dropdown-item-value={value}\n is-last={this._dropdownOptions.length - 1 === index}\n />\n ))}\n </hy-dropdown-panel>\n </Host>\n );\n }\n }\n}\n","import {Component, h, Prop} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-dropdown-panel\",\n shadow: false,\n})\nexport class HyDropdownPanel {\n @Prop() isHidden: boolean;\n\n render() {\n return (\n <ul\n id=\"dropdownPanel\"\n class={`hy-dropdown__panel ${this.isHidden ? \"is-hidden\" : \"\"}`}\n aria-hidden={`${this.isHidden \|\| false}`}\n role=\"region\"\n aria-labelledby=\"dropdownToggle\"\n >\n <slot />\n </ul>\n );\n }\n}\n","import {Component, h, Prop} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-dropdown-panel-item\",\n shadow: false,\n})\nexport class HyDropdownPanelItem {\n @Prop() isLast?: boolean = false;\n @Prop() dropdownItemId: string \| number;\n @Prop() dropdownItemValue: string \| number;\n @Prop() dropdownItemLabel: string;\n\n render() {\n return (\n <li class={`hy-dropdown__panel-item ${this.isLast ? \"is-last\" : \"\"}`}>\n <input\n type=\"checkbox\"\n class=\"hy-dropdown__checkbox\"\n id={`${this.dropdownItemId}`}\n value={`${this.dropdownItemValue}`}\n />\n <label class=\"hy-dropdown__label\" htmlFor={`${this.dropdownItemId}`}>\n {this.dropdownItemLabel}\n <hy-icon class=\"hy-dropdown__label-icon\" icon={\"hy-icon-done\"} size={14} aria-hidden=\"true\" />\n </label>\n </li>\n );\n }\n}\n"],"mappings":"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"}

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":"8FAAA,MAAMA,EAAgB,+tgBCsBtB,IAAIC,EAAO,CACTC,MAAO,QACPC,MAAO,S,MAQIC,EAAU,M,uDAEwB,M,aACTC,EAAiBC,Q,mHAKvB,M,gGAIC,M,kHAKK,uB,+CAGN,S,kDAGS,M,mBACP,I,qBAEG,E,oBACD,C,CAGlCC,oBAAoBC,GAClB,UAAWA,IAAa,SAAU,CAChCC,KAAKC,cAAgBC,KAAKC,MAAMJ,E,KAC3B,CACLC,KAAKC,cAAgBF,C,EAKzBK,sBAAsBL,GACpB,UAAWA,IAAa,SAAU,CAChCC,KAAKK,gBAAkBH,KAAKC,MAAMJ,E,KAC7B,CACLC,KAAKK,gBAAkBN,C,EAIPO,cAAcC,GAChCP,KAAKQ,kBAAoBD,IAAS,SAAWL,KAAKC,MAAMI,GAAQA,C,CAGlEE,uBAAuBC,GACrB,IAAIC,EAAkB,yBAAyBX,KAAKY,iCACpD,IAAIC,EAAoB,8DACxB,IAAIC,EAAiBC,SAASC,iBAAiB,qBAAqBN,EAAOO,QAAQ,GACnF,GAAIH,EAAgB,CAClB,IAAKd,KAAKkB,yBAA0B,CAClCJ,EAAeK,UAAUC,IAAI,GAAGT,cAChCD,EAAOS,UAAUC,IAAI,GAAGP,a,KACnB,CACLC,EAAeK,UAAUE,OAAO,GAAGV,cACnCD,EAAOS,UAAUE,OAAO,GAAGR,a,CAE7Bb,KAAKkB,0BAA4BlB,KAAKkB,wB,EAK1CI,cAAcC,GACZ,MAAMC,EAAMD,EAAME,KAClB,IAAIf,EAASa,EAAMb,OAEnB,MAAMgB,EAAgBhB,EAAOiB,QAAQC,cACrC,MAAMC,EAAe,CAACH,GAAeI,MAAMC,GAAM,CAAC,MAAO,OAAQ,SAAU,KAAKC,QAAQD,IAAM,IAE9F,GACErB,GACAmB,IACCnB,EAAOS,UAAUc,SAAS,qDAC3B,CAACzC,EAAKC,MAAOD,EAAKE,OAAOwC,SAASV,GAClC,CACA,GAAIE,IAAkB,SAAU,CAC9BhB,EAASA,EAAOyB,QAAQ,0BAA0BnC,KAAKY,yC,CAEzDZ,KAAKS,uBAAuBC,GAC5Ba,EAAMa,gB,EAKVC,YAAYd,GACV,IAAIb,EAASa,EAAMb,OACnB,MAAMgB,EAAgBhB,EAAOiB,QAAQC,cACrC,MAAMC,EAAe,CAACH,GAAeI,MAAMC,GAAM,CAAC,MAAO,OAAQ,SAAU,KAAKC,QAAQD,IAAM,IAE9F,GAAIrB,GAAUmB,IAAiBnB,EAAOS,UAAUc,SAAS,oDAAqD,CAC5G,GAAIP,IAAkB,SAAU,CAC9BhB,EAASA,EAAOyB,QAAQ,0BAA0BnC,KAAKY,yC,CAEzDZ,KAAKS,uBAAuBC,GAC5Ba,EAAMa,iBACNb,EAAMe,0B,EAIVC,oBACEvC,KAAKF,oBAAoBE,KAAKwC,cAC9BxC,KAAKI,sBAAsBJ,KAAKyC,gBAChCzC,KAAKM,cAAcN,KAAK0C,U,CAG1BC,mBACE,IAAIC,EAAY5C,KAAK6C,GAAGV,QAAQ,YAChC,GAAIS,EAAW,CACb,IAAKA,EAAUzB,UAAUc,SAAS,gBAAiB,CACjDjC,KAAK8C,YAAc,O,EAGvB,GAAI9C,KAAKY,SAAWhB,EAAiBmD,gBAAiB,CACpD,MAAMC,EAAQjC,SAASkC,cAAc,qDAErC,GAAID,EAAO,CACTA,EAAME,iBAAiB,QAAQ,WAC7B,MAAMC,EAAyB,EAC/B,MAAMC,EAAcJ,EAAMK,cAC1B,MAAMC,EAAaN,EAAMO,aACzB,MAAMC,EAAwBF,EAAaF,EAC3CpD,KAAKyD,eAAiBH,EACtBtD,KAAK0D,gBAAkBN,EACvB,GAAII,EAAwBL,EAAwB,CAClDnD,KAAKyD,eAAiBL,EAAcD,C,MAC/B,GAAIK,EAAwBL,EAAwB,CACzDnD,KAAK0D,gBAAkBJ,EAAaH,C,OAO9CQ,SACE,MAAMC,EAAyB,CAC7B,uBACA,yBAAyB5D,KAAKY,UAC9B,yBAAyBZ,KAAKY,YAAYZ,KAAK8C,eAC/Ce,KAAK,KACP,MAAMC,EAAkB,CAAC,eAAgB,iBAAiB9D,KAAKY,WAAWiD,KAAK,KAC/E,MAAME,EAA+B,CACnC,iBAAiB/D,KAAKY,0BACtB,iBAAiBZ,KAAKY,4BAA4BZ,KAAK8C,eACvDe,KAAK,KAKP,MAAMG,EAA2B,CAC/B,iBAAiBhE,KAAKY,kCACtB,iBAAiBZ,KAAKY,oCAAoCZ,KAAK8C,eAC/De,KAAK,KACP,MAAMI,EAA0B,CAC9B,iBAAiBjE,KAAKY,iCACtB,iBAAiBZ,KAAKY,mCAAmCZ,KAAK8C,eAC9De,KAAK,KACP,MAAMK,EAAgC,CACpC,iBAAiBlE,KAAKY,uCACtB,iBAAiBZ,KAAKY,yCAAyCZ,KAAK8C,eACpEe,KAAK,KACP,MAAMM,EAAkC,CAAC,iBAAiBnE,KAAKY,2CAA2CiD,KAAK,KAC/G,MAAMO,EAA6B,CAAC,iBAAiBpE,KAAKY,uCAAuCiD,KAAK,KACtG,MAAMQ,EAAyB,CAAC,iBAAiBrE,KAAKY,iCAAiCiD,KAAK,KAE5F,MAAMnD,EAASV,KAAKsE,WAAa,SAAW,QAE5C,SAASC,EAASC,EAAKC,GACrB,OAAOD,EAAIE,OAASD,EAAID,EAAIG,OAAO,EAAGF,EAAI,GAAK,MAAQD,C,CAGzD,OAAQxE,KAAKY,SACX,KAAKhB,EAAiBgF,SAAU,CAC9B,MAAMC,EAAiC,CACrC,iBAAiB7E,KAAKY,yCACtB,iBAAiBZ,KAAKY,2CAA2CZ,KAAK8C,eACtEe,KAAK,KACP,OACEiB,EAAA,OAAKC,MAAM,yBACTD,EAAA,KAAGC,MAAOjB,EAAiBkB,KAAMhF,KAAKiF,IAAKvE,OAAQA,EAAM,aAAcV,KAAKkF,SAC1EJ,EAAA,OAAKC,MAAOhB,GACVe,EAAA,OAAKC,MAAOf,GACVc,EAAA,OAAKC,MAAM,QACTD,EAAA,WAASK,KAAM,8BAA+BC,KAAM,MAErDpF,KAAKqF,UAERP,EAAA,OAAKC,MAAOd,GAA0BjE,KAAKsF,WAE1CtF,KAAKuF,iBACJT,EAAA,OACEC,MAAOb,EACPsB,UACExF,KAAKyF,oBACDlB,EAASvE,KAAKuF,gBAAiBvF,KAAK0F,eACpC1F,KAAKuF,mBAKjBT,EAAA,OAAKC,MAAOF,GACVC,EAAA,QAAMC,MAAM,QACVD,EAAA,WAASK,KAAM,eAAgBC,KAAM,MAEvCN,EAAA,QAAMC,MAAM,SAAS/E,KAAK2F,oB,CAMpC,KAAK/F,EAAiBmD,gBAAiB,CACrC,MAAM6C,EAAgC,CAAC,iBAAiB5F,KAAKY,4BAA4BiD,KAAK,KAC9F,MAAMgC,EAA2B,CAAC,iBAAiB7F,KAAKY,mCAAmCiD,KAAK,KAEhG,MAAMiC,EAA6C,CACjD,iBAAiB9F,KAAKY,2CACtB,iBAAiBZ,KAAKY,6CAA6CZ,KAAK8C,eACxEe,KAAK,KAEP,MAAMkC,EAAqB/F,KAAKK,iBAAmBL,KAAKK,gBAAgBqE,OAAS,EAAI,GAAK,YAC1F,MAAMsB,EAAuB,CAC3B,iBAAiBhG,KAAKY,4CACtBmF,GACAlC,KAAK,KACP,MAAMoC,EAAsB,CAAC,iBAAiBjG,KAAKY,4CAA4CiD,KAAK,KAEpG,MAAMgB,EAAiC,CACrC,iBAAiB7E,KAAKY,yCACtB,iBAAiBZ,KAAKY,2CAA2CZ,KAAK8C,eACtEe,KAAK,KACP,MAAMqC,EAAoC,CACxC,iBAAiBlG,KAAKY,gDACtBiD,KAAK,KAEP,MAAMsC,EAA4B,CAChC,yBAAyBnG,KAAKY,wBAC9B,yBAAyBZ,KAAKY,0BAA0BZ,KAAK8C,eAC7De,KAAK,KACP,MAAMuC,EAA0B,CAAC,yBAAyBpG,KAAKY,kCAAkCiD,KAAK,KACtG,MAAMwC,EAA8B,CAAC,yBAAyBrG,KAAKY,wCAAwCiD,KACzG,KAEF,MAAMyC,EAAgC,CACpC,yBAAyBtG,KAAKY,0CAC9BiD,KAAK,KACP,MAAM0C,EAA8B,CAAC,yBAAyBvG,KAAKY,wCAAwCiD,KACzG,KAEF,MAAM2C,EAA0B,CAAC,yBAAyBxG,KAAKY,kCAAkCiD,KAAK,KACtG,MAAM4C,EAAuB,CAAC,yBAAyBzG,KAAKY,+BAA+BiD,KAAK,KAEhG,MAAM6C,EACJ1G,KAAK2G,wBAA0B3G,KAAK2G,uBAAuBjC,OAAS,EAChE,GAAG1E,KAAKsF,aAAatF,KAAK2G,yBAAyB/E,cAAcgF,QAAQ,MAAO,KAChF,GACN,MAAMC,EAAoB,IAAMH,EAAY,UAE5C,MAAMI,EACJ9G,KAAK2G,wBAA0B3G,KAAK2G,uBAAuBjC,OAAS,EAAI1E,KAAKC,cAAcyE,OAAS,GAEtG,MAAO,CACLI,EAAA,WAASC,MAAOnB,GACdkB,EAAA,KAAGC,MAAOjB,EAAiBkB,KAAMhF,KAAKiF,IAAKvE,OAAQA,EAAM,aAAcV,KAAKkF,SAC1EJ,EAAA,OAAKC,MAAOa,GACVd,EAAA,OAAKC,MAAOc,GACT7F,KAAKQ,WACJsE,EAAA,eACG9E,KAAKQ,WAAWuG,KAAKC,GACpBlC,EAAA,UACEmC,OAAQD,EAAKE,IACbC,MAAOH,EAAKG,MACZC,KAAMJ,EAAKI,KACXC,MAAOL,EAAKK,MAAQL,EAAKK,MAAQ,OAGrCvC,EAAA,OACEwC,QAAStH,KAAKuH,YAAc,QAAU,OAAM,cAChC,OACZL,IAAKlH,KAAKwH,aACVC,IAAKzH,KAAK0H,aACVC,MAAO,CACL,cAAe,GAAG3H,KAAK0D,oBACvB,aAAc,GAAG1D,KAAKyD,uBAK5BqB,EAAA,OACEwC,QAAStH,KAAKuH,YAAc,QAAU,OAAM,cAChC,OACZL,IAAKlH,KAAKwH,aACVC,IAAKzH,KAAK0H,aACVC,MAAO,CACL,cAAe,GAAG3H,KAAK0D,oBACvB,aAAc,GAAG1D,KAAKyD,uBAK7BzD,KAAK4H,YAAc9C,EAAA,YAAO9E,KAAK4H,aAElC9C,EAAA,OAAKC,MAAOhB,GACVe,EAAA,OAAKC,MAAOkB,GACVnB,EAAA,OAAKC,MAAOd,GAA0BjE,KAAKsF,WAC1CtF,KAAKuF,iBACJT,EAAA,OAAKC,MAAOb,EAA+BsB,UAAWxF,KAAKuF,mBAG/DT,EAAA,OAAKC,MAAOiB,GACThG,KAAKK,iBACJyE,EAAA,OAAKC,MAAOe,GACT9F,KAAKK,gBAAgB0G,KAAKc,IACzB,IAAIC,EAAuC,CACzC,iBAAiB9H,KAAKY,iDACtB,iBAAiBZ,KAAKY,mDAAmDZ,KAAK8C,cAC9E,GAAG+E,EAAEE,SAASC,YAAc,OAAS,SAAW,MAChDnE,KAAK,KACP,OAAOiB,EAAA,OAAKC,MAAO+C,GAAuCD,EAAEI,KAAW,KAI7EnD,EAAA,OAAKC,MAAOF,GACVC,EAAA,KACEE,KAAMhF,KAAKiF,IACXvE,OAAQA,EAAM,aACFV,KAAKkF,QACjBH,MAAOmB,EACPgC,SAAS,MAETpD,EAAA,QAAMC,MAAM,SAAS/E,KAAK2F,kBAC1Bb,EAAA,QAAMC,MAAM,gBACVD,EAAA,OAAKC,MAAM,QACTD,EAAA,WAASK,KAAM,yBAA0BC,KAAM,YAQ5DpF,KAAK2G,wBACJ7B,EAAA,OAAKC,MAAOoB,GACVrB,EAAA,OAAKC,MAAOqB,GACVtB,EAAA,KAAGE,KAAM6B,EAAmB9B,MAAOsB,EAA6B6B,SAAS,MACvEpD,EAAA,0BACgB,QAAO,gBACN,GAAG4B,aAClB3B,MAAOuB,EACPrF,GAAI,GAAGyF,YAEP5B,EAAA,QAAMC,MAAOwB,GACXzB,EAAA,WAASK,KAAM,qBAAsBC,KAAM,MAE5CpF,KAAK2G,uBAAsB,KAAIG,EAAiB,OAIvDhC,EAAA,OACEC,MAAOyB,EAAuB,kBACb,GAAGE,WACpBzF,GAAI,GAAGyF,aACPyB,KAAK,SAAQ,cACD,QAEXnI,KAAKC,cAAc8G,KAAKc,IACvB,IAAIO,EAAoBP,EAAEvD,WAAa,SAAW,QAClD,OACEQ,EAAA,KAAGC,MAAO0B,EAAsBzB,KAAM6C,EAAE5C,IAAKvE,OAAQA,EAAM,aAAc0H,GACtEP,EAAEQ,MACD,O,CASpB,QAAS,CACP,OACEvD,EAAA,eACEA,EAAA,KAAGC,MAAOjB,EAAiBkB,KAAMhF,KAAKiF,IAAKvE,OAAQA,EAAM,aAAcV,KAAKkF,SAC1EJ,EAAA,OAAKC,MAAOhB,GACVe,EAAA,OAAKC,MAAOf,GAA2BhE,KAAKqF,UAC5CP,EAAA,OAAKC,MAAOd,GAA0BjE,KAAKsF,WAE3CR,EAAA,OAAKC,MAAOZ,GACVW,EAAA,QAAMC,MAAOX,GACXU,EAAA,WAASK,KAAM,eAAgBC,KAAM,MAEvCN,EAAA,OAAKC,MAAOV,GAAyBrE,KAAKiF,MAG3CjF,KAAKuF,iBACJT,EAAA,OAAKC,MAAOb,EAA+BsB,UAAWxF,KAAKuF,oB"}

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