@itcenteratunihelsinki/huds-lib 0.5.20 → 0.5.24

package/dist/huds-lib/p-f5e78e68.entry.js

@@ -1 +0,0 @@
-import{r as i,h as n,g as a}from"./p-d5584db1.js";import{A as o}from"./p-e20f6203.js";let e={enter:"Enter",tab:"Tab",pageUp:"PageUp",pageDown:"PageDown",arrowUp:"ArrowUp",arrowDown:"ArrowDown",home:"Home",end:"End"};const t=class{constructor(n){i(this,n),this.variant=o.default,this.headerstyle="common",this.showOpen=!1,this.ready=!1}componentDidLoad(){this.ready=!0;let i=this.el.closest(".hy-main");i&&(i.classList.contains("with-sidebar")||(this.headerstyle="large"))}componentDidRender(){window.location.hash&&this.expandPanelByAnchor(window.location.hash),document.querySelectorAll(".hy-accordion__content").forEach((function(i){let n=i.classList.contains("open"),a=i;n?(a.style.display="block",a.style.height=a.scrollHeight+"px"):(a.style.height="0px",a.style.display="none")}))}onHashChange(){window.location.hash&&this.expandPanelByAnchor(window.location.hash)}handleKeyDown(i){let n=document.querySelectorAll(`#${this.el.parentElement.id}`)[0];const a=Array.prototype.slice.call(n.querySelectorAll(".hy-accordion__button"));let o=i.target;const t=i.code,r=i.ctrlKey&&[e.pageDown,e.pageUp].includes(t);if(o.classList.contains("hy-accordion__button"))if([e.arrowDown,e.arrowUp].includes(t)||r){const n=a.indexOf(o),r=[e.arrowDown,e.pageDown].includes(t)?1:-1,d=a.length;a[(n+d+r)%d].focus(),i.preventDefault()}else if([e.home,e.end].includes(t)){switch(t){case e.home:a[0].focus();break;case e.end:a[a.length-1].focus()}i.preventDefault()}}handleClick(i){const n=this.el.parentElement.id;let a=i.target;const o=a.tagName.toLowerCase(),e=[o].some((i=>["svg","span","path","button","a"].indexOf(i)>=0));let t=document.querySelectorAll(`#${n}`)[0];const r=t.hasAttribute("data-allow-multiple"),d=r||t.hasAttribute("data-allow-toggle");if(a&&e){"button"!==o&&(a=a.closest(".hy-accordion__button"));let n=a.closest(".hy-accordion__item"),e=n.querySelectorAll(".hy-accordion__content")[0];const c="true"==a.getAttribute("aria-expanded"),h=t.querySelector('[aria-expanded="true"]');!r&&h&&h!==a&&(h.setAttribute("aria-expanded","false"),this.collapseSection(e),n.classList.contains("hy-accordion__item__is-open")&&n.classList.remove("hy-accordion__item__is-open"),t.querySelector(`#${h.getAttribute("aria-controls")}`).setAttribute("aria-hidden","true"),d||h.removeAttribute("aria-disabled")),c?d&&c&&(a.setAttribute("aria-expanded","false"),this.collapseSection(e),n.classList.contains("hy-accordion__item__is-open")&&n.classList.remove("hy-accordion__item__is-open"),t.querySelector(`#${a.getAttribute("aria-controls")}`).setAttribute("aria-hidden","true")):(this.expandSection(e),a.setAttribute("aria-expanded","true"),n.classList.add("hy-accordion__item__is-open"),t.querySelector(`#${a.getAttribute("aria-controls")}`).setAttribute("aria-hidden","false"),d||a.setAttribute("aria-disabled","true")),i.preventDefault(),i.stopImmediatePropagation()}}expandPanelByAnchor(i){setTimeout((()=>{if(i.length>0){i=i.substr(1);let n=document.querySelectorAll(`[id=${i}]`)[0];if(n&&n.classList.contains("hy-accordion__button")){let i=n.closest(".hy-accordion__item"),a=i.querySelectorAll(".hy-accordion__content")[0];this.expandSection(a),n.setAttribute("aria-expanded","true"),i.classList.add("hy-accordion__item__is-open");const o=n.getBoundingClientRect();window.scrollTo({top:window.scrollY+o.top-200,behavior:"smooth"});const e=i.parentElement.parentElement.id;e.length>0&&document.querySelectorAll(`#${e}`)[0].querySelector(`#${n.getAttribute("aria-controls")}`).setAttribute("aria-hidden","false")}}}),200)}collapseSection(i){i.style.height="0px",i.setAttribute("data-collapsed","true"),setTimeout((()=>{i.style.display="none"}),250)}expandSection(i){i.style.display="block",i.style.height=i.scrollHeight+"px",i.setAttribute("data-collapsed","false")}render(){const i=this.el.parentElement.id;this.ready&&i.length>0&&document.querySelectorAll(`#${i}`).forEach((function(i){i&&i.querySelectorAll(".hy-accordion__button").forEach((function(i){i.addEventListener("focus",(function(){i.classList.add("focus")})),i.addEventListener("blur",(function(){i.classList.remove("focus")}))}))}));const a=this.showOpen?"open":"",o=["hy-accordion__item",this.variant,this.showOpen?"hy-accordion__item__is-open":""].join(" "),e=["hy-accordion__item--container",this.variant].join(" "),t=["hy-accordion--heading",this.variant].join(" "),r=["hy-accordion__content",`hy-accordion__content--${this.variant}`,this.variant,a].join(" "),d=["hy-accordion__content--inner-wrapper",`hy-accordion__content--inner-wrapper--${this.headerstyle}`,`hy-accordion__content--inner-wrapper--${this.variant}`].join(" "),c=this.accordiontitle.toLowerCase().replace(/\W/g,"-"),h=this.showOpen?"false":"true",s=this.showOpen?"false":"true";return n("div",{class:o},n("div",{class:e},n("div",{class:t},n("a",{href:"#"+c+"--title",class:"hy-accordion__link",tabindex:"-1"},n("button",{"aria-expanded":this.showOpen?"true":"false","aria-controls":`${c}--content`,class:`hy-accordion__button hy-accordion__button--${this.headerstyle}`,id:`${c}--title`},n("span",{class:"hy-accordion--heading__icon"},n("hy-icon",{icon:"hy-icon-caret-down",size:16})),n("span",null,this.accordiontitle)))),n("div",{"aria-labelledBy":`${c}--title`,class:r,id:`${c}--content`,role:"region","aria-hidden":h,"data-collapsed":s,style:{display:"none"}},n("div",{class:d},n("slot",null)))))}get el(){return a(this)}};t.style=':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:#f9a21a;--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-accordion__item{margin-bottom:12px}.hy-accordion__item__is-open{border:1px solid var(--grayscale-dark)}.hy-accordion__item__is-open .hy-accordion--heading{margin:0 auto}.hy-accordion__item__is-open .hy-accordion--heading .hy-accordion--heading__icon{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}.hy-accordion__item.mini{margin-bottom:1rem;margin-top:1rem}.hy-accordion__item__is-open.mini{margin-bottom:0;margin-top:0}.hy-accordion__item__is-open.mini .hy-accordion__item--container{border-bottom:1px solid var(--grayscale-medium-dark);border-top:1px solid var(--grayscale-medium-dark);padding-top:16px;padding-bottom:32px;margin-top:-1px;-webkit-transition:padding 0.5s ease-in-out;transition:padding 0.5s ease-in-out}@media (min-width: 30rem){.hy-accordion__item__is-open.mini .hy-accordion__item--container{padding-top:28px;padding-bottom:30px}}@media (min-width: 60rem){.hy-accordion__item__is-open.mini .hy-accordion__item--container{padding-top:32px;padding-bottom:40px}}.hy-accordion__item.hy-accordion__item__is-open.mini{background-color:var(--grayscale-white);border:none;-webkit-box-shadow:0 -10px 10px -10px rgba(0, 49, 70, 0.05);box-shadow:0 -10px 10px -10px rgba(0, 49, 70, 0.05)}.hy-accordion--heading{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;letter-spacing:-0.69px;line-height:28px;margin:0 auto;-webkit-transition:all 0.25s ease-in-out;transition:all 0.25s ease-in-out;width:100%}.hy-accordion--heading .hy-accordion__link{text-decoration:none}.hy-accordion--heading .hy-accordion__link:hover{text-decoration:none}.hy-accordion--heading .hy-accordion__button{font-size:1.125rem;line-height:22px;font-weight:700;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;background-color:var(--grayscale-background-box);border:none;color:var(--brand-main-nearly-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);height:100%;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;letter-spacing:-0.45px;padding:13px 20px 13px 16px;-webkit-transition:all 0.35s ease-in;transition:all 0.35s ease-in;width:100%}.hy-accordion--heading .hy-accordion__button:hover{cursor:pointer}@media (min-width: 30rem){.hy-accordion--heading .hy-accordion__button{padding:1rem 2rem 1rem 1.25rem}}@media (min-width: 1601px){.hy-accordion--heading .hy-accordion__button{font-size:1.25rem;line-height:24px;letter-spacing:-0.5px}}@media (min-width: 75.0625rem){.hy-accordion--heading .hy-accordion__button--large{font-size:1.25rem;line-height:24px;letter-spacing:-0.5px}}@media (min-width: 75.0625rem){.hy-accordion--heading .hy-accordion__button--large .hy-accordion--heading__icon svg{height:20px;width:20px}}.hy-accordion--heading .hy-accordion__button[aria-expanded=true]{background:none}.hy-accordion--heading .hy-accordion__button span{text-align:left}.hy-accordion--heading .hy-accordion__button[aria-expanded=true]{position:relative}.hy-accordion--heading .hy-accordion__button[aria-expanded=true]:after{background-color:var(--grayscale-medium-dark);bottom:0;content:"";height:1px;left:16px;position:absolute;right:20px}.hy-accordion--heading .hy-accordion--heading__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:22px;margin-right:8px;z-index:0}.hy-accordion--heading .hy-accordion--heading__icon svg{fill:var(--brand-main)}@media (min-width: 30rem){.hy-accordion--heading .hy-accordion--heading__icon svg{height:18px;width:18px}}@media (min-width: 1601px){.hy-accordion--heading .hy-accordion--heading__icon svg{height:20px;width:20px}}.hy-accordion--heading.mini .hy-accordion__button{font-size:1.125rem;line-height:22px;background-color:var(--grayscale-white);color:var(--link-blue);letter-spacing:-0.56px;padding:0}@media (min-width: 30rem){.hy-accordion--heading.mini .hy-accordion__button{font-size:1.375rem;line-height:28px;letter-spacing:-0.69px;padding:0}}.hy-accordion--heading.mini .hy-accordion__button[aria-expanded=true]{color:var(--grayscale-black);margin-bottom:20px}@media (min-width: 30rem){.hy-accordion--heading.mini .hy-accordion__button[aria-expanded=true]{margin-bottom:28px}}@media (min-width: 60rem){.hy-accordion--heading.mini .hy-accordion__button[aria-expanded=true]{margin-bottom:32px}}.hy-accordion--heading.mini .hy-accordion--heading__icon{margin-right:0.5rem;z-index:0}@media (min-width: 30rem){.hy-accordion--heading.mini .hy-accordion--heading__icon{margin-right:10px}}.hy-accordion--heading.mini .hy-accordion--heading__icon svg{fill:var(--brand-main-light);height:14px;width:14px}@media (min-width: 30rem){.hy-accordion--heading.mini .hy-accordion--heading__icon svg{height:16px;width:16px}}.hy-accordion__content{display:block;height:0;padding:0;overflow:hidden;-webkit-transition:all 0.25s ease-in-out;transition:all 0.25s ease-in-out}.hy-accordion__content--inner-wrapper{display:block;padding:16px 12px}@media (min-width: 30rem){.hy-accordion__content--inner-wrapper{padding:15px 16px}}@media (min-width: 60rem){.hy-accordion__content--inner-wrapper{padding:16px}}@media (min-width: 75.0625rem){.hy-accordion__content--inner-wrapper--large{padding:24px 20px}}@media (min-width: 1601px){.hy-accordion__content--inner-wrapper{padding:24px 20px}}.hy-accordion__content--inner-wrapper--mini{padding:0}.hy-accordion__content--inner-wrapper--mini .course-heading h4{padding-top:0 !important}';export{t as hy_accordion_item}