@itcenteratunihelsinki/huds-lib 0.8.65 → 0.8.67

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

@@ -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

@@ -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":"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"}
+{"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-hero.entry.js

@@ -1,2 +1,2 @@
-import{r as e,h as t,H as h,g as i}from"./index-f84f2a7d.js";import{j as r}from"./globalScript-5a4b7abf.js";import{H as o,a,b as n,c as l,d}from"./utils-2819fd7e.js";const g=':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-hero{position:relative;padding-bottom:0}@media (min-width: 60rem){.hy-hero:not(.hy-hero--full-image){margin-top:32px}}@media (min-width: 60rem){.hy-hero:not(.has-shortcuts){margin-bottom:32px}}@media (min-width: 75.0625rem){.hy-hero .without-sidebar :not(.hy-hero--full-image){max-width:1216px;margin-right:auto;margin-left:auto}}@media (min-width: 75.0625rem){.with-sidebar:not(.hy-hero--full-image) .hy-hero{padding-left:32px;padding-right:32px}}@media (min-width: 1601px){.with-sidebar:not(.hy-hero--full-image) .hy-hero{padding-right:0;padding-left:0;max-width:1216px;margin-right:auto;margin-left:auto}}.hy-hero--full-image{--dark-bg:rgba(0, 0, 0, 0.55);--light-bg:rgba(255, 255, 255, 0.50);--dark-text:var(--brand-main-nearly-black);--light-text:var(--grayscale-white);border-bottom:1px solid var(--grayscale-medium-dark)}@media (min-width: 60rem){.hy-hero--full-image{border-bottom:4px solid var(--grayscale-black);margin-left:-2rem;margin-right:-2rem}}.hy-hero--full-image .hy-hero__container{grid-template-columns:repeat(4, 1fr);grid-template-rows:1fr}.hy-hero--full-image .hy-hero__image-container{grid-column:1/-1;grid-row:1/-1;-o-object-fit:cover;object-fit:cover;padding:0;width:100%}.hy-hero--full-image .hy-hero__image-container img{aspect-ratio:16/8}.hy-hero--full-image .hy-hero__content-container{padding:0}@media (min-width: 60rem){.hy-hero--full-image .hy-hero__content-container{align-self:center;grid-column:1/3;grid-row:1/-1;margin-left:32px;max-width:95%;z-index:2}}@media (min-width: 75.0625rem){.hy-hero--full-image .hy-hero__content-container{margin-left:0}}.hy-hero--full-image .hy-hero__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:24px;padding:16px 16px 32px 16px}@media (min-width: 60rem){.hy-hero--full-image .hy-hero__content{margin-left:32px;gap:24px;padding:32px}}@media (min-width: 75.0625rem){.hy-hero--full-image .hy-hero__content{margin-left:64px;gap:32px}}@media (min-width: 1601px){.hy-hero--full-image .hy-hero__content{margin-left:96px}}.hy-hero--full-image .hy-hero__content[data-text-color=dark_text_light_bg]{-webkit-backdrop-filter:blur(250px);backdrop-filter:blur(250px);background-color:var(--grayscale-white);color:var(--dark-text)}@media (min-width: 60rem){.hy-hero--full-image .hy-hero__content[data-text-color=dark_text_light_bg]{background:var(--light-bg)}}.hy-hero--full-image .hy-hero__content[data-text-color=light_text_dark_bg]{-webkit-backdrop-filter:blur(250px);backdrop-filter:blur(250px);background:var(--grayscale-black);color:var(--light-text)}@media (min-width: 60rem){.hy-hero--full-image .hy-hero__content[data-text-color=light_text_dark_bg]{background:var(--dark-bg)}}.hy-hero--full-image .hy-hero__content[data-text-color=dark_text_no_bg]{background-color:var(--grayscale-white);color:var(--dark-text)}@media (min-width: 60rem){.hy-hero--full-image .hy-hero__content[data-text-color=dark_text_no_bg]{background:transparent;text-shadow:0 0 5px var(--grayscale-white)}}.hy-hero--full-image .hy-hero__content[data-text-color=light_text_no_bg]{background-color:var(--grayscale-black);color:var(--light-text)}@media (min-width: 60rem){.hy-hero--full-image .hy-hero__content[data-text-color=light_text_no_bg]{background:transparent;text-shadow:0 0 5px var(--grayscale-black)}}.hy-hero--full-image .hy-hero__subtitle{font-family:var(--main-font-family);font-size:18px;font-weight:700;line-height:1.2;position:relative}.hy-hero--full-image .hy-hero__subtitle::after{aspect-ratio:1;background-color:currentColor;bottom:-10px;content:"";display:block;height:4px;left:0;position:absolute;width:64px}@media (min-width: 60rem){.hy-hero--full-image .hy-hero__subtitle{font-size:20px}}.hy-hero--full-image h2.hy-hero__title.hy-heading__hero{color:inherit !important;font-family:var(--main-font-family);font-size:32px;font-weight:700;line-height:1.2}@media (min-width: 75.0625rem){.hy-hero--full-image h2.hy-hero__title.hy-heading__hero{font-size:36px}}@media (min-width: 1601px){.hy-hero--full-image h2.hy-hero__title.hy-heading__hero{font-size:64px}}.hy-hero--full-image .hy-hero__description{font-family:var(--main-font-family);font-size:16px;font-weight:400;line-height:1.5;margin:0;padding:0}@media (min-width: 1601px){.hy-hero--full-image .hy-hero__description{font-size:17px}}.hy-hero--full-image .hy-hero__actions{margin:0}.hy-hero--full-image .hy-hero__actions .hy-hero__link{--light-bg:var(--grayscale-white);--dark-bg:var(--grayscale-black);--light-text:var(--grayscale-white);--dark-text:var(--grayscale-black);-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);font-size:16px;font-weight:700;gap:8px;line-height:18px;padding:13px 16px;text-decoration:none;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.hy-hero--full-image .hy-hero__actions .hy-hero__link:hover{text-decoration:underline}.hy-hero--full-image .hy-hero__actions .hy-hero__link svg{width:16px;height:16px}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=dark_text_light_bg]{background:var(--dark-bg);color:var(--light-text)}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=dark_text_light_bg] svg{fill:var(--light-text)}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=light_text_dark_bg]{background:var(--light-bg);color:var(--dark-text)}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=light_text_dark_bg] svg{fill:var(--dark-text)}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=dark_text_no_bg]{background:var(--dark-bg);color:var(--light-text);text-shadow:none}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=dark_text_no_bg] svg{fill:var(--light-text)}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=light_text_no_bg]{background:var(--light-bg);color:var(--dark-text);text-shadow:none}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=light_text_no_bg] svg{fill:var(--dark-text)}.hy-hero--full-image .hy-image__image{-o-object-fit:cover;object-fit:cover}@media (min-width: 60rem){.hy-hero--white{margin-top:0}}@media (min-width: 60rem){.hy-hero--white:not(.has-shortcuts){padding-bottom:48px}}.hy-hero--white:not(.has-shortcuts):after{width:100%;background-color:var(--grayscale-medium-dark);height:1px;content:"";margin:0 auto;display:block}@media (min-width: 60rem){.hy-hero--white:not(.has-shortcuts):after{position:absolute;left:0;right:0;bottom:0}}.hy-hero--white:not(.hy-hero--front_page):after{max-width:1216px}.hy-hero__container{position:relative}@media (min-width: 60rem){.hy-hero__container{display:grid;position:relative}}@media (min-width: 60rem){.hy-hero--small .hy-hero__container{grid-template-columns:60% 1fr}}@media (min-width: 60rem){.hy-hero--large .hy-hero__container{grid-template-columns:repeat(2, 1fr)}}.hy-hero__content-container{padding:24px 1rem 40px;margin:0 auto;width:100%}@media (min-width: 30rem){.hy-hero__content-container{padding:40px 2rem}}@media (min-width: 75.0625rem){.hy-hero__content-container{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;padding:40px 24px}}@media (min-width: 1601px){.hy-hero__content-container{max-width:1216px}}.hy-hero--black .hy-hero__content-container{background-color:var(--grayscale-black)}.hy-hero--blue .hy-hero__content-container{background-color:var(--brand-main)}.hy-hero--white .hy-hero__content-container{background-color:var(--grayscale-white)}@media (min-width: 75.0625rem){.hy-hero--white .hy-hero__content-container{padding:40px 24px 40px 0}}.hy-hero__content{position:relative}h2.hy-hero__title{-ms-hyphens:auto;hyphens:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;max-width:100%;width:auto}.hy-hero--blue h2.hy-hero__title{color:var(--grayscale-white) !important}.hy-hero--black h2.hy-hero__title{color:var(--grayscale-white) !important}.hy-hero--white h2.hy-hero__title{color:var(--grayscale-black) !important}h2.hy-hero__title.hy-heading__hero{font-size:2.25rem;line-height:33px;font-weight:700;color:var(--grayscale-black);font-family:var(--main-font-family);letter-spacing:-0.8px;margin-bottom:0;text-transform:none;text-wrap:balance}@media (min-width: 1024px){h2.hy-hero__title.hy-heading__hero{font-size:2.25rem;line-height:40px;letter-spacing:-1.15px}}@media (min-width: 1601px){h2.hy-hero__title.hy-heading__hero{font-size:2.375rem;line-height:48px;letter-spacing:-1.3px}}.hy-hero__description{font-size:1rem;line-height:24px;font-family:var(--main-font-family);margin:16px 0 0 0;padding:0;position:relative;text-wrap:pretty}@media (min-width: 1601px){.hy-hero__description{font-size:1.0625rem;line-height:26px}}.hy-hero--black .hy-hero__description{color:var(--grayscale-white)}.hy-hero--blue .hy-hero__description{color:var(--grayscale-white)}.hy-hero--white .hy-hero__description{color:var(--grayscale-black)}.hy-hero__actions{margin-top:24px}.hy-hero__image-container{margin:0;padding:0;position:relative}.hy-hero__image-container figure{margin:0}@media (min-width: 60rem){.hy-hero__image-container{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;padding:8px 0}}@media (min-width: 60rem){.hy-hero--front_page .hy-hero__image-container{padding:0}}.hy-image__image{display:block;height:100%;min-height:205px;-o-object-fit:contain;object-fit:contain;width:100%}.has-cover .hy-image__image{-o-object-fit:cover;object-fit:cover}.hy-hero.hy-hero--group_landing.hy-hero--generic_site_group h2.hy-hero__title.hy-heading__hero,.hy-hero.hy-hero--research_group h2.hy-hero__title.hy-heading__hero{font-size:2rem;line-height:38px;font-weight:700;color:var(--grayscale-black);font-family:var(--main-font-family);letter-spacing:-0.8px;margin-bottom:0;text-transform:uppercase}@media (min-width: 1024px){.hy-hero.hy-hero--group_landing.hy-hero--generic_site_group h2.hy-hero__title.hy-heading__hero,.hy-hero.hy-hero--research_group h2.hy-hero__title.hy-heading__hero{font-size:2.875rem;line-height:54px;letter-spacing:-1.15px}}@media (min-width: 1601px){.hy-hero.hy-hero--group_landing.hy-hero--generic_site_group h2.hy-hero__title.hy-heading__hero,.hy-hero.hy-hero--research_group h2.hy-hero__title.hy-heading__hero{font-size:3.25rem;line-height:60px;letter-spacing:-1.3px}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--white{padding-top:40px;margin-top:0}}.hy-hero.hy-hero--front_page h2.hy-hero__title.hy-heading__hero{font-size:2rem;line-height:38px;font-weight:700;color:var(--grayscale-black);font-family:var(--main-font-family);letter-spacing:-0.8px;margin-bottom:0;text-transform:uppercase}@media (min-width: 1024px){.hy-hero.hy-hero--front_page h2.hy-hero__title.hy-heading__hero{font-size:2.875rem;line-height:54px;letter-spacing:-1.15px}}@media (min-width: 1601px){.hy-hero.hy-hero--front_page h2.hy-hero__title.hy-heading__hero{font-size:3.25rem;line-height:60px;letter-spacing:-1.3px}}@media (min-width: 75.0625rem){.hy-hero.hy-hero--front_page{margin-left:-32px;margin-right:-32px;max-width:none}}.hy-hero.hy-hero--front_page .hy-hero__container{position:relative}@media (min-width: 60rem){.hy-hero.hy-hero--front_page .hy-hero__container{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}}.hy-hero.hy-hero--front_page .hy-hero__content-container{padding:24px 1rem 40px;margin:0 auto;width:100%}.hy-hero--black .hy-hero.hy-hero--front_page .hy-hero__content-container{background-color:var(--grayscale-black)}.hy-hero--blue .hy-hero.hy-hero--front_page .hy-hero__content-container{background-color:var(--brand-main)}.hy-hero--white .hy-hero.hy-hero--front_page .hy-hero__content-container{background-color:var(--grayscale-white)}@media (min-width: 30rem){.hy-hero.hy-hero--front_page .hy-hero__content-container{padding:24px 2rem 40px}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page .hy-hero__content-container{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;min-height:330px;padding:56px 2rem}}@media (min-width: 1060px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:373px}}@media (min-width: 1160px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:480px}}@media (min-width: 75.0625rem){.hy-hero.hy-hero--front_page .hy-hero__content-container{padding-left:32px;padding-right:8px}}@media (min-width: 1260px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:443px}}@media (min-width: 1280px){.hy-hero.hy-hero--front_page .hy-hero__content-container{max-width:1216px;padding-left:0}}@media (min-width: 1360px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:478px}}@media (min-width: 1460px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:513px}}@media (min-width: 1560px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:548px}}@media (min-width: 1601px){.hy-hero.hy-hero--front_page .hy-hero__content-container{padding-left:0}}@media (min-width: 1660px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:583px}}@media (min-width: 1760px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:619px}}@media (min-width: 1860px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:654px}}@media (min-width: 1920px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:675px}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--small .hy-hero__image-container{width:40%}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--small .hy-hero__content{max-width:60%}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--large .hy-hero__image-container{width:50%}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--large .hy-hero__content{max-width:50%}}.hy-hero.hy-hero--front_page .hy-hero__image-container{background-position:50% 50%;background-size:cover;background:transparent;margin:0;padding:0;position:relative}.hy-hero.hy-hero--front_page .hy-hero__image-container figure{margin:0}@media (min-width: 60rem){.hy-hero.hy-hero--front_page .hy-hero__image-container{background-color:var(--grayscale-white);bottom:0;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;padding:8px 0;position:absolute;right:0;top:0}}.hy-hero.hy-hero--front_page .hy-hero__content{position:relative}@media (min-width: 60rem){.hy-hero.hy-hero--front_page .hy-hero__content{padding-right:24px}}.hy-hero.hy-hero--front_page .hy-image__image{display:block;height:100%;min-height:205px;-o-object-fit:cover;object-fit:cover;width:100%}.hy-hero__spacer-box{display:none}@media (min-width: 60rem){.hy-hero__spacer-box{display:block;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;position:absolute;inset:0}}@media (min-width: 60rem){.hy-hero--small .hy-hero__spacer-box{width:60%}}@media (min-width: 60rem){.hy-hero--large .hy-hero__spacer-box{width:50%}}.hy-hero--black .hy-hero__spacer-box{background-color:var(--grayscale-black)}.hy-hero--blue .hy-hero__spacer-box{background-color:var(--brand-main)}.hy-hero--white .hy-hero__spacer-box{background-color:var(--grayscale-white)}';let y=null;let c=250;const m=class{constructor(t){e(this,t);this.heroType=o.landing;this.heroGroupType=a.default;this.colorVariant=n.blue;this.sizeVariant=l.large;this.heroTextColor=null;this.image=undefined;this.imageHeight=null;this.imageWidth=null;this.imageAltText="";this.disableLazy=false;this.hasShortcuts=false;this.heading=undefined;this.description=undefined;this.subtitle=undefined;this.url=undefined;this.urlTitle=undefined;this.scLabel=undefined;this.isExternal=false;this.sourceSet=undefined}async componentWillLoad(){this._sourceSet=await r(this.sourceSet)}handleHeroImageObjectFitValue(e,t){const h=t.getElementsByClassName("hy-hero__content-container")[0];if(e==="small"){if(h.offsetHeight>=300){t.classList.add("has-cover")}else{t.classList.remove("has-cover")}}if(e==="large"){if(h.offsetHeight>=344){t.classList.add("has-cover")}else{t.classList.remove("has-cover")}}}createImageElement(e,h,i){return t("div",{class:`hy-hero__image-container`,style:i},e.image&&(h?t("picture",null,h.map((e=>t("source",{srcSet:e.src,media:e.media,type:e.type,sizes:e.sizes?e.sizes:""}))),t("img",{loading:e.disableLazy?"eager":"lazy",alt:e.imageAltText,class:`hy-image__image`,src:e.image,height:e.imageHeight,width:e.imageWidth})):t("img",{loading:e.disableLazy?"eager":"lazy",alt:e.imageAltText,class:`hy-image__image`,src:e.image,height:e.imageHeight,width:e.imageWidth})))}setAspectRatio(e=16,t=10){const h=t/e*100;return{"--aspectRatio":`${h}%`}}render(){let e=d.heroWhite;let i=this.colorVariant;let r=this.heroType;if(this.heroType==="minor_landing"){i=n.white;r=o.landing}if(i===n.blue){e=d.heroBlue}if(i===n.black){e=d.heroBlack}if(!i||i==="fp_white"){i=n.white}const a=["hy-hero",`hy-hero--${r}`,`hy-hero--${this.heroGroupType}`,`hy-hero--${i}`,`hy-hero--${this.sizeVariant}`,this.hasShortcuts?"has-shortcuts":""];const l=["hy-hero__title","hy-heading__hero"].join(" ");window.onload=()=>{const e=document.getElementsByClassName("hy-hero")[0];this.handleHeroImageObjectFitValue(this.sizeVariant,e);window.addEventListener("resize",(()=>{clearTimeout(y);y=setTimeout((()=>this.handleHeroImageObjectFitValue(this.sizeVariant,e)),c)}))};if(r==="front_page"&&this.sizeVariant!=="full-image"){return t(h,null,t("div",{class:a.join(" ")},t("div",{class:`hy-hero__container`},this.createImageElement(this,this._sourceSet,this.setAspectRatio()),t("div",{class:`hy-hero__spacer-box`}),t("div",{class:`hy-hero__content-container`},t("div",{class:`hy-hero__content`},t("div",{class:`hy-hero__title-container`},t("h2",{innerHTML:this.heading,class:l})),this.description&&t("p",{class:`hy-hero__description`},this.description),this.url&&t("div",{class:`hy-hero__actions`},t("hy-cta-button",{"link-content":this.urlTitle,"sc-label":this.scLabel,url:this.url,"is-external":this.isExternal,variant:e})))))),t("hy-box",{mb:"2, 2, 1, 1"}))}if(this.sizeVariant==="full-image"){const e=this.isExternal?"_blank":"_self";return t("div",{class:`hy-hero hy-hero--full-image`},t("div",{class:`hy-hero__container`},this.createImageElement(this,this._sourceSet,this.setAspectRatio(16,8)),t("div",{class:`hy-hero__content-container`},t("div",{class:`hy-hero__content`,"data-text-color":this.heroTextColor},this.subtitle&&t("span",{class:`hy-hero__subtitle`},this.subtitle),t("h2",{innerHTML:this.heading,class:l}),this.description&&t("p",{class:`hy-hero__description`},this.description),this.url&&t("div",{class:`hy-hero__actions`},t("a",{class:"hy-hero__link",href:this.url,"aria-label":this.scLabel,target:e,"data-text-color":this.heroTextColor},this.urlTitle,t("hy-icon",{icon:"hy-icon-arrow-right",size:16})))))))}return t(h,null,t("div",{class:a.join(" ")},t("div",{class:`hy-hero__container`},this.createImageElement(this,this._sourceSet,this.setAspectRatio()),t("div",{class:`hy-hero__content-container`},t("div",{class:`hy-hero__content`},t("div",{class:`hy-hero__title-container`},t("h2",{innerHTML:this.heading,class:l})),this.description&&t("p",{class:`hy-hero__description`},this.description),this.url&&t("div",{class:`hy-hero__actions`},t("hy-cta-button",{"link-content":this.urlTitle,"sc-label":this.scLabel,url:this.url,"is-external":this.isExternal,variant:e})))))),t("hy-box",{mb:"2, 2, 1, 1"}))}get el(){return i(this)}};m.style=g;export{m as hy_hero};
+import{r as e,h as t,H as i,g as h}from"./index-f84f2a7d.js";import{j as r}from"./globalScript-5a4b7abf.js";import{H as o,a,b as n,c as l,d}from"./utils-2819fd7e.js";const g=':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-hero{position:relative;padding-bottom:0}@media (min-width: 60rem){.hy-hero:not(.hy-hero--full-image){margin-top:32px}}@media (min-width: 60rem){.hy-hero:not(.has-shortcuts){margin-bottom:32px}}@media (min-width: 75.0625rem){.without-sidebar .hy-hero{max-width:1216px;margin-right:auto;margin-left:auto}}@media (min-width: 75.0625rem){.with-sidebar:not(.hy-hero--full-image) .hy-hero{padding-left:32px;padding-right:32px}}@media (min-width: 1601px){.with-sidebar:not(.hy-hero--full-image) .hy-hero{padding-right:0;padding-left:0;max-width:1216px;margin-right:auto;margin-left:auto}}.hy-hero--full-image{--dark-bg:rgba(0, 0, 0, 0.55);--light-bg:rgba(255, 255, 255, 0.50);--dark-text:var(--brand-main-nearly-black);--light-text:var(--grayscale-white);border-bottom:1px solid var(--grayscale-medium-dark)}@media (min-width: 60rem){.hy-hero--full-image{border-bottom:4px solid var(--grayscale-black);margin-left:-2rem;margin-right:-2rem}}@media (min-width: 75.0625rem){.without-sidebar .hy-hero--full-image{max-width:none;margin-left:-2rem;margin-right:-2rem}}.hy-hero--full-image .hy-hero__container{grid-template-columns:repeat(4, 1fr);grid-template-rows:1fr}.hy-hero--full-image .hy-hero__image-container{grid-column:1/-1;grid-row:1/-1;-o-object-fit:cover;object-fit:cover;padding:0;width:100%}.hy-hero--full-image .hy-hero__image-container img{aspect-ratio:16/8}.hy-hero--full-image .hy-hero__content-container{padding:0}@media (min-width: 60rem){.hy-hero--full-image .hy-hero__content-container{align-self:center;grid-column:1/3;grid-row:1/-1;margin-left:32px;max-width:95%;z-index:2}}@media (min-width: 75.0625rem){.hy-hero--full-image .hy-hero__content-container{margin-left:0}}.hy-hero--full-image .hy-hero__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:24px;padding:16px 16px 32px 16px}@media (min-width: 60rem){.hy-hero--full-image .hy-hero__content{margin-left:32px;gap:24px;padding:32px}}@media (min-width: 75.0625rem){.hy-hero--full-image .hy-hero__content{margin-left:64px;gap:32px}}@media (min-width: 1601px){.hy-hero--full-image .hy-hero__content{margin-left:96px}}.hy-hero--full-image .hy-hero__content[data-text-color=dark_text_light_bg]{-webkit-backdrop-filter:blur(250px);backdrop-filter:blur(250px);background-color:var(--grayscale-white);color:var(--dark-text)}@media (min-width: 60rem){.hy-hero--full-image .hy-hero__content[data-text-color=dark_text_light_bg]{background:var(--light-bg)}}.hy-hero--full-image .hy-hero__content[data-text-color=light_text_dark_bg]{-webkit-backdrop-filter:blur(250px);backdrop-filter:blur(250px);background:var(--grayscale-black);color:var(--light-text)}@media (min-width: 60rem){.hy-hero--full-image .hy-hero__content[data-text-color=light_text_dark_bg]{background:var(--dark-bg)}}.hy-hero--full-image .hy-hero__content[data-text-color=dark_text_no_bg]{background-color:var(--grayscale-white);color:var(--dark-text)}@media (min-width: 60rem){.hy-hero--full-image .hy-hero__content[data-text-color=dark_text_no_bg]{background:transparent;text-shadow:0 0 5px var(--grayscale-white)}}.hy-hero--full-image .hy-hero__content[data-text-color=light_text_no_bg]{background-color:var(--grayscale-black);color:var(--light-text)}@media (min-width: 60rem){.hy-hero--full-image .hy-hero__content[data-text-color=light_text_no_bg]{background:transparent;text-shadow:0 0 5px var(--grayscale-black)}}.hy-hero--full-image .hy-hero__subtitle{font-family:var(--main-font-family);font-size:18px;font-weight:700;line-height:1.2;position:relative}.hy-hero--full-image .hy-hero__subtitle::after{aspect-ratio:1;background-color:currentColor;bottom:-10px;content:"";display:block;height:4px;left:0;position:absolute;width:64px}@media (min-width: 60rem){.hy-hero--full-image .hy-hero__subtitle{font-size:20px}}.hy-hero--full-image h2.hy-hero__title.hy-heading__hero{color:inherit !important;font-family:var(--main-font-family);font-size:32px;font-weight:700;line-height:1.2}@media (min-width: 75.0625rem){.hy-hero--full-image h2.hy-hero__title.hy-heading__hero{font-size:36px}}@media (min-width: 1601px){.hy-hero--full-image h2.hy-hero__title.hy-heading__hero{font-size:64px}}.hy-hero--full-image .hy-hero__description{font-family:var(--main-font-family);font-size:16px;font-weight:400;line-height:1.5;margin:0;padding:0}@media (min-width: 1601px){.hy-hero--full-image .hy-hero__description{font-size:17px}}.hy-hero--full-image .hy-hero__actions{margin:0}.hy-hero--full-image .hy-hero__actions .hy-hero__link{--light-bg:var(--grayscale-white);--dark-bg:var(--grayscale-black);--light-text:var(--grayscale-white);--dark-text:var(--grayscale-black);-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);font-size:16px;font-weight:700;gap:8px;line-height:18px;padding:13px 16px;text-decoration:none;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.hy-hero--full-image .hy-hero__actions .hy-hero__link:hover{text-decoration:underline}.hy-hero--full-image .hy-hero__actions .hy-hero__link svg{width:16px;height:16px}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=dark_text_light_bg]{background:var(--dark-bg);color:var(--light-text)}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=dark_text_light_bg] svg{fill:var(--light-text)}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=light_text_dark_bg]{background:var(--light-bg);color:var(--dark-text)}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=light_text_dark_bg] svg{fill:var(--dark-text)}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=dark_text_no_bg]{background:var(--dark-bg);color:var(--light-text);text-shadow:none}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=dark_text_no_bg] svg{fill:var(--light-text)}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=light_text_no_bg]{background:var(--light-bg);color:var(--dark-text);text-shadow:none}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=light_text_no_bg] svg{fill:var(--dark-text)}.hy-hero--full-image .hy-image__image{-o-object-fit:cover;object-fit:cover}@media (min-width: 60rem){.hy-hero--white{margin-top:0}}@media (min-width: 60rem){.hy-hero--white:not(.has-shortcuts){padding-bottom:48px}}.hy-hero--white:not(.has-shortcuts):after{width:100%;background-color:var(--grayscale-medium-dark);height:1px;content:"";margin:0 auto;display:block}@media (min-width: 60rem){.hy-hero--white:not(.has-shortcuts):after{position:absolute;left:0;right:0;bottom:0}}.hy-hero--white:not(.hy-hero--front_page):after{max-width:1216px}.hy-hero__container{position:relative}@media (min-width: 60rem){.hy-hero__container{display:grid;position:relative}}@media (min-width: 60rem){.hy-hero--small .hy-hero__container{grid-template-columns:60% 1fr}}@media (min-width: 60rem){.hy-hero--large .hy-hero__container{grid-template-columns:repeat(2, 1fr)}}.hy-hero__content-container{padding:24px 1rem 40px;margin:0 auto;width:100%}@media (min-width: 30rem){.hy-hero__content-container{padding:40px 2rem}}@media (min-width: 75.0625rem){.hy-hero__content-container{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;padding:40px 24px}}@media (min-width: 1601px){.hy-hero__content-container{max-width:1216px}}.hy-hero--black .hy-hero__content-container{background-color:var(--grayscale-black)}.hy-hero--blue .hy-hero__content-container{background-color:var(--brand-main)}.hy-hero--white .hy-hero__content-container{background-color:var(--grayscale-white)}@media (min-width: 75.0625rem){.hy-hero--white .hy-hero__content-container{padding:40px 24px 40px 0}}.hy-hero__content{position:relative}h2.hy-hero__title{-ms-hyphens:auto;hyphens:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;max-width:100%;width:auto}.hy-hero--blue h2.hy-hero__title{color:var(--grayscale-white) !important}.hy-hero--black h2.hy-hero__title{color:var(--grayscale-white) !important}.hy-hero--white h2.hy-hero__title{color:var(--grayscale-black) !important}h2.hy-hero__title.hy-heading__hero{font-size:2.25rem;line-height:33px;font-weight:700;color:var(--grayscale-black);font-family:var(--main-font-family);letter-spacing:-0.8px;margin-bottom:0;text-transform:none;text-wrap:balance}@media (min-width: 1024px){h2.hy-hero__title.hy-heading__hero{font-size:2.25rem;line-height:40px;letter-spacing:-1.15px}}@media (min-width: 1601px){h2.hy-hero__title.hy-heading__hero{font-size:2.375rem;line-height:48px;letter-spacing:-1.3px}}.hy-hero__description{font-size:1rem;line-height:24px;font-family:var(--main-font-family);margin:16px 0 0 0;padding:0;position:relative;text-wrap:pretty}@media (min-width: 1601px){.hy-hero__description{font-size:1.0625rem;line-height:26px}}.hy-hero--black .hy-hero__description{color:var(--grayscale-white)}.hy-hero--blue .hy-hero__description{color:var(--grayscale-white)}.hy-hero--white .hy-hero__description{color:var(--grayscale-black)}.hy-hero__actions{margin-top:24px}.hy-hero__image-container{margin:0;padding:0;position:relative}.hy-hero__image-container figure{margin:0}@media (min-width: 60rem){.hy-hero__image-container{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;padding:8px 0}}@media (min-width: 60rem){.hy-hero--front_page .hy-hero__image-container{padding:0}}.hy-image__image{display:block;height:100%;min-height:205px;-o-object-fit:contain;object-fit:contain;width:100%}.has-cover .hy-image__image{-o-object-fit:cover;object-fit:cover}.hy-hero.hy-hero--group_landing.hy-hero--generic_site_group h2.hy-hero__title.hy-heading__hero,.hy-hero.hy-hero--research_group h2.hy-hero__title.hy-heading__hero{font-size:2rem;line-height:38px;font-weight:700;color:var(--grayscale-black);font-family:var(--main-font-family);letter-spacing:-0.8px;margin-bottom:0;text-transform:uppercase}@media (min-width: 1024px){.hy-hero.hy-hero--group_landing.hy-hero--generic_site_group h2.hy-hero__title.hy-heading__hero,.hy-hero.hy-hero--research_group h2.hy-hero__title.hy-heading__hero{font-size:2.875rem;line-height:54px;letter-spacing:-1.15px}}@media (min-width: 1601px){.hy-hero.hy-hero--group_landing.hy-hero--generic_site_group h2.hy-hero__title.hy-heading__hero,.hy-hero.hy-hero--research_group h2.hy-hero__title.hy-heading__hero{font-size:3.25rem;line-height:60px;letter-spacing:-1.3px}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--white{padding-top:40px;margin-top:0}}.hy-hero.hy-hero--front_page h2.hy-hero__title.hy-heading__hero{font-size:2rem;line-height:38px;font-weight:700;color:var(--grayscale-black);font-family:var(--main-font-family);letter-spacing:-0.8px;margin-bottom:0;text-transform:uppercase}@media (min-width: 1024px){.hy-hero.hy-hero--front_page h2.hy-hero__title.hy-heading__hero{font-size:2.875rem;line-height:54px;letter-spacing:-1.15px}}@media (min-width: 1601px){.hy-hero.hy-hero--front_page h2.hy-hero__title.hy-heading__hero{font-size:3.25rem;line-height:60px;letter-spacing:-1.3px}}@media (min-width: 75.0625rem){.hy-hero.hy-hero--front_page{margin-left:-32px;margin-right:-32px;max-width:none}}.hy-hero.hy-hero--front_page .hy-hero__container{position:relative}@media (min-width: 60rem){.hy-hero.hy-hero--front_page .hy-hero__container{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}}.hy-hero.hy-hero--front_page .hy-hero__content-container{padding:24px 1rem 40px;margin:0 auto;width:100%}.hy-hero--black .hy-hero.hy-hero--front_page .hy-hero__content-container{background-color:var(--grayscale-black)}.hy-hero--blue .hy-hero.hy-hero--front_page .hy-hero__content-container{background-color:var(--brand-main)}.hy-hero--white .hy-hero.hy-hero--front_page .hy-hero__content-container{background-color:var(--grayscale-white)}@media (min-width: 30rem){.hy-hero.hy-hero--front_page .hy-hero__content-container{padding:24px 2rem 40px}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page .hy-hero__content-container{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;min-height:330px;padding:56px 2rem}}@media (min-width: 1060px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:373px}}@media (min-width: 1160px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:480px}}@media (min-width: 75.0625rem){.hy-hero.hy-hero--front_page .hy-hero__content-container{padding-left:32px;padding-right:8px}}@media (min-width: 1260px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:443px}}@media (min-width: 1280px){.hy-hero.hy-hero--front_page .hy-hero__content-container{max-width:1216px;padding-left:0}}@media (min-width: 1360px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:478px}}@media (min-width: 1460px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:513px}}@media (min-width: 1560px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:548px}}@media (min-width: 1601px){.hy-hero.hy-hero--front_page .hy-hero__content-container{padding-left:0}}@media (min-width: 1660px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:583px}}@media (min-width: 1760px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:619px}}@media (min-width: 1860px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:654px}}@media (min-width: 1920px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:675px}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--small .hy-hero__image-container{width:40%}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--small .hy-hero__content{max-width:60%}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--large .hy-hero__image-container{width:50%}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--large .hy-hero__content{max-width:50%}}.hy-hero.hy-hero--front_page .hy-hero__image-container{background-position:50% 50%;background-size:cover;background:transparent;margin:0;padding:0;position:relative}.hy-hero.hy-hero--front_page .hy-hero__image-container figure{margin:0}@media (min-width: 60rem){.hy-hero.hy-hero--front_page .hy-hero__image-container{background-color:var(--grayscale-white);bottom:0;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;padding:8px 0;position:absolute;right:0;top:0}}.hy-hero.hy-hero--front_page .hy-hero__content{position:relative}@media (min-width: 60rem){.hy-hero.hy-hero--front_page .hy-hero__content{padding-right:24px}}.hy-hero.hy-hero--front_page .hy-image__image{display:block;height:100%;min-height:205px;-o-object-fit:cover;object-fit:cover;width:100%}.hy-hero__spacer-box{display:none}@media (min-width: 60rem){.hy-hero__spacer-box{display:block;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;position:absolute;inset:0}}@media (min-width: 60rem){.hy-hero--small .hy-hero__spacer-box{width:60%}}@media (min-width: 60rem){.hy-hero--large .hy-hero__spacer-box{width:50%}}.hy-hero--black .hy-hero__spacer-box{background-color:var(--grayscale-black)}.hy-hero--blue .hy-hero__spacer-box{background-color:var(--brand-main)}.hy-hero--white .hy-hero__spacer-box{background-color:var(--grayscale-white)}';let y=null;let m=250;const c=class{constructor(t){e(this,t);this.heroType=o.landing;this.heroGroupType=a.default;this.colorVariant=n.blue;this.sizeVariant=l.large;this.heroTextColor=null;this.image=undefined;this.imageHeight=null;this.imageWidth=null;this.imageAltText="";this.disableLazy=false;this.hasShortcuts=false;this.heading=undefined;this.description=undefined;this.subtitle=undefined;this.url=undefined;this.urlTitle=undefined;this.scLabel=undefined;this.isExternal=false;this.sourceSet=undefined}async componentWillLoad(){this._sourceSet=await r(this.sourceSet)}handleHeroImageObjectFitValue(e,t){const i=t.getElementsByClassName("hy-hero__content-container")[0];if(e==="small"){if(i.offsetHeight>=300){t.classList.add("has-cover")}else{t.classList.remove("has-cover")}}if(e==="large"){if(i.offsetHeight>=344){t.classList.add("has-cover")}else{t.classList.remove("has-cover")}}}createImageElement(e,i,h){return t("div",{class:`hy-hero__image-container`,style:h},e.image&&(i?t("picture",null,i.map((e=>t("source",{srcSet:e.src,media:e.media,type:e.type,sizes:e.sizes?e.sizes:""}))),t("img",{loading:e.disableLazy?"eager":"lazy",alt:e.imageAltText,class:`hy-image__image`,src:e.image,height:e.imageHeight,width:e.imageWidth})):t("img",{loading:e.disableLazy?"eager":"lazy",alt:e.imageAltText,class:`hy-image__image`,src:e.image,height:e.imageHeight,width:e.imageWidth})))}setAspectRatio(e=16,t=10){const i=t/e*100;return{"--aspectRatio":`${i}%`}}render(){let e=d.heroWhite;let h=this.colorVariant;let r=this.heroType;if(this.heroType==="minor_landing"){h=n.white;r=o.landing}if(h===n.blue){e=d.heroBlue}if(h===n.black){e=d.heroBlack}if(!h||h==="fp_white"){h=n.white}const a=["hy-hero",`hy-hero--${r}`,`hy-hero--${this.heroGroupType}`,`hy-hero--${h}`,`hy-hero--${this.sizeVariant}`,this.hasShortcuts?"has-shortcuts":""];const l=["hy-hero__title","hy-heading__hero"].join(" ");window.onload=()=>{const e=document.getElementsByClassName("hy-hero")[0];this.handleHeroImageObjectFitValue(this.sizeVariant,e);window.addEventListener("resize",(()=>{clearTimeout(y);y=setTimeout((()=>this.handleHeroImageObjectFitValue(this.sizeVariant,e)),m)}))};if(r==="front_page"&&this.sizeVariant!=="full-image"){return t(i,null,t("div",{class:a.join(" ")},t("div",{class:`hy-hero__container`},this.createImageElement(this,this._sourceSet,this.setAspectRatio()),t("div",{class:`hy-hero__spacer-box`}),t("div",{class:`hy-hero__content-container`},t("div",{class:`hy-hero__content`},t("div",{class:`hy-hero__title-container`},t("h2",{innerHTML:this.heading,class:l})),this.description&&t("p",{class:`hy-hero__description`},this.description),this.url&&t("div",{class:`hy-hero__actions`},t("hy-cta-button",{"link-content":this.urlTitle,"sc-label":this.scLabel,url:this.url,"is-external":this.isExternal,variant:e})))))),t("hy-box",{mb:"2, 2, 1, 1"}))}if(this.sizeVariant==="full-image"){const e=this.isExternal?"_blank":"_self";return t("div",{class:`hy-hero hy-hero--full-image`},t("div",{class:`hy-hero__container`},this.createImageElement(this,this._sourceSet,this.setAspectRatio(16,8)),t("div",{class:`hy-hero__content-container`},t("div",{class:`hy-hero__content`,"data-text-color":this.heroTextColor},this.subtitle&&t("span",{class:`hy-hero__subtitle`},this.subtitle),t("h2",{innerHTML:this.heading,class:l}),this.description&&t("p",{class:`hy-hero__description`},this.description),this.url&&t("div",{class:`hy-hero__actions`},t("a",{class:"hy-hero__link",href:this.url,"aria-label":this.scLabel,target:e,"data-text-color":this.heroTextColor},this.urlTitle,t("hy-icon",{icon:"hy-icon-arrow-right",size:16})))))))}return t(i,null,t("div",{class:a.join(" ")},t("div",{class:`hy-hero__container`},this.createImageElement(this,this._sourceSet,this.setAspectRatio()),t("div",{class:`hy-hero__content-container`},t("div",{class:`hy-hero__content`},t("div",{class:`hy-hero__title-container`},t("h2",{innerHTML:this.heading,class:l})),this.description&&t("p",{class:`hy-hero__description`},this.description),this.url&&t("div",{class:`hy-hero__actions`},t("hy-cta-button",{"link-content":this.urlTitle,"sc-label":this.scLabel,url:this.url,"is-external":this.isExternal,variant:e})))))),t("hy-box",{mb:"2, 2, 1, 1"}))}get el(){return h(this)}};c.style=g;export{c as hy_hero};
 //# sourceMappingURL=hy-hero.entry.js.map

package/dist/huds-lib/hy-hero.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["hyHeroCss","timeout","delay","HyHero","HeroTypeVariant","landing","HeroGroupTypeVariant","default","HeroColorVariant","blue","HeroSizeVariant","large","async","this","_sourceSet","jsonParserWorker","sourceSet","handleHeroImageObjectFitValue","heroSizeVariant","heroElement","heroContentContainerElement","getElementsByClassName","offsetHeight","classList","add","remove","createImageElement","props","srcSet","aspectRatio","h","class","style","image","map","item","src","media","type","sizes","loading","disableLazy","alt","imageAltText","height","imageHeight","width","imageWidth","setAspectRatio","aspectRatioWidth","aspectRatioHeight","aspect","render","variant","CtaLinkButtonVariants","heroWhite","colorVariantValue","colorVariant","heroTypeValue","heroType","white","heroBlue","black","heroBlack","hyHeroClasses","heroGroupType","sizeVariant","hasShortcuts","heroTitleClasses","join","window","onload","document","addEventListener","clearTimeout","setTimeout","Host","innerHTML","heading","description","url","urlTitle","scLabel","isExternal","mb","linkTarget","heroTextColor","subtitle","href","target","icon","size"],"sources":["./src/components/hy-hero/hy-hero.scss?tag=hy-hero","./src/components/hy-hero/hy-hero.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-hero {\n  position: relative;\n  padding-bottom: 0;\n\n  &:not(.hy-hero--full-image) {\n    @include breakpoint($wide) {\n      margin-top: 32px;\n    }\n  }\n\n  &:not(.has-shortcuts) {\n    @include breakpoint($wide) {\n      margin-bottom: 32px;\n    }\n  }\n\n  .without-sidebar :not(.hy-hero--full-image) {\n    @include breakpoint($extrawide) {\n      max-width: 1216px;\n      margin-right: auto;\n      margin-left: auto;\n    }\n  }\n\n  .with-sidebar:not(.hy-hero--full-image) & {\n    @include breakpoint($extrawide) {\n      padding-left: 32px;\n      padding-right: 32px;\n    }\n\n    @include breakpoint($xlarge) {\n      padding-right: 0;\n      padding-left: 0;\n      max-width: 1216px;\n      margin-right: auto;\n      margin-left: auto;\n    }\n  }\n\n  &--full-image {\n    --dark-bg: rgba(0, 0, 0, 0.55);\n    --light-bg: rgba(255, 255, 255, 0.50);\n    --dark-text: var(--brand-main-nearly-black);\n    --light-text: var(--grayscale-white);\n    \n    border-bottom: 1px solid var(--grayscale-medium-dark);\n    \n    @include breakpoint($wide) {\n      border-bottom: 4px solid var(--grayscale-black);\n      margin-left: -2rem;\n      margin-right: -2rem;\n    }\n\n    .hy-hero__container {\n      grid-template-columns: repeat(4 , 1fr);\n      grid-template-rows: 1fr;\n    }\n\n    .hy-hero__image-container {\n      grid-column: 1 / -1;\n      grid-row: 1 / -1;\n      object-fit: cover;\n      padding: 0;\n      width: 100%;\n      img {\n        aspect-ratio: 16 / 8;\n      }\n    }\n\n    .hy-hero__content-container {\n      padding: 0;\n\n      @include breakpoint($wide) {\n        align-self: center;\n        grid-column: 1  / 3;\n        grid-row: 1 / -1;\n        margin-left: 32px;\n        max-width: 95%;\n        z-index: 2;\n      }\n      @include breakpoint($extrawide) {\n        margin-left: 0;\n      }\n    }\n\n    .hy-hero__content {\n      display: flex;\n      flex-direction: column;\n      gap: 24px;\n      padding: 16px 16px 32px 16px;\n      \n      @include breakpoint($wide) {\n        margin-left: 32px;\n        gap: 24px;\n        padding: 32px;\n      }\n      @include breakpoint($extrawide) {\n        margin-left: 64px;\n        gap: 32px;\n      }\n      @include breakpoint($xlarge) {\n        margin-left: 96px;\n      }\n\n      @include breakpoint($wide) {\n        \n      }\n\n      &[data-text-color=\"dark_text_light_bg\"] {\n        backdrop-filter: blur(250px);\n        background-color: var(--grayscale-white);\n        color: var(--dark-text);\n\n        @include breakpoint($wide) {\n          background: var(--light-bg);\n        }\n      }\n      &[data-text-color=\"light_text_dark_bg\"] {\n        backdrop-filter: blur(250px);\n        background: var(--grayscale-black);\n        color: var(--light-text);\n\n        @include breakpoint($wide) {\n          background: var(--dark-bg);\n        }\n      }\n      &[data-text-color=\"dark_text_no_bg\"] {\n        background-color: var(--grayscale-white);\n        color: var(--dark-text);\n\n        @include breakpoint($wide) {\n          background: transparent;\n          text-shadow: 0 0 5px var(--grayscale-white);\n        }\n      }\n      &[data-text-color=\"light_text_no_bg\"] {\n        background-color: var(--grayscale-black);\n        color: var(--light-text);\n\n        @include breakpoint($wide) {\n          background: transparent;\n          text-shadow: 0 0 5px var(--grayscale-black);\n        }\n      }\n    }\n\n    .hy-hero__subtitle {\n      font-family: var(--main-font-family);\n      font-size: 18px;\n      font-weight: 700;\n      line-height: 1.2;\n      position: relative;\n\n      &::after {\n        aspect-ratio: 1;\n        background-color: currentColor;\n        bottom: -10px;\n        content: '';\n        display: block;\n        height: 4px;\n        left: 0;\n        position: absolute;\n        width: 64px;\n      }\n\n      @include breakpoint($wide) {\n        font-size: 20px;\n      }\n    }\n\n    h2.hy-hero__title.hy-heading__hero {\n      color: inherit !important;\n      font-family: var(--main-font-family);\n      font-size: 32px;\n      font-weight: 700; \n      line-height: 1.2;\n\n      @include breakpoint($extrawide) {\n        font-size: 36px;\n      }\n\n      @include breakpoint($xlarge) {\n        font-size: 64px;\n      }\n    }\n\n    .hy-hero__description {\n      font-family: var(--main-font-family);\n      font-size: 16px;\n      font-weight: 400; \n      line-height: 1.5;\n      margin: 0;\n      padding: 0;\n\n      @include breakpoint($xlarge) {\n        font-size: 17px;\n      }\n    }\n\n    .hy-hero__actions {\n      margin: 0;\n\n      .hy-hero__link {\n        --light-bg: var(--grayscale-white);\n        --dark-bg: var(--grayscale-black);\n        --light-text: var(--grayscale-white);\n        --dark-text: var(--grayscale-black);\n\n        align-items: center;\n        display: flex;\n        font-family: var(--main-font-family);\n        font-size: 16px;\n        font-weight: 700;\n        gap: 8px;\n        line-height: 18px;\n        padding: 13px 16px;\n        text-decoration: none;\n        width: fit-content;\n\n        &:hover {\n          text-decoration: underline;\n        }\n\n        svg {\n          width: 16px;\n          height: 16px;\n        }\n\n        &[data-text-color=\"dark_text_light_bg\"] {\n          background: var(--dark-bg);\n          color: var(--light-text);\n          svg {fill: var(--light-text)}\n        }\n        &[data-text-color=\"light_text_dark_bg\"] {\n          background: var(--light-bg);\n          color: var(--dark-text);\n          svg {fill: var(--dark-text)}\n        }\n        &[data-text-color=\"dark_text_no_bg\"] {\n          background: var(--dark-bg);\n          color: var(--light-text);\n          text-shadow: none;\n          svg {fill: var(--light-text)}\n        }\n        &[data-text-color=\"light_text_no_bg\"] {\n          background: var(--light-bg);\n          color: var(--dark-text);\n          text-shadow: none;\n          svg {fill: var(--dark-text)}\n        }\n      }\n    }\n\n    .hy-image__image {\n      object-fit: cover;\n    }\n  }\n\n  &--white {\n    @include breakpoint($wide) {\n      margin-top: 0;\n    }\n\n    &:not(.has-shortcuts) {\n      @include breakpoint($wide) {\n        padding-bottom: 48px;\n      }\n    }\n\n    &:not(.has-shortcuts):after {\n      width: 100%;\n      background-color: var(--grayscale-medium-dark);\n      height: 1px;\n      content: \"\";\n      margin: 0 auto;\n      display: block;\n\n      @include breakpoint($wide) {\n        position: absolute;\n        left: 0;\n        right: 0;\n        bottom: 0;\n      }\n    }\n\n    &:not(.hy-hero--front_page):after {\n      max-width: 1216px;\n    }\n  }\n}\n\n.hy-hero__container {\n  position: relative;\n\n  @include breakpoint($wide) {\n    display: grid;\n    position: relative;\n  }\n\n  .hy-hero--small & {\n    @include breakpoint($wide) {\n      grid-template-columns: 60% 1fr;\n    }\n  }\n\n  .hy-hero--large & {\n    @include breakpoint($wide) {\n      grid-template-columns: repeat(2, 1fr);\n    }\n  }\n}\n\n.hy-hero__content-container {\n  padding: 24px 1rem 40px;\n  margin: 0 auto;\n  width: 100%;\n\n  @include breakpoint($narrow) {\n    padding: 40px 2rem;\n  }\n\n  @include breakpoint($extrawide) {\n    align-items: center;\n    display: flex;\n    padding: 40px 24px;\n  }\n\n  @include breakpoint($xlarge) {\n    max-width: 1216px;\n  }\n\n  .hy-hero--black & {\n    background-color: var(--grayscale-black);\n  }\n\n  .hy-hero--blue & {\n    background-color: var(--brand-main);\n  }\n\n  .hy-hero--white & {\n    background-color: var(--grayscale-white);\n\n    @include breakpoint($extrawide) {\n      padding: 40px 24px 40px 0;\n    }\n  }\n}\n\n.hy-hero__content {\n  position: relative;\n}\n\nh2.hy-hero__title {\n  hyphens: auto;\n  display: flex;\n  flex-grow: 1;\n  flex-shrink: 0;\n  max-width: 100%;\n  width: auto;\n\n  .hy-hero--blue & {\n    color: var(--grayscale-white) !important;\n  }\n\n  .hy-hero--black & {\n    color: var(--grayscale-white) !important;\n  }\n\n  .hy-hero--white & {\n    color: var(--grayscale-black) !important;\n  }\n\n  &.hy-heading__hero {\n    @include font-size(36px, 33px);\n    @include font-weight($bold);\n    color: var(--grayscale-black);\n    font-family: var(--main-font-family);\n    letter-spacing: -0.8px;\n    margin-bottom: 0;\n    text-transform: none;\n    text-wrap: balance;\n\n    @include breakpoint(1024px) {\n      @include font-size(36px, 40px);\n      letter-spacing: -1.15px;\n    }\n\n    @include breakpoint($xlarge) {\n      @include font-size(38px, 48px);\n      letter-spacing: -1.3px;\n    }\n  }\n}\n\n.hy-hero__description {\n  @include font-size(16px, 24px);\n  font-family: var(--main-font-family);\n  margin: 16px 0 0 0;\n  padding: 0;\n  position: relative;\n  text-wrap: pretty;\n\n  @include breakpoint($xlarge) {\n    @include font-size(17px, 26px);\n  }\n\n  .hy-hero--black & {\n    color: var(--grayscale-white);\n  }\n\n  .hy-hero--blue & {\n    color: var(--grayscale-white);\n  }\n\n  .hy-hero--white & {\n    color: var(--grayscale-black);\n  }\n}\n\n.hy-hero__actions {\n  margin-top: 24px;\n}\n\n.hy-hero__image-container {\n  margin: 0;\n  padding: 0;\n  position: relative;\n\n  figure {\n    margin: 0;\n  }\n\n  @include breakpoint($wide) {\n    order: 2;\n    padding: 8px 0;\n  }\n\n  .hy-hero--front_page & {\n    @include breakpoint($wide) {\n      padding: 0;\n    }\n  }\n}\n\n.hy-image__image {\n  display: block;\n  height: 100%;\n  min-height: 205px;\n  object-fit: contain;\n  width: 100%;\n\n  .has-cover & {\n    object-fit: cover;\n  }\n}\n\n// Research group and generic with minor landing\n.hy-hero.hy-hero--group_landing.hy-hero--generic_site_group,\n.hy-hero.hy-hero--research_group {\n  h2.hy-hero__title.hy-heading__hero {\n    @include font-size(32px, 38px);\n    @include font-weight($bold);\n    color: var(--grayscale-black);\n    font-family: var(--main-font-family);\n    letter-spacing: -0.8px;\n    margin-bottom: 0;\n    text-transform: uppercase;\n\n    @include breakpoint(1024px) {\n      @include font-size(46px, 54px);\n      letter-spacing: -1.15px;\n    }\n\n    @include breakpoint($xlarge) {\n      @include font-size(52px, 60px);\n      letter-spacing: -1.3px;\n    }\n  }\n}\n\n// FRONTPAGE VARIATION\n\n.hy-hero.hy-hero--front_page {\n  &.hy-hero--white {\n    @include breakpoint($wide) {\n      padding-top: 40px;\n      margin-top: 0;\n    }\n  }\n\n  h2.hy-hero__title.hy-heading__hero {\n    @include font-size(32px, 38px);\n    @include font-weight($bold);\n    color: var(--grayscale-black);\n    font-family: var(--main-font-family);\n    letter-spacing: -0.8px;\n    margin-bottom: 0;\n    text-transform: uppercase;\n\n    @include breakpoint(1024px) {\n      @include font-size(46px, 54px);\n      letter-spacing: -1.15px;\n    }\n\n    @include breakpoint($xlarge) {\n      @include font-size(52px, 60px);\n      letter-spacing: -1.3px;\n    }\n  }\n\n  @include breakpoint($extrawide) {\n    margin-left: -32px;\n    margin-right: -32px;\n    max-width: none;\n  }\n\n  .hy-hero__container {\n    position: relative;\n\n    @include breakpoint($wide) {\n      display: flex;\n      position: relative;\n    }\n  }\n\n  .hy-hero__content-container {\n    padding: 24px 1rem 40px;\n    margin: 0 auto;\n    width: 100%;\n\n    .hy-hero--black & {\n      background-color: var(--grayscale-black);\n    }\n\n    .hy-hero--blue & {\n      background-color: var(--brand-main);\n    }\n\n    .hy-hero--white & {\n      background-color: var(--grayscale-white);\n    }\n\n    @include breakpoint($narrow) {\n      padding: 24px 2rem 40px;\n    }\n\n    @include breakpoint($wide) {\n      align-items: center;\n      display: flex;\n      min-height: 330px;\n      padding: 56px 2rem;\n    }\n\n    @include breakpoint(1060px) {\n      min-height: 373px;\n    }\n\n    @include breakpoint(1160px) {\n      min-height: 480px;\n    }\n\n    @include breakpoint($extrawide) {\n      padding-left: 32px;\n      padding-right: 8px;\n    }\n\n    @include breakpoint(1260px) {\n      min-height: 443px;\n    }\n\n    @include breakpoint(1280px) {\n      max-width: 1216px;\n      padding-left: 0;\n    }\n\n    @include breakpoint(1360px) {\n      min-height: 478px;\n    }\n\n    @include breakpoint(1460px) {\n      min-height: 513px;\n    }\n\n    @include breakpoint(1560px) {\n      min-height: 548px;\n    }\n\n    @include breakpoint($xlarge) {\n      padding-left: 0;\n    }\n\n    @include breakpoint(1660px) {\n      min-height: 583px;\n    }\n\n    @include breakpoint(1760px) {\n      min-height: 619px;\n    }\n\n    @include breakpoint(1860px) {\n      min-height: 654px;\n    }\n\n    @include breakpoint(1920px) {\n      min-height: 675px;\n    }\n  }\n\n  &.hy-hero--small {\n    .hy-hero__image-container {\n      @include breakpoint($wide) {\n        width: 40%;\n      }\n    }\n\n    .hy-hero__content {\n      @include breakpoint($wide) {\n        max-width: 60%;\n      }\n    }\n  }\n\n  &.hy-hero--large {\n    .hy-hero__image-container {\n      @include breakpoint($wide) {\n        width: 50%;\n      }\n    }\n\n    .hy-hero__content {\n      @include breakpoint($wide) {\n        max-width: 50%;\n      }\n    }\n  }\n\n  .hy-hero__image-container {\n    background-position: 50% 50%;\n    background-size: cover;\n    background: transparent;\n    margin: 0;\n    padding: 0;\n    position: relative;\n\n    figure {\n      margin: 0;\n    }\n\n    @include breakpoint($wide) {\n      background-color: var(--grayscale-white);\n      bottom: 0;\n      order: 2;\n      padding: 8px 0;\n      position: absolute;\n      right: 0;\n      top: 0;\n    }\n  }\n\n  .hy-hero__content {\n    position: relative;\n\n    @include breakpoint($wide) {\n      padding-right: 24px;\n    }\n  }\n\n  .hy-image__image {\n    display: block;\n    height: 100%;\n    min-height: 205px;\n    object-fit: cover;\n    width: 100%;\n  }\n}\n\n.hy-hero__spacer-box {\n  display: none;\n\n  @include breakpoint($wide) {\n    display: block;\n    order: 1;\n    position: absolute;\n    inset: 0;\n  }\n\n  .hy-hero--small & {\n    @include breakpoint($wide) {\n      width: 60%;\n    }\n  }\n\n  .hy-hero--large & {\n    @include breakpoint($wide) {\n      width: 50%;\n    }\n  }\n\n  .hy-hero--black & {\n    background-color: var(--grayscale-black);\n  }\n\n  .hy-hero--blue & {\n    background-color: var(--brand-main);\n  }\n\n  .hy-hero--white & {\n    background-color: var(--grayscale-white);\n  }\n}\n","export interface ImageSrcSet {\n  src: any;\n  media: string;\n  type: string;\n  sizes: string | null;\n}\nlet timeout = null;\nlet delay = 250;\n\nimport {Component, Element, h, Host, Prop} from \"@stencil/core\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\nimport {\n  CtaLinkButtonVariants,\n  HeroColorVariant,\n  HeroSizeVariant,\n  HeroGroupTypeVariant,\n  HeroTypeVariant,\n  HeroTextColor,\n} from \"../../utils/utils\";\n\n@Component({\n  tag: \"hy-hero\",\n  styleUrl: \"hy-hero.scss\",\n  shadow: false,\n})\nexport class HyHero {\n  @Element() el: HTMLElement;\n  @Prop() heroType: HeroTypeVariant = HeroTypeVariant.landing;\n  @Prop() heroGroupType: HeroGroupTypeVariant = HeroGroupTypeVariant.default;\n  @Prop() colorVariant: HeroColorVariant = HeroColorVariant.blue;\n  @Prop() sizeVariant: HeroSizeVariant = HeroSizeVariant.large;\n  @Prop() heroTextColor: HeroTextColor = null;\n  @Prop() image: string;\n  @Prop() imageHeight: number = null;\n  @Prop() imageWidth: number = null;\n  @Prop() imageAltText: string = \"\";\n  @Prop() disableLazy: boolean = false;\n  @Prop() hasShortcuts: boolean = false;\n  @Prop() heading: string;\n  @Prop() description: string;\n  @Prop() subtitle: string;\n  @Prop() url: string;\n  @Prop() urlTitle: string;\n  @Prop() scLabel?: string;\n  @Prop() isExternal: boolean = false;\n  private _sourceSet: ImageSrcSet[];\n  @Prop() sourceSet: ImageSrcSet[] | string;\n\n  async componentWillLoad() {\n    this._sourceSet = await jsonParserWorker(this.sourceSet);\n  }\n\n  // TODO: Refactor, find way to get rid of this.\n  handleHeroImageObjectFitValue(heroSizeVariant, heroElement) {\n    const heroContentContainerElement = heroElement.getElementsByClassName(\n      \"hy-hero__content-container\"\n    )[0] as HTMLElement;\n\n    if (heroSizeVariant === \"small\") {\n      if (heroContentContainerElement.offsetHeight >= 300) {\n        heroElement.classList.add(\"has-cover\");\n      } else {\n        heroElement.classList.remove(\"has-cover\");\n      }\n    }\n\n    if (heroSizeVariant === \"large\") {\n      if (heroContentContainerElement.offsetHeight >= 344) {\n        heroElement.classList.add(\"has-cover\");\n      } else {\n        heroElement.classList.remove(\"has-cover\");\n      }\n    }\n  }\n\n  createImageElement(props, srcSet, aspectRatio) {\n    return (\n      <div class={`hy-hero__image-container`} style={aspectRatio}>\n        {props.image &&\n          (srcSet ? (\n            <picture>\n              {srcSet.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={props.disableLazy ? \"eager\" : \"lazy\"}\n                alt={props.imageAltText}\n                class={`hy-image__image`}\n                src={props.image}\n                height={props.imageHeight}\n                width={props.imageWidth}\n              />\n            </picture>\n          ) : (\n            <img\n              loading={props.disableLazy ? \"eager\" : \"lazy\"}\n              alt={props.imageAltText}\n              class={`hy-image__image`}\n              src={props.image}\n              height={props.imageHeight}\n              width={props.imageWidth}\n            />\n          ))}\n      </div>\n    );\n  }\n\n  // TODO: Refactor, is this still even used?\n  setAspectRatio(aspectRatioWidth = 16, aspectRatioHeight = 10) {\n    const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;\n    return {\n      \"--aspectRatio\": `${aspect}%` as \"aspectRatio\",\n      //\"aspect-ratio\": `${aspectRatioWidth} / ${aspectRatioHeight}` as \"aspectRatio\",\n    };\n  }\n\n  render() {\n    let variant = CtaLinkButtonVariants.heroWhite;\n    let colorVariantValue = this.colorVariant;\n    let heroTypeValue = this.heroType;\n\n    //TODO: Refactor\n    if (this.heroType === \"minor_landing\") {\n      colorVariantValue = HeroColorVariant.white;\n      heroTypeValue = HeroTypeVariant.landing;\n    }\n\n    if (colorVariantValue === HeroColorVariant.blue) {\n      variant = CtaLinkButtonVariants.heroBlue;\n    }\n\n    if (colorVariantValue === HeroColorVariant.black) {\n      variant = CtaLinkButtonVariants.heroBlack;\n    }\n\n    if (!colorVariantValue || colorVariantValue === \"fp_white\") {\n      colorVariantValue = HeroColorVariant.white;\n    }\n\n    const hyHeroClasses = [\n      \"hy-hero\",\n      `hy-hero--${heroTypeValue}`,\n      `hy-hero--${this.heroGroupType}`,\n      `hy-hero--${colorVariantValue}`,\n      `hy-hero--${this.sizeVariant}`,\n      this.hasShortcuts ? 'has-shortcuts' : '',\n    ];\n\n    const heroTitleClasses = [\"hy-hero__title\", \"hy-heading__hero\"].join(\" \");\n\n    // TODO: Refactor, find way to get rid of this.\n    window.onload = () => {\n      const heroElement = document.getElementsByClassName(\"hy-hero\")[0] as HTMLElement;\n      this.handleHeroImageObjectFitValue(this.sizeVariant, heroElement);\n      window.addEventListener(\"resize\", () => {\n        clearTimeout(timeout);\n        timeout = setTimeout(() => this.handleHeroImageObjectFitValue(this.sizeVariant, heroElement), delay);\n      });\n    };\n\n    if (heroTypeValue === \"front_page\" && this.sizeVariant !== 'full-image') {\n      return (\n        <Host>\n          <div class={hyHeroClasses.join(\" \")}>\n            <div class={`hy-hero__container`}>\n              {this.createImageElement(this, this._sourceSet, this.setAspectRatio())}\n              <div class={`hy-hero__spacer-box`}></div>\n              <div class={`hy-hero__content-container`}>\n                <div class={`hy-hero__content`}>\n                  <div class={`hy-hero__title-container`}>\n                    <h2 innerHTML={this.heading} class={heroTitleClasses}></h2>\n                  </div>\n                  {this.description && <p class={`hy-hero__description`}>{this.description}</p>}\n                  {this.url && (\n                    <div class={`hy-hero__actions`}>\n                      <hy-cta-button\n                        link-content={this.urlTitle}\n                        sc-label={this.scLabel}\n                        url={this.url}\n                        is-external={this.isExternal}\n                        variant={variant}\n                      />\n                    </div>\n                  )}\n                </div>\n              </div>\n            </div>\n          </div>\n          <hy-box mb=\"2, 2, 1, 1\" />\n        </Host>\n      );\n    }\n\n    if (this.sizeVariant === 'full-image') {\n      const linkTarget = this.isExternal ? '_blank' : '_self';\n      return (\n        <div class={`hy-hero hy-hero--full-image`}>\n          <div class={`hy-hero__container`}>\n            {this.createImageElement(this, this._sourceSet, this.setAspectRatio(16, 8))}\n            <div class={`hy-hero__content-container`}>\n              <div class={`hy-hero__content`} data-text-color={this.heroTextColor}>\n                {this.subtitle && <span class={`hy-hero__subtitle`}>{this.subtitle}</span>}\n                <h2 innerHTML={this.heading} class={heroTitleClasses}></h2>\n                {this.description && <p class={`hy-hero__description`}>{this.description}</p>}\n                {this.url && (\n                  <div class={`hy-hero__actions`}>\n                    <a class=\"hy-hero__link\" href={this.url} aria-label={this.scLabel} target={linkTarget} data-text-color={this.heroTextColor}>\n                      {this.urlTitle}\n                      <hy-icon icon={\"hy-icon-arrow-right\"} size={16} />\n                    </a>\n                  </div>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <Host>\n        <div class={hyHeroClasses.join(\" \")}>\n          <div class={`hy-hero__container`}>\n            {this.createImageElement(this, this._sourceSet, this.setAspectRatio())}\n            <div class={`hy-hero__content-container`}>\n              <div class={`hy-hero__content`}>\n                <div class={`hy-hero__title-container`}>\n                  <h2 innerHTML={this.heading} class={heroTitleClasses}></h2>\n                </div>\n                {this.description && <p class={`hy-hero__description`}>{this.description}</p>}\n                {this.url && (\n                  <div class={`hy-hero__actions`}>\n                    <hy-cta-button\n                      link-content={this.urlTitle}\n                      sc-label={this.scLabel}\n                      url={this.url}\n                      is-external={this.isExternal}\n                      variant={variant}\n                    />\n                  </div>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n        <hy-box mb=\"2, 2, 1, 1\" />\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["hyHeroCss","timeout","delay","HyHero","HeroTypeVariant","landing","HeroGroupTypeVariant","default","HeroColorVariant","blue","HeroSizeVariant","large","async","this","_sourceSet","jsonParserWorker","sourceSet","handleHeroImageObjectFitValue","heroSizeVariant","heroElement","heroContentContainerElement","getElementsByClassName","offsetHeight","classList","add","remove","createImageElement","props","srcSet","aspectRatio","h","class","style","image","map","item","src","media","type","sizes","loading","disableLazy","alt","imageAltText","height","imageHeight","width","imageWidth","setAspectRatio","aspectRatioWidth","aspectRatioHeight","aspect","render","variant","CtaLinkButtonVariants","heroWhite","colorVariantValue","colorVariant","heroTypeValue","heroType","white","heroBlue","black","heroBlack","hyHeroClasses","heroGroupType","sizeVariant","hasShortcuts","heroTitleClasses","join","window","onload","document","addEventListener","clearTimeout","setTimeout","Host","innerHTML","heading","description","url","urlTitle","scLabel","isExternal","mb","linkTarget","heroTextColor","subtitle","href","target","icon","size"],"sources":["./src/components/hy-hero/hy-hero.scss?tag=hy-hero","./src/components/hy-hero/hy-hero.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-hero {\n  position: relative;\n  padding-bottom: 0;\n\n  &:not(.hy-hero--full-image) {\n    @include breakpoint($wide) {\n      margin-top: 32px;\n    }\n  }\n\n  &:not(.has-shortcuts) {\n    @include breakpoint($wide) {\n      margin-bottom: 32px;\n    }\n  }\n\n  .without-sidebar & {\n    @include breakpoint($extrawide) {\n      max-width: 1216px;\n      margin-right: auto;\n      margin-left: auto;\n    }\n  }\n\n  .with-sidebar:not(.hy-hero--full-image) & {\n    @include breakpoint($extrawide) {\n      padding-left: 32px;\n      padding-right: 32px;\n    }\n\n    @include breakpoint($xlarge) {\n      padding-right: 0;\n      padding-left: 0;\n      max-width: 1216px;\n      margin-right: auto;\n      margin-left: auto;\n    }\n  }\n\n  &--full-image {\n    --dark-bg: rgba(0, 0, 0, 0.55);\n    --light-bg: rgba(255, 255, 255, 0.50);\n    --dark-text: var(--brand-main-nearly-black);\n    --light-text: var(--grayscale-white);\n    \n    border-bottom: 1px solid var(--grayscale-medium-dark);\n    \n    @include breakpoint($wide) {\n      border-bottom: 4px solid var(--grayscale-black);\n      margin-left: -2rem;\n      margin-right: -2rem;\n    }\n\n    .without-sidebar & {\n      @include breakpoint($extrawide) {\n        max-width: none;\n        margin-left: -2rem;\n        margin-right: -2rem;\n      }\n    }\n\n    .hy-hero__container {\n      grid-template-columns: repeat(4 , 1fr);\n      grid-template-rows: 1fr;\n    }\n\n    .hy-hero__image-container {\n      grid-column: 1 / -1;\n      grid-row: 1 / -1;\n      object-fit: cover;\n      padding: 0;\n      width: 100%;\n      img {\n        aspect-ratio: 16 / 8;\n      }\n    }\n\n    .hy-hero__content-container {\n      padding: 0;\n\n      @include breakpoint($wide) {\n        align-self: center;\n        grid-column: 1  / 3;\n        grid-row: 1 / -1;\n        margin-left: 32px;\n        max-width: 95%;\n        z-index: 2;\n      }\n      @include breakpoint($extrawide) {\n        margin-left: 0;\n      }\n    }\n\n    .hy-hero__content {\n      display: flex;\n      flex-direction: column;\n      gap: 24px;\n      padding: 16px 16px 32px 16px;\n      \n      @include breakpoint($wide) {\n        margin-left: 32px;\n        gap: 24px;\n        padding: 32px;\n      }\n      @include breakpoint($extrawide) {\n        margin-left: 64px;\n        gap: 32px;\n      }\n      @include breakpoint($xlarge) {\n        margin-left: 96px;\n      }\n\n      @include breakpoint($wide) {\n        \n      }\n\n      &[data-text-color=\"dark_text_light_bg\"] {\n        backdrop-filter: blur(250px);\n        background-color: var(--grayscale-white);\n        color: var(--dark-text);\n\n        @include breakpoint($wide) {\n          background: var(--light-bg);\n        }\n      }\n      &[data-text-color=\"light_text_dark_bg\"] {\n        backdrop-filter: blur(250px);\n        background: var(--grayscale-black);\n        color: var(--light-text);\n\n        @include breakpoint($wide) {\n          background: var(--dark-bg);\n        }\n      }\n      &[data-text-color=\"dark_text_no_bg\"] {\n        background-color: var(--grayscale-white);\n        color: var(--dark-text);\n\n        @include breakpoint($wide) {\n          background: transparent;\n          text-shadow: 0 0 5px var(--grayscale-white);\n        }\n      }\n      &[data-text-color=\"light_text_no_bg\"] {\n        background-color: var(--grayscale-black);\n        color: var(--light-text);\n\n        @include breakpoint($wide) {\n          background: transparent;\n          text-shadow: 0 0 5px var(--grayscale-black);\n        }\n      }\n    }\n\n    .hy-hero__subtitle {\n      font-family: var(--main-font-family);\n      font-size: 18px;\n      font-weight: 700;\n      line-height: 1.2;\n      position: relative;\n\n      &::after {\n        aspect-ratio: 1;\n        background-color: currentColor;\n        bottom: -10px;\n        content: '';\n        display: block;\n        height: 4px;\n        left: 0;\n        position: absolute;\n        width: 64px;\n      }\n\n      @include breakpoint($wide) {\n        font-size: 20px;\n      }\n    }\n\n    h2.hy-hero__title.hy-heading__hero {\n      color: inherit !important;\n      font-family: var(--main-font-family);\n      font-size: 32px;\n      font-weight: 700; \n      line-height: 1.2;\n\n      @include breakpoint($extrawide) {\n        font-size: 36px;\n      }\n\n      @include breakpoint($xlarge) {\n        font-size: 64px;\n      }\n    }\n\n    .hy-hero__description {\n      font-family: var(--main-font-family);\n      font-size: 16px;\n      font-weight: 400; \n      line-height: 1.5;\n      margin: 0;\n      padding: 0;\n\n      @include breakpoint($xlarge) {\n        font-size: 17px;\n      }\n    }\n\n    .hy-hero__actions {\n      margin: 0;\n\n      .hy-hero__link {\n        --light-bg: var(--grayscale-white);\n        --dark-bg: var(--grayscale-black);\n        --light-text: var(--grayscale-white);\n        --dark-text: var(--grayscale-black);\n\n        align-items: center;\n        display: flex;\n        font-family: var(--main-font-family);\n        font-size: 16px;\n        font-weight: 700;\n        gap: 8px;\n        line-height: 18px;\n        padding: 13px 16px;\n        text-decoration: none;\n        width: fit-content;\n\n        &:hover {\n          text-decoration: underline;\n        }\n\n        svg {\n          width: 16px;\n          height: 16px;\n        }\n\n        &[data-text-color=\"dark_text_light_bg\"] {\n          background: var(--dark-bg);\n          color: var(--light-text);\n          svg {fill: var(--light-text)}\n        }\n        &[data-text-color=\"light_text_dark_bg\"] {\n          background: var(--light-bg);\n          color: var(--dark-text);\n          svg {fill: var(--dark-text)}\n        }\n        &[data-text-color=\"dark_text_no_bg\"] {\n          background: var(--dark-bg);\n          color: var(--light-text);\n          text-shadow: none;\n          svg {fill: var(--light-text)}\n        }\n        &[data-text-color=\"light_text_no_bg\"] {\n          background: var(--light-bg);\n          color: var(--dark-text);\n          text-shadow: none;\n          svg {fill: var(--dark-text)}\n        }\n      }\n    }\n\n    .hy-image__image {\n      object-fit: cover;\n    }\n  }\n\n  &--white {\n    @include breakpoint($wide) {\n      margin-top: 0;\n    }\n\n    &:not(.has-shortcuts) {\n      @include breakpoint($wide) {\n        padding-bottom: 48px;\n      }\n    }\n\n    &:not(.has-shortcuts):after {\n      width: 100%;\n      background-color: var(--grayscale-medium-dark);\n      height: 1px;\n      content: \"\";\n      margin: 0 auto;\n      display: block;\n\n      @include breakpoint($wide) {\n        position: absolute;\n        left: 0;\n        right: 0;\n        bottom: 0;\n      }\n    }\n\n    &:not(.hy-hero--front_page):after {\n      max-width: 1216px;\n    }\n  }\n}\n\n.hy-hero__container {\n  position: relative;\n\n  @include breakpoint($wide) {\n    display: grid;\n    position: relative;\n  }\n\n  .hy-hero--small & {\n    @include breakpoint($wide) {\n      grid-template-columns: 60% 1fr;\n    }\n  }\n\n  .hy-hero--large & {\n    @include breakpoint($wide) {\n      grid-template-columns: repeat(2, 1fr);\n    }\n  }\n}\n\n.hy-hero__content-container {\n  padding: 24px 1rem 40px;\n  margin: 0 auto;\n  width: 100%;\n\n  @include breakpoint($narrow) {\n    padding: 40px 2rem;\n  }\n\n  @include breakpoint($extrawide) {\n    align-items: center;\n    display: flex;\n    padding: 40px 24px;\n  }\n\n  @include breakpoint($xlarge) {\n    max-width: 1216px;\n  }\n\n  .hy-hero--black & {\n    background-color: var(--grayscale-black);\n  }\n\n  .hy-hero--blue & {\n    background-color: var(--brand-main);\n  }\n\n  .hy-hero--white & {\n    background-color: var(--grayscale-white);\n\n    @include breakpoint($extrawide) {\n      padding: 40px 24px 40px 0;\n    }\n  }\n}\n\n.hy-hero__content {\n  position: relative;\n}\n\nh2.hy-hero__title {\n  hyphens: auto;\n  display: flex;\n  flex-grow: 1;\n  flex-shrink: 0;\n  max-width: 100%;\n  width: auto;\n\n  .hy-hero--blue & {\n    color: var(--grayscale-white) !important;\n  }\n\n  .hy-hero--black & {\n    color: var(--grayscale-white) !important;\n  }\n\n  .hy-hero--white & {\n    color: var(--grayscale-black) !important;\n  }\n\n  &.hy-heading__hero {\n    @include font-size(36px, 33px);\n    @include font-weight($bold);\n    color: var(--grayscale-black);\n    font-family: var(--main-font-family);\n    letter-spacing: -0.8px;\n    margin-bottom: 0;\n    text-transform: none;\n    text-wrap: balance;\n\n    @include breakpoint(1024px) {\n      @include font-size(36px, 40px);\n      letter-spacing: -1.15px;\n    }\n\n    @include breakpoint($xlarge) {\n      @include font-size(38px, 48px);\n      letter-spacing: -1.3px;\n    }\n  }\n}\n\n.hy-hero__description {\n  @include font-size(16px, 24px);\n  font-family: var(--main-font-family);\n  margin: 16px 0 0 0;\n  padding: 0;\n  position: relative;\n  text-wrap: pretty;\n\n  @include breakpoint($xlarge) {\n    @include font-size(17px, 26px);\n  }\n\n  .hy-hero--black & {\n    color: var(--grayscale-white);\n  }\n\n  .hy-hero--blue & {\n    color: var(--grayscale-white);\n  }\n\n  .hy-hero--white & {\n    color: var(--grayscale-black);\n  }\n}\n\n.hy-hero__actions {\n  margin-top: 24px;\n}\n\n.hy-hero__image-container {\n  margin: 0;\n  padding: 0;\n  position: relative;\n\n  figure {\n    margin: 0;\n  }\n\n  @include breakpoint($wide) {\n    order: 2;\n    padding: 8px 0;\n  }\n\n  .hy-hero--front_page & {\n    @include breakpoint($wide) {\n      padding: 0;\n    }\n  }\n}\n\n.hy-image__image {\n  display: block;\n  height: 100%;\n  min-height: 205px;\n  object-fit: contain;\n  width: 100%;\n\n  .has-cover & {\n    object-fit: cover;\n  }\n}\n\n// Research group and generic with minor landing\n.hy-hero.hy-hero--group_landing.hy-hero--generic_site_group,\n.hy-hero.hy-hero--research_group {\n  h2.hy-hero__title.hy-heading__hero {\n    @include font-size(32px, 38px);\n    @include font-weight($bold);\n    color: var(--grayscale-black);\n    font-family: var(--main-font-family);\n    letter-spacing: -0.8px;\n    margin-bottom: 0;\n    text-transform: uppercase;\n\n    @include breakpoint(1024px) {\n      @include font-size(46px, 54px);\n      letter-spacing: -1.15px;\n    }\n\n    @include breakpoint($xlarge) {\n      @include font-size(52px, 60px);\n      letter-spacing: -1.3px;\n    }\n  }\n}\n\n// FRONTPAGE VARIATION\n\n.hy-hero.hy-hero--front_page {\n  &.hy-hero--white {\n    @include breakpoint($wide) {\n      padding-top: 40px;\n      margin-top: 0;\n    }\n  }\n\n  h2.hy-hero__title.hy-heading__hero {\n    @include font-size(32px, 38px);\n    @include font-weight($bold);\n    color: var(--grayscale-black);\n    font-family: var(--main-font-family);\n    letter-spacing: -0.8px;\n    margin-bottom: 0;\n    text-transform: uppercase;\n\n    @include breakpoint(1024px) {\n      @include font-size(46px, 54px);\n      letter-spacing: -1.15px;\n    }\n\n    @include breakpoint($xlarge) {\n      @include font-size(52px, 60px);\n      letter-spacing: -1.3px;\n    }\n  }\n\n  @include breakpoint($extrawide) {\n    margin-left: -32px;\n    margin-right: -32px;\n    max-width: none;\n  }\n\n  .hy-hero__container {\n    position: relative;\n\n    @include breakpoint($wide) {\n      display: flex;\n      position: relative;\n    }\n  }\n\n  .hy-hero__content-container {\n    padding: 24px 1rem 40px;\n    margin: 0 auto;\n    width: 100%;\n\n    .hy-hero--black & {\n      background-color: var(--grayscale-black);\n    }\n\n    .hy-hero--blue & {\n      background-color: var(--brand-main);\n    }\n\n    .hy-hero--white & {\n      background-color: var(--grayscale-white);\n    }\n\n    @include breakpoint($narrow) {\n      padding: 24px 2rem 40px;\n    }\n\n    @include breakpoint($wide) {\n      align-items: center;\n      display: flex;\n      min-height: 330px;\n      padding: 56px 2rem;\n    }\n\n    @include breakpoint(1060px) {\n      min-height: 373px;\n    }\n\n    @include breakpoint(1160px) {\n      min-height: 480px;\n    }\n\n    @include breakpoint($extrawide) {\n      padding-left: 32px;\n      padding-right: 8px;\n    }\n\n    @include breakpoint(1260px) {\n      min-height: 443px;\n    }\n\n    @include breakpoint(1280px) {\n      max-width: 1216px;\n      padding-left: 0;\n    }\n\n    @include breakpoint(1360px) {\n      min-height: 478px;\n    }\n\n    @include breakpoint(1460px) {\n      min-height: 513px;\n    }\n\n    @include breakpoint(1560px) {\n      min-height: 548px;\n    }\n\n    @include breakpoint($xlarge) {\n      padding-left: 0;\n    }\n\n    @include breakpoint(1660px) {\n      min-height: 583px;\n    }\n\n    @include breakpoint(1760px) {\n      min-height: 619px;\n    }\n\n    @include breakpoint(1860px) {\n      min-height: 654px;\n    }\n\n    @include breakpoint(1920px) {\n      min-height: 675px;\n    }\n  }\n\n  &.hy-hero--small {\n    .hy-hero__image-container {\n      @include breakpoint($wide) {\n        width: 40%;\n      }\n    }\n\n    .hy-hero__content {\n      @include breakpoint($wide) {\n        max-width: 60%;\n      }\n    }\n  }\n\n  &.hy-hero--large {\n    .hy-hero__image-container {\n      @include breakpoint($wide) {\n        width: 50%;\n      }\n    }\n\n    .hy-hero__content {\n      @include breakpoint($wide) {\n        max-width: 50%;\n      }\n    }\n  }\n\n  .hy-hero__image-container {\n    background-position: 50% 50%;\n    background-size: cover;\n    background: transparent;\n    margin: 0;\n    padding: 0;\n    position: relative;\n\n    figure {\n      margin: 0;\n    }\n\n    @include breakpoint($wide) {\n      background-color: var(--grayscale-white);\n      bottom: 0;\n      order: 2;\n      padding: 8px 0;\n      position: absolute;\n      right: 0;\n      top: 0;\n    }\n  }\n\n  .hy-hero__content {\n    position: relative;\n\n    @include breakpoint($wide) {\n      padding-right: 24px;\n    }\n  }\n\n  .hy-image__image {\n    display: block;\n    height: 100%;\n    min-height: 205px;\n    object-fit: cover;\n    width: 100%;\n  }\n}\n\n.hy-hero__spacer-box {\n  display: none;\n\n  @include breakpoint($wide) {\n    display: block;\n    order: 1;\n    position: absolute;\n    inset: 0;\n  }\n\n  .hy-hero--small & {\n    @include breakpoint($wide) {\n      width: 60%;\n    }\n  }\n\n  .hy-hero--large & {\n    @include breakpoint($wide) {\n      width: 50%;\n    }\n  }\n\n  .hy-hero--black & {\n    background-color: var(--grayscale-black);\n  }\n\n  .hy-hero--blue & {\n    background-color: var(--brand-main);\n  }\n\n  .hy-hero--white & {\n    background-color: var(--grayscale-white);\n  }\n}\n","export interface ImageSrcSet {\n  src: any;\n  media: string;\n  type: string;\n  sizes: string | null;\n}\nlet timeout = null;\nlet delay = 250;\n\nimport {Component, Element, h, Host, Prop} from \"@stencil/core\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\nimport {\n  CtaLinkButtonVariants,\n  HeroColorVariant,\n  HeroSizeVariant,\n  HeroGroupTypeVariant,\n  HeroTypeVariant,\n  HeroTextColor,\n} from \"../../utils/utils\";\n\n@Component({\n  tag: \"hy-hero\",\n  styleUrl: \"hy-hero.scss\",\n  shadow: false,\n})\nexport class HyHero {\n  @Element() el: HTMLElement;\n  @Prop() heroType: HeroTypeVariant = HeroTypeVariant.landing;\n  @Prop() heroGroupType: HeroGroupTypeVariant = HeroGroupTypeVariant.default;\n  @Prop() colorVariant: HeroColorVariant = HeroColorVariant.blue;\n  @Prop() sizeVariant: HeroSizeVariant = HeroSizeVariant.large;\n  @Prop() heroTextColor: HeroTextColor = null;\n  @Prop() image: string;\n  @Prop() imageHeight: number = null;\n  @Prop() imageWidth: number = null;\n  @Prop() imageAltText: string = \"\";\n  @Prop() disableLazy: boolean = false;\n  @Prop() hasShortcuts: boolean = false;\n  @Prop() heading: string;\n  @Prop() description: string;\n  @Prop() subtitle: string;\n  @Prop() url: string;\n  @Prop() urlTitle: string;\n  @Prop() scLabel?: string;\n  @Prop() isExternal: boolean = false;\n  private _sourceSet: ImageSrcSet[];\n  @Prop() sourceSet: ImageSrcSet[] | string;\n\n  async componentWillLoad() {\n    this._sourceSet = await jsonParserWorker(this.sourceSet);\n  }\n\n  // TODO: Refactor, find way to get rid of this.\n  handleHeroImageObjectFitValue(heroSizeVariant, heroElement) {\n    const heroContentContainerElement = heroElement.getElementsByClassName(\n      \"hy-hero__content-container\"\n    )[0] as HTMLElement;\n\n    if (heroSizeVariant === \"small\") {\n      if (heroContentContainerElement.offsetHeight >= 300) {\n        heroElement.classList.add(\"has-cover\");\n      } else {\n        heroElement.classList.remove(\"has-cover\");\n      }\n    }\n\n    if (heroSizeVariant === \"large\") {\n      if (heroContentContainerElement.offsetHeight >= 344) {\n        heroElement.classList.add(\"has-cover\");\n      } else {\n        heroElement.classList.remove(\"has-cover\");\n      }\n    }\n  }\n\n  createImageElement(props, srcSet, aspectRatio) {\n    return (\n      <div class={`hy-hero__image-container`} style={aspectRatio}>\n        {props.image &&\n          (srcSet ? (\n            <picture>\n              {srcSet.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={props.disableLazy ? \"eager\" : \"lazy\"}\n                alt={props.imageAltText}\n                class={`hy-image__image`}\n                src={props.image}\n                height={props.imageHeight}\n                width={props.imageWidth}\n              />\n            </picture>\n          ) : (\n            <img\n              loading={props.disableLazy ? \"eager\" : \"lazy\"}\n              alt={props.imageAltText}\n              class={`hy-image__image`}\n              src={props.image}\n              height={props.imageHeight}\n              width={props.imageWidth}\n            />\n          ))}\n      </div>\n    );\n  }\n\n  // TODO: Refactor, is this still even used?\n  setAspectRatio(aspectRatioWidth = 16, aspectRatioHeight = 10) {\n    const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;\n    return {\n      \"--aspectRatio\": `${aspect}%` as \"aspectRatio\",\n      //\"aspect-ratio\": `${aspectRatioWidth} / ${aspectRatioHeight}` as \"aspectRatio\",\n    };\n  }\n\n  render() {\n    let variant = CtaLinkButtonVariants.heroWhite;\n    let colorVariantValue = this.colorVariant;\n    let heroTypeValue = this.heroType;\n\n    //TODO: Refactor\n    if (this.heroType === \"minor_landing\") {\n      colorVariantValue = HeroColorVariant.white;\n      heroTypeValue = HeroTypeVariant.landing;\n    }\n\n    if (colorVariantValue === HeroColorVariant.blue) {\n      variant = CtaLinkButtonVariants.heroBlue;\n    }\n\n    if (colorVariantValue === HeroColorVariant.black) {\n      variant = CtaLinkButtonVariants.heroBlack;\n    }\n\n    if (!colorVariantValue || colorVariantValue === \"fp_white\") {\n      colorVariantValue = HeroColorVariant.white;\n    }\n\n    const hyHeroClasses = [\n      \"hy-hero\",\n      `hy-hero--${heroTypeValue}`,\n      `hy-hero--${this.heroGroupType}`,\n      `hy-hero--${colorVariantValue}`,\n      `hy-hero--${this.sizeVariant}`,\n      this.hasShortcuts ? 'has-shortcuts' : '',\n    ];\n\n    const heroTitleClasses = [\"hy-hero__title\", \"hy-heading__hero\"].join(\" \");\n\n    // TODO: Refactor, find way to get rid of this.\n    window.onload = () => {\n      const heroElement = document.getElementsByClassName(\"hy-hero\")[0] as HTMLElement;\n      this.handleHeroImageObjectFitValue(this.sizeVariant, heroElement);\n      window.addEventListener(\"resize\", () => {\n        clearTimeout(timeout);\n        timeout = setTimeout(() => this.handleHeroImageObjectFitValue(this.sizeVariant, heroElement), delay);\n      });\n    };\n\n    if (heroTypeValue === \"front_page\" && this.sizeVariant !== 'full-image') {\n      return (\n        <Host>\n          <div class={hyHeroClasses.join(\" \")}>\n            <div class={`hy-hero__container`}>\n              {this.createImageElement(this, this._sourceSet, this.setAspectRatio())}\n              <div class={`hy-hero__spacer-box`}></div>\n              <div class={`hy-hero__content-container`}>\n                <div class={`hy-hero__content`}>\n                  <div class={`hy-hero__title-container`}>\n                    <h2 innerHTML={this.heading} class={heroTitleClasses}></h2>\n                  </div>\n                  {this.description && <p class={`hy-hero__description`}>{this.description}</p>}\n                  {this.url && (\n                    <div class={`hy-hero__actions`}>\n                      <hy-cta-button\n                        link-content={this.urlTitle}\n                        sc-label={this.scLabel}\n                        url={this.url}\n                        is-external={this.isExternal}\n                        variant={variant}\n                      />\n                    </div>\n                  )}\n                </div>\n              </div>\n            </div>\n          </div>\n          <hy-box mb=\"2, 2, 1, 1\" />\n        </Host>\n      );\n    }\n\n    if (this.sizeVariant === 'full-image') {\n      const linkTarget = this.isExternal ? '_blank' : '_self';\n      return (\n        <div class={`hy-hero hy-hero--full-image`}>\n          <div class={`hy-hero__container`}>\n            {this.createImageElement(this, this._sourceSet, this.setAspectRatio(16, 8))}\n            <div class={`hy-hero__content-container`}>\n              <div class={`hy-hero__content`} data-text-color={this.heroTextColor}>\n                {this.subtitle && <span class={`hy-hero__subtitle`}>{this.subtitle}</span>}\n                <h2 innerHTML={this.heading} class={heroTitleClasses}></h2>\n                {this.description && <p class={`hy-hero__description`}>{this.description}</p>}\n                {this.url && (\n                  <div class={`hy-hero__actions`}>\n                    <a class=\"hy-hero__link\" href={this.url} aria-label={this.scLabel} target={linkTarget} data-text-color={this.heroTextColor}>\n                      {this.urlTitle}\n                      <hy-icon icon={\"hy-icon-arrow-right\"} size={16} />\n                    </a>\n                  </div>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <Host>\n        <div class={hyHeroClasses.join(\" \")}>\n          <div class={`hy-hero__container`}>\n            {this.createImageElement(this, this._sourceSet, this.setAspectRatio())}\n            <div class={`hy-hero__content-container`}>\n              <div class={`hy-hero__content`}>\n                <div class={`hy-hero__title-container`}>\n                  <h2 innerHTML={this.heading} class={heroTitleClasses}></h2>\n                </div>\n                {this.description && <p class={`hy-hero__description`}>{this.description}</p>}\n                {this.url && (\n                  <div class={`hy-hero__actions`}>\n                    <hy-cta-button\n                      link-content={this.urlTitle}\n                      sc-label={this.scLabel}\n                      url={this.url}\n                      is-external={this.isExternal}\n                      variant={variant}\n                    />\n                  </div>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n        <hy-box mb=\"2, 2, 1, 1\" />\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -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