@itcenteratunihelsinki/huds-lib 0.8.57 → 0.8.59

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

@@ -0,0 +1 @@
+{"version":3,"names":["hyBreadcrumbsCss","HyBreadcrumbs","BreadcrumbVariants","default","async","this","_dataItems","jsonParserWorker","dataItems","componentDidLoad","hyMainDiv","el","closest","classList","contains","headerstyle","render","breadcrumbsClass","variant","join","h","role","class","map","item","url","length","href","text","icon","size","hyFooterCss","HyFooter","classAttributes","hyFooterActionCss","scrollTimeout","HyFooterAction","disconnectedCallback","clearTimeout","scrollTop","hyLogo","document","querySelector","window","scrollTo","top","behavior","setTimeout","focus","Host","updatedText","upButtonLabel","id","htmlFor","onClick","name","type","hyFooterBaseCss","HyFooterBase","FooterLinkItemColor","white","SiteLogoSize","big","_dataFooterBaseLinks","dataFooterBaseLinks","_dataFooterBaseSome","dataFooterBaseSome","logoColor","ColorVariant","links","some","FooterVariant","footer","color","logoUrl","label","logoLabel","someLabel","s","title","target","link","copyrightText","hyFooterInfoCss","HyFooterInfo","_dataFooterInfoLinks","dataFooterInfoLinks","_dataLuomusFooterContent","luomusFooterContent","ro","ResizeObserver","entries","entry","checkForMobile","contentRect","width","observe","body","disconnect","isMobile","luomusFooterContentItems","isGroup","FooterLinkVariants","group","campus","section","HeadingSectionVariants","groupFooterInfo","defaultFooterInfo","footerLinkItemClass","scLabel","linkScLabel","linkText","linksColor","isLuomusGroup","black","luomus","heading","HeadingVarians","h2","textTitle","groupLogoUrl","src","alt","innerHTML","textDescription","linkUrl","linkIsExternal","CtaLinkButtonVariants","onWhiteBkgd","content","accordionid","accordiontitle","mainlink","items","external_link","isExternal","hyFooterLinkItemCss","HyFooterLinkItem","base","containerClassAttributes","mainLink","headingClassAttributes","linkClassAttributes","style","h3","defaultHeadingCss","wideHeadingFwCss","Heading","parentElement","hasChildren","headingInVariants","negative","isSearch","sectionClassAttributes","containerSectionClass","hyphenatedText","ingressCss","Ingress","hyMainContentWrapperCss","HyMainContentWrapper","menuLanguageCss","MenuLanguage","handleOutsideMenuClick","event","isMenuOpen","stopPropagation","desktopMenuToggled","searchPanelToggled","universityMainMenuPanelToggled","handleComponentFocus","menuLanguageToggled","emit","handleComponentClick","languageMenuSelector","adjustPosition","languagePanel","shadowRoot","querySelectorAll","headerHeight","hyHeader","rectHeader","getBoundingClientRect","rectLangMenu","offsetHeight","bottom","_dataMenuLanguage","dataMenuLanguage","_labels","labels","svgColor","globeIconSize","fill","isActive","langCode","abbr","isDisabled","menuLanguageItemCss","SiteLanguage","lang","hySearchFieldCss","HySearchField","searchInput","addEventListener","value","isInputValueEmpty","prefillParameter","location","undefined","urlParams","URLSearchParams","search","searchValue","get","handleInputReset","isLuomusSearch","inputId","isLabelHidden","labelLarge","isLabelBold","placeholder","siteHeaderCss","clickTimer","clickTimeout","SiteHeader","mobileMenuToggle","menuMobileToggled","bodyElement","getElementsByTagName","overflow","mobileMenuTopToggle","isTopMenuOpen","menuMobileTopToggled","mainMenuToggled","isDesktopMenuOpen","handleScroll","headerScrollHandler","topOffset","pageYOffset","Math","abs","lastScrollTop","delta","isTopVisible","toggleStickyness","headerScrollDown","headerScrollUp","toggleOn","bodyElementClasses","hySiteHeader","add","remove","isBottomVisible","applySizeClasses","topOptions","root","rootMargin","threshold","topObserver","IntersectionObserver","forEach","nodeName","isIntersecting","header","bottomOptions","bottomObserver","children","setAttribute","navbarHeight","setProperty","dataSiteHeaderLabels","menuLabels","menu_labels","languageLabels","language_labels","searchLabels","search_labels","groupPages","group_pages","dataMenuDonate","donateLink","toString","siteLabel","siteUrl","groupType","isDesktopMenuDropdown","menuType","MenuType","mobile","desktop","tablet","menuAttribute","logoSize","small","logoSizeGroup","logoColorGroup","toggleMenuMobileAndRemoveListener","removeEventListener","handleClickOutside","targetElement","composedPath","activeLang","dataMenuLanguageArray","JSON","parse","dataMainMenuLinks","tabindex","_a","menuLabelClose","noSearch","isBetaGroup","showSearchLabel","dataSiteSearchLabels","dataSearchTools","researchGroupLabel","donate","Fragment","siteLogoCss","SiteLogo","isGroupClass","siteSearchCss","SiteSearch","searchTools","_searchTools","_searchLabels","searchTitleLabel","searchCloseLabel","searchToolsLabel","searchDescriptionLabel","closeSearchPanel","mobileMenuToggled","handleWindowClick","detail","isSearchPanelOpen","path","cludoSayt","CludoSayt","hide","showBackdropShadow","handleSearchPanelToggle","beta","luomus_search_url","searchLanguage","cludoSearchContentFormElement","append","position","maxWidth","shadowTop","searchPanel","initialDisplayStyle","display","headerHeightValue","headerTop","offsetTop","searchPanelHeight","state","hyBackdropDiv","me","outerHeight","height","removeAttribute","currentPageUrlPathName","pathname","searchPagePathNames","showLabel","isAlternative","e","disabled","margin","i","searchToolTarget","description"],"sources":["./src/components/hy-breadcrumbs/hy-breadcrumbs.scss?tag=hy-breadcrumbs","./src/components/hy-breadcrumbs/hy-breadcrumbs.tsx","./src/components/footer/hy-footer/hy-footer.scss?tag=hy-footer","./src/components/footer/hy-footer/hy-footer.tsx","./src/components/footer/hy-footer-action/hy-footer-action.scss?tag=hy-footer-action","./src/components/footer/hy-footer-action/hy-footer-action.tsx","./src/components/footer/hy-footer-base/hy-footer-base.scss?tag=hy-footer-base","./src/components/footer/hy-footer-base/hy-footer-base.tsx","./src/components/footer/hy-footer-info/hy-footer-info.scss?tag=hy-footer-info","./src/components/footer/hy-footer-info/hy-footer-info.tsx","./src/components/footer/hy-footer-link-item/hy-footer-link-item.scss?tag=hy-footer-link-item","./src/components/footer/hy-footer-link-item/hy-footer-link-item.tsx","./src/components/hy-heading/heading.scss?tag=hy-heading&mode=default","./src/components/hy-heading/heading-fw.scss?tag=hy-heading&mode=wide","./src/components/hy-heading/heading.tsx","./src/components/hy-ingress/ingress.scss?tag=hy-ingress","./src/components/hy-ingress/ingress.tsx","./src/components/hy-main-content-wrapper/hy-main-content-wrapper.scss?tag=hy-main-content-wrapper","./src/components/hy-main-content-wrapper/hy-main-content-wrapper.tsx","./src/components/hy-navigation/menu-language/menu-language.scss?tag=hy-menu-language&encapsulation=shadow","./src/components/hy-navigation/menu-language/menu-language.tsx","./src/components/hy-navigation/menu-language-item/menu-language-item.scss?tag=hy-menu-language-item&encapsulation=shadow","./src/components/hy-navigation/menu-language-item/menu-language-item.tsx","./src/components/hy-search-field/hy-search-field.scss?tag=hy-search-field","./src/components/hy-search-field/hy-search-field.tsx","./src/components/hy-site-header/site-header.scss?tag=hy-site-header","./src/components/hy-site-header/site-header.tsx","./src/components/hy-site-header/site-logo/site-logo.scss?tag=hy-site-logo","./src/components/hy-site-header/site-logo/site-logo.tsx","./src/components/hy-site-header/site-search/site-search.scss?tag=hy-site-search&encapsulation=shadow","./src/components/hy-site-header/site-search/site-search.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-breadcrumbs {\n  display: inline-block;\n  position: relative;\n  width: auto;\n\n  &.is-condensed {\n    width: 100%;\n  }\n\n  ol {\n    margin: 0;\n    padding: 0;\n  }\n\n  .breadcrumb-container {\n    display: flex;\n    font-family: var(--main-font-family);\n    flex-wrap: wrap;\n    list-style-type: none;\n    margin: 0;\n    padding: 20px 0 16px;\n\n    @include breakpoint($narrow) {\n      padding: 24px 0 16px;\n    }\n\n    @include breakpoint($extrawide) {\n      padding: 32px 0 16px;\n    }\n  }\n\n  .breadcrumb-item {\n    @include font-size(15px, 20px);\n    align-items: center;\n    display: flex;\n    font-weight: 600;\n    font-family: var(--main-font-family);\n    margin-bottom: 0.75rem;\n    letter-spacing: -0.5px;\n\n    @include breakpoint($narrow) {\n      margin-bottom: 1rem;\n    }\n\n    .breadcrumb-item__link {\n      color: var(--brand-main-light);\n      text-decoration: none;\n    }\n\n    .breadcrumb-item__icon {\n      margin: 0 21px;\n    }\n\n    &:hover {\n      .breadcrumb-item__link {\n        color: var(--brand-main-active);\n      }\n    }\n  }\n\n  .breadcrumb-item--current a {\n    @include font-size(15px, 20px);\n\n    color: var(--grayscale-dark);\n    display: block;\n    font-family: var(--main-font-family);\n    font-weight: 600;\n    letter-spacing: -0.5px;\n    text-decoration: none;\n  }\n}\n","export interface Breadcrumb {\n  url: string;\n  text: string;\n}\n\nimport {Component, Element, h, Prop, State} from \"@stencil/core\";\nimport {BreadcrumbVariants} from \"../../utils/utils\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\n\n@Component({\n  tag: \"hy-breadcrumbs\",\n  styleUrl: \"hy-breadcrumbs.scss\",\n  shadow: false,\n})\nexport class HyBreadcrumbs {\n  private _dataItems: Breadcrumb[];\n  @Prop() dataItems: Breadcrumb[] | string;\n  @Prop() variant: BreadcrumbVariants = BreadcrumbVariants.default as any;\n  @Prop() headerstyle: string = \"with-sidebar\";\n\n  @State() menuOpen: boolean = false;\n  @Element() el: HTMLElement;\n\n  async componentWillLoad() {\n    this._dataItems = await jsonParserWorker(this.dataItems);\n  }\n\n  componentDidLoad() {\n    let hyMainDiv = this.el.closest(\".hy-main\");\n    if (hyMainDiv) {\n      if (!hyMainDiv.classList.contains(\"with-sidebar\")) {\n        this.headerstyle = \"without-sidebar\";\n      }\n    }\n  }\n\n  render() {\n    const breadcrumbsClass = [\"hy-breadcrumbs\", this.variant, this.headerstyle].join(\" \");\n    return (\n      <nav aria-label=\"Breadcrumb\" role=\"navigation\" aria-labelledby=\"system-breadcrumb\" class={breadcrumbsClass}>\n        <ol class=\"breadcrumb-container\">\n          {this._dataItems.map((item) => {\n            if (item.url.length > 0) {\n              return (\n                <li class=\"breadcrumb-item\">\n                  <a class=\"breadcrumb-item__link\" href={item.url}>\n                    {item.text}\n                  </a>\n                  <hy-icon class=\"breadcrumb-item__icon\" icon=\"hy-icon-caret-right\" size={12}></hy-icon>\n                </li>\n              );\n            } else {\n              return (\n                <li class=\"breadcrumb-item breadcrumb-item--current\">\n                  <a href={item.url} aria-current=\"page\">\n                    {item.text}\n                  </a>\n                </li>\n              );\n            }\n          })}\n        </ol>\n      </nav>\n    );\n  }\n}\n",".hy-footer {\n  display: block;\n}\n","import {Component, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-footer\",\n  styleUrl: \"hy-footer.scss\",\n  shadow: false,\n})\nexport class HyFooter {\n  render() {\n    const classAttributes = [\"hy-footer\"];\n    return (\n      <footer class={classAttributes.join(\" \")}>\n        <slot></slot>\n      </footer>\n    );\n  }\n}\n",".hy-footer-action {\n  align-items: center;\n  border-top: 1px solid var(--grayscale-medium-dark);\n  display: flex;\n  flex-direction: row;\n  padding: 8px 16px 16px 16px;\n  place-content: center space-between;\n  width: 100%;\n\n  @include breakpoint($narrow) {\n    margin: 0 auto;\n    max-width: $fullhd;\n    padding: 16px 24px 16px 24px;\n  }\n\n  @include breakpoint($wide) {\n    padding: 16px 32px 24px 32px;\n  }\n\n  &__updated-text {\n    @include font-size(14px, 24px);\n\n    color: var(--grayscale-dark);\n    font-family: var(--main-font-family);\n    letter-spacing: 0;\n\n    @include breakpoint($narrow) {\n      @include font-size(16px, 24px);\n    }\n  }\n\n  &__scroll-up {\n    align-items: center;\n    display: flex;\n\n    .hy-footer-action__up-button {\n      background-color: var(--brand-main-light);\n      border: 0;\n      box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);\n      padding: 8px;\n\n      &:hover {\n        cursor: pointer;\n      }\n    }\n\n    label {\n      @include font-size(16px, 24px);\n\n      color: var(--grayscale-dark);\n      font-family: var(--main-font-family);\n      letter-spacing: 0;\n      margin-right: 8px;\n\n      &:hover {\n        cursor: pointer;\n      }\n    }\n\n    svg {\n      fill: var(--grayscale-white);\n    }\n\n    &:hover {\n      label {\n        text-decoration: underline;\n      }\n      .hy-footer-action__up-button {\n        background-color: var(--brand-main);\n      }\n    }\n  }\n}\n","import {Component, Host, Prop, Listen, h} from \"@stencil/core\";\n\nlet scrollTimeout = null;\n\n@Component({\n  tag: \"hy-footer-action\",\n  styleUrl: \"hy-footer-action.scss\",\n  shadow: false,\n})\nexport class HyFooterAction {\n  /**\n   * String of text for updated text to be displayed.\n   */\n  @Prop() updatedText: string;\n  /**\n   * Up button label.\n   */\n  @Prop() upButtonLabel: string;\n\n  disconnectedCallback() {\n    clearTimeout(scrollTimeout);\n  }\n\n  @Listen(\"scrollTop\", {capture: true}) scrollTop() {\n    const hyLogo = document.querySelector(\".hy-site-header .hy-site-header__branding a\") as HTMLElement;\n    window.scrollTo({top: 0, behavior: \"smooth\"});\n    scrollTimeout = window.setTimeout(() => {\n      hyLogo.focus();\n    }, 500);\n  }\n\n  render() {\n    const classAttributes = [\"hy-footer-action\"].join(\" \");\n\n    return (\n      <Host class={classAttributes}>\n        <span class={\"hy-footer-action__updated-text\"}>{this.updatedText}</span>\n        {this.upButtonLabel && (\n          <span class=\"hy-footer-action__scroll-up\">\n            <label id=\"up-label\" htmlFor=\"scroll-up\" onClick={() => this.scrollTop()}>\n              {this.upButtonLabel}\n            </label>\n            <button\n              name=\"scroll-up\"\n              aria-labelledby=\"up-label\"\n              onClick={() => this.scrollTop()}\n              class=\"hy-footer-action__up-button\"\n              type=\"button\"\n            >\n              <hy-icon class={\"hy-footer-action__up-icon\"} icon={\"hy-icon-arrow-up\"} size={26} />\n            </button>\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n",".hy-footer-base--content-container {\n  background-color: var(--grayscale-black);\n  display: block;\n  max-width: 100%;\n}\n\n.hy-footer-base {\n  background-color: var(--grayscale-black);\n  display: flex;\n  flex-direction: column-reverse;\n  max-height: 100%;\n  padding: 32px 16px 32px 16px;\n  place-content: center space-between;\n  position: relative;\n  width: 100%;\n\n  @include breakpoint($narrow) {\n    flex-direction: column-reverse;\n    margin: 0 auto;\n    max-width: $fullhd;\n    padding: 32px 24px 32px 24px;\n  }\n\n  @include breakpoint($wide) {\n    flex-direction: row;\n    padding: 36px 32px 36px 32px;\n  }\n\n  @include breakpoint($extrawide) {\n    padding: 40px 32px 40px 32px;\n  }\n\n  &__left {\n    align-items: center;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    margin-top: 24px;\n\n    @include breakpoint($narrow) {\n      align-items: center;\n      width: 100%;\n    }\n\n    @include breakpoint($wide) {\n      align-items: flex-start;\n      width: 31.11%;\n    }\n  }\n\n  &__logo {\n    @include font-size(18px, 16px);\n\n    font-family: var(--main-font-family);\n    font-weight: bold;\n    letter-spacing: -0.9px;\n\n    .hy-site-logo__label {\n      min-width: max-content;\n      max-width: max-content;\n    }\n  }\n\n  &__content {\n    @include font-size(16px, 24px);\n\n    color: var(--grayscale-white);\n    font-family: var(--main-font-family);\n    font-style: normal;\n    font-weight: 600;\n    letter-spacing: -0.1px;\n    margin: 32px 0;\n    white-space: pre-line;\n\n    @include breakpoint($narrow) {\n      margin: 32px 0;\n    }\n\n    @include breakpoint($wide) {\n      margin: 42px 0;\n    }\n\n    @include breakpoint($extrawide) {\n      margin: 54px 0;\n    }\n\n    address {\n      font-style: normal;\n    }\n\n    a {\n      color: var(--grayscale-white);\n      font-family: var(--main-font-family);\n    }\n  }\n\n  &__some {\n    align-items: center;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    margin-bottom: 64px;\n    z-index: 2;\n\n    @include breakpoint($wide) {\n      align-items: flex-start;\n      flex-direction: column;\n      margin-bottom: 0;\n    }\n\n    @include breakpoint($extrawide) {\n      align-items: center;\n      flex-direction: row;\n    }\n\n    &__label {\n      @include font-size(16px, 24px);\n\n      color: var(--grayscale-white);\n      font-family: var(--main-font-family);\n      font-weight: 600;\n      letter-spacing: -0.1px;\n      margin-bottom: 8px;\n      margin-right: 24px;\n\n      @include breakpoint($wide) {\n        margin-bottom: 8px;\n      }\n    }\n\n    &__items {\n      align-items: center;\n      display: flex;\n      flex-direction: row;\n    }\n\n    &__item {\n      margin-right: 24px;\n\n      :last-child() {\n        margin-right: 0;\n      }\n\n      &:hover {\n        color: var(--grayscale-medium) !important;\n        svg {\n          fill: var(--grayscale-medium);\n        }\n      }\n    }\n\n    svg {\n      fill: var(--grayscale-white);\n    }\n  }\n\n  &__right {\n    display: flex;\n    flex-wrap: wrap;\n    flex-direction: row;\n    justify-content: flex-start;\n    max-height: 100%;\n    width: 100%;\n\n    @include breakpoint($narrow) {\n      margin-bottom: 32px;\n      max-height: 300px;\n      width: calc(100% + 24px);\n    }\n\n    @include breakpoint($wide) {\n      max-height: 350px;\n      width: 65.56%;\n    }\n  }\n\n  &__copy {\n    @include font-size(16px, 24px);\n\n    bottom: 40px;\n    color: var(--grayscale-white);\n    display: inline-block;\n    font-family: var(--main-font-family);\n    font-weight: 600;\n    letter-spacing: -0.1px;\n    position: absolute;\n    right: 50%;\n    text-align: center;\n    transform: translateX(50%);\n    width: 100%;\n\n    @include breakpoint($narrow) {\n      bottom: 32px;\n      right: 50%;\n      transform: translateX(50%);\n    }\n\n    @include breakpoint($wide) {\n      bottom: 36px;\n      right: 32px;\n      text-align: right;\n      transform: none;\n    }\n\n    @include breakpoint($extrawide) {\n      bottom: 40px;\n    }\n  }\n}\n","export interface FooterBaseLinks {\n  label: string;\n  url: string;\n  isActive?: boolean;\n  mainlink?: boolean;\n  items: Array<FooterBaseLinks>;\n}\n\nexport interface FooterBaseSome {\n  label: string;\n  url: string;\n  type: string;\n}\n\nimport {Component, ComponentInterface, Host, Prop, h} from \"@stencil/core\";\nimport {FooterLinkItemColor, SiteLogoSize, ColorVariant, FooterVariant} from \"../../../utils/utils\";\nimport {jsonParserWorker} from \"../../../global/globalScript\";\n\n@Component({\n  tag: \"hy-footer-base\",\n  styleUrl: \"hy-footer-base.scss\",\n  shadow: false,\n})\nexport class HyFooterBase implements ComponentInterface {\n  /**\n   * Link item color\n   */\n  @Prop() color: FooterLinkItemColor = FooterLinkItemColor.white;\n  /**\n   * Logo url\n   */\n  @Prop() logoUrl?: string;\n  /**\n   * Logo label\n   */\n  @Prop() logoLabel?: string;\n  /**\n   * Logo size\n   */\n  @Prop() size: SiteLogoSize = SiteLogoSize.big;\n  /**\n   * Label for some links\n   */\n  @Prop() someLabel?: string;\n  /**\n   * Copyright text\n   */\n  @Prop() copyrightText: string;\n\n  private _dataFooterBaseLinks: FooterBaseLinks[];\n  private _dataFooterBaseSome: FooterBaseSome[];\n  /**\n   * Footer links to be displayed\n   */\n  @Prop() dataFooterBaseLinks: FooterBaseLinks[] | string;\n  /**\n   * Footer some links\n   */\n  @Prop() dataFooterBaseSome: FooterBaseSome[] | string;\n\n  async componentWillLoad() {\n    this._dataFooterBaseLinks = await jsonParserWorker(this.dataFooterBaseLinks);\n    this._dataFooterBaseSome = await jsonParserWorker(this.dataFooterBaseSome);\n  }\n\n  render() {\n    const logoColor = ColorVariant.white;\n    const classAttributes = [\"hy-footer-base--content-container\"].join(\" \");\n    const links = this._dataFooterBaseLinks as Array<FooterBaseLinks>;\n    const some = this._dataFooterBaseSome as Array<FooterBaseSome>;\n\n    return (\n      <Host class={classAttributes}>\n        <div class=\"hy-footer-base\">\n          <div class=\"hy-footer-base__left\">\n            <div class=\"hy-footer-base__logo\">\n              <hy-site-logo type={FooterVariant.footer} color={logoColor} url={this.logoUrl} label={this.logoLabel} />\n            </div>\n            <div class=\"hy-footer-base__content\">\n              <slot name=\"content\"></slot>\n            </div>\n            <div class=\"hy-footer-base__some\">\n              <span class=\"hy-footer-base__some__label\">{this.someLabel}</span>\n              <div class=\"hy-footer-base__some__items\">\n                {some &&\n                  some.map((s) => {\n                    return (\n                      <a\n                        aria-label={s.label}\n                        href={s.url}\n                        class={`hy-footer-base__some__item`}\n                        title={s.label}\n                        target=\"_blank\"\n                      >\n                        <hy-icon icon={`hy-icon-some-${s.type}`} size={36} />\n                      </a>\n                    );\n                  })}\n              </div>\n            </div>\n          </div>\n          <div class=\"hy-footer-base__right\">\n            {links &&\n              links.map((link) => {\n                return (\n                  <hy-footer-link-item\n                    label={link.label}\n                    url={link.url}\n                    color={FooterLinkItemColor.white}\n                  ></hy-footer-link-item>\n                );\n              })}\n            {this.copyrightText && <span class=\"hy-footer-base__copy\">{this.copyrightText}</span>}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  display: block;\n}\n\n.hy-footer-info {\n  display: flex;\n  flex-direction: column;\n  max-height: auto;\n  padding: 0 16px 40px 16px;\n  place-content: center space-between;\n\n  @include breakpoint($narrow) {\n    flex-direction: column;\n    margin: 0 auto;\n    max-width: $fullhd;\n    padding: 0 24px 32px 24px;\n  }\n\n  @include breakpoint($wide) {\n    flex-direction: row;\n    padding: 0 32px 36px 32px;\n  }\n\n  @include breakpoint($extrawide) {\n    padding: 0 32px 40px 32px;\n  }\n\n  &__content {\n    margin-bottom: 24px;\n    width: 100%;\n\n    @include breakpoint($narrow) {\n      margin-bottom: 32px;\n      width: 100%;\n    }\n\n    @include breakpoint($wide) {\n      width: 31.11%;\n    }\n\n    .hy-heading {\n      padding-top: 0 !important;\n    }\n  }\n\n  &__ingress {\n    @include font-size(15px, 20px);\n    @include font-weight($regular);\n    letter-spacing: -0.09px;\n\n    color: var(--grayscale-black);\n    font-family: var(--main-font-family);\n    padding-bottom: 24px;\n\n    @include breakpoint($wide) {\n      @include font-size(16px, 22px);\n      letter-spacing: -0.1px;\n      padding-bottom: 16px;\n    }\n\n    @include breakpoint($xlarge) {\n      @include font-size(17px, 26px); // Paragraph Large size\n    }\n\n    @include breakpoint($extrawide) {\n      padding-bottom: 24px;\n    }\n\n    a {\n      @include font-size(14px, 20px); // Paragraph Small size\n      color: var(--link-blue);\n      font-family: var(--main-font-family);\n      font-weight: 600;\n      display: inline-flex;\n\n      @include breakpoint($narrow) {\n        @include font-size(16px, 24px);\n        letter-spacing: -0.1px;\n      }\n\n      @include breakpoint($xlarge) {\n        @include font-size(17px, 26px); // Paragraph Large size\n      }\n\n      &:hover {\n        color: var(--brand-main);\n      }\n    }\n\n    a[target=\"_blank\"]:after {\n      display: block;\n      content: url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(4,121,165)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\");\n      margin-left: 3px;\n      transform: rotate(315deg);\n\n      &:hover {\n        content: url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='pink'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\");\n      }\n    }\n\n    a[target=\"_blank\"]:hover {\n      &:after {\n        content: url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(14,104,139)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\");\n      }\n    }\n  }\n\n  &__links {\n    display: flex;\n    flex-direction: column;\n    flex-wrap: wrap;\n    max-height: auto;\n    overflow: hidden;\n    width: 100%;\n\n    @include breakpoint($narrow) {\n      align-content: space-between;\n      max-height: 555px;\n      width: 100%;\n    }\n    @include breakpoint($wide) {\n      max-height: 530px;\n      width: 65.56%;\n    }\n    @include breakpoint($overwide) {\n      max-height: 460px;\n    }\n\n    &.is-group:not(.luomus) {\n      @include breakpoint($narrow) {\n        flex-direction: row;\n        max-height: none;\n      }\n    }\n  }\n\n  .hy-accordion__content--inner-wrapper {\n    width: 100%;\n  }\n}\n\n.hy-footer-info.luomus {\n  background-color: var(--grayscale-black);\n  color: var(--grayscale-white);\n  padding-top: 40px;\n\n  .hy-footer-info__logo {\n    @include font-size(18px, 16px);\n    font-family: var(--main-font-family);\n    font-weight: bold;\n    letter-spacing: -0.9px;\n\n    .hy-site-logo__label {\n      max-width: 100%;\n    }\n  }\n\n  .hy-footer-info__branding {\n    padding: 22px 0 62px;\n    a {\n      img {\n        height: 32px;\n        width: 148px;\n      }\n    }\n  }\n\n  .luomus-footer-content {\n    color: var(--grayscale-white);\n    margin: 8px 0;\n\n    &__link {\n      @include font-size(18px, 24px);\n      @include font-weight($bold);\n\n      color: var(--grayscale-white);\n      font-family: var(--main-font-family);\n      font-style: normal;\n      letter-spacing: -0.36px;\n      text-decoration: none;\n    }\n\n    &__description {\n      @include font-size(16px, 22px);\n      @include font-weight($regular);\n\n      color: var(--grayscale-white);\n      font-family: var(--main-font-family);\n      font-style: normal;\n      letter-spacing: -0.1px;\n      padding-bottom: 32px;\n    }\n  }\n}\n","export interface FooterInfoLinks {\n  label: string;\n  url: string;\n  isExternal: string;\n  isActive?: boolean;\n  mainlink?: boolean;\n  items: Array<FooterInfoLinks>;\n}\n\nexport interface LuomusFooterContent {\n  heading: string;\n  url: string;\n  content?: string;\n}\n\nimport {Component, ComponentInterface, Element, h, Host, Prop, State} from \"@stencil/core\";\nimport ResizeObserver from \"resize-observer-polyfill\";\nimport {\n  ColorVariant,\n  CtaLinkButtonVariants,\n  FooterLinkItemColor,\n  FooterLinkVariants,\n  FooterVariant,\n  HeadingSectionVariants,\n  HeadingVarians,\n} from \"../../../utils/utils\";\nimport {jsonParserWorker} from \"../../../global/globalScript\";\n\n@Component({\n  tag: \"hy-footer-info\",\n  styleUrl: \"hy-footer-info.scss\",\n  shadow: false,\n})\nexport class HyFooterInfo implements ComponentInterface {\n  @Element() el: HTMLElement;\n  /**\n   * Content area title.\n   */\n  @Prop() textTitle: string;\n  /**\n   * Content area text.\n   */\n  @Prop() textDescription: string;\n  /**\n   * Content area link button text.\n   */\n  @Prop() linkText: string;\n  /**\n   * Content area link button url.\n   */\n  @Prop() linkUrl: string;\n  @Prop() linkIsExternal: boolean = false;\n  @Prop() linkScLabel?: string;\n\n  /**\n   * Logo url\n   */\n  @Prop() logoUrl?: string;\n  /**\n   * Logo label\n   */\n  @Prop() logoLabel?: string;\n\n  /**\n   * Luomus group Logo url for footer\n   */\n  @Prop() groupLogoUrl?: string;\n\n  @Prop() isGroup: boolean;\n  @Prop() isLuomusGroup: boolean = false;\n  @State() isMobile: boolean;\n\n  private ro: ResizeObserver;\n  private _dataFooterInfoLinks: FooterInfoLinks[];\n  private _dataLuomusFooterContent: LuomusFooterContent[];\n  /**\n   * Data for links to be displayed.\n   */\n  @Prop() dataFooterInfoLinks: FooterInfoLinks[] | string;\n\n  @Prop() luomusFooterContent: LuomusFooterContent[] | string;\n\n  async componentWillLoad() {\n    this._dataFooterInfoLinks = await jsonParserWorker(this.dataFooterInfoLinks);\n    this._dataLuomusFooterContent = await jsonParserWorker(this.luomusFooterContent);\n  }\n\n  componentDidLoad() {\n    this.ro = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        this.checkForMobile(entry.contentRect.width);\n      }\n    });\n    this.ro.observe(document.body);\n  }\n\n  disconnectedCallback() {\n    this.ro.disconnect();\n  }\n\n  checkForMobile(size: number) {\n    this.isMobile = size <= 479 ? true : false;\n  }\n\n  render() {\n    const links = this._dataFooterInfoLinks as Array<FooterInfoLinks>;\n    const luomusFooterContentItems = this._dataLuomusFooterContent as Array<LuomusFooterContent>;\n\n    const variant = this.isGroup ? FooterLinkVariants.group : FooterLinkVariants.campus;\n    const section = this.isGroup ? HeadingSectionVariants.groupFooterInfo : HeadingSectionVariants.defaultFooterInfo;\n\n    const footerLinkItemClass = this.isGroup ? \"group\" : \"campus\";\n\n    const scLabel = this.linkScLabel && this.linkScLabel.length > 0 ? this.linkScLabel : this.linkText;\n    const logoColor = ColorVariant.white;\n    const linksColor = this.isLuomusGroup ? FooterLinkItemColor.white : FooterLinkItemColor.black;\n\n    return (\n      <Host\n        class={{\n          \"hy-footer-info\": true,\n          luomus: this.isLuomusGroup,\n        }}\n      >\n        <div\n          class={{\n            \"hy-footer-info__content\": true,\n            \"is-group\": this.isGroup,\n          }}\n        >\n          {!this.isLuomusGroup && (\n            <hy-heading heading={HeadingVarians.h2} section={section}>\n              {this.textTitle}\n            </hy-heading>\n          )}\n          {this.isLuomusGroup && (\n            <div class=\"hy-footer-info__logo\">\n              <hy-site-logo\n                type={FooterVariant.footer}\n                isGroup={this.isGroup}\n                color={logoColor}\n                url={this.logoUrl}\n                label={this.logoLabel}\n              />\n            </div>\n          )}\n          {this.isLuomusGroup && (\n            <div class={\"hy-footer-info__branding\"}>\n              <a href={this.groupLogoUrl}>\n                <img src={this.groupLogoUrl} alt={\"Luomus logo\"} />\n              </a>\n            </div>\n          )}\n          {!this.isLuomusGroup && (\n            <div\n              class={{\n                \"hy-footer-info__ingress\": true,\n                \"is-group\": this.isGroup,\n              }}\n              innerHTML={this.textDescription}\n            ></div>\n          )}\n          {!this.isLuomusGroup && this.linkUrl && (\n            <hy-cta-button\n              link-content={this.linkText}\n              sc-label={scLabel}\n              is-external={this.linkIsExternal}\n              url={this.linkUrl}\n              variant={CtaLinkButtonVariants.onWhiteBkgd}\n            />\n          )}\n          {this.isLuomusGroup &&\n            luomusFooterContentItems &&\n            luomusFooterContentItems.map((item) => {\n              return (\n                <div class=\"luomus-footer-content\">\n                  <a href={item.url} class=\"luomus-footer-content__link\">\n                    {item.heading}\n                  </a>\n                  {item.content && <div class=\"luomus-footer-content__description\" innerHTML={item.content}></div>}\n                </div>\n              );\n            })}\n        </div>\n        {this.isMobile && this.isGroup === false ? (\n          <div\n            class={{\n              \"hy-footer-info__links\": true,\n              \"is-group\": this.isGroup,\n              luomus: this.isLuomusGroup,\n            }}\n          >\n            <hy-accordion-container accordionid={\"test\"}>\n              {links &&\n                links.map((link) => {\n                  return (\n                    <hy-accordion-item accordiontitle={link.label}>\n                      <hy-footer-link-item\n                        class={footerLinkItemClass}\n                        variant={variant}\n                        color={linksColor}\n                        label={link.label}\n                        url={link.url}\n                        main-link={link.mainlink}\n                        items={link.items}\n                        isMobile={this.isMobile}\n                      ></hy-footer-link-item>\n                    </hy-accordion-item>\n                  );\n                })}\n            </hy-accordion-container>\n          </div>\n        ) : (\n          <div\n            class={{\n              \"hy-footer-info__links\": true,\n              \"is-group\": this.isGroup,\n              luomus: this.isLuomusGroup,\n            }}\n          >\n            {links &&\n              links.map((link) => {\n                const external_link = link.isExternal === \"external\";\n                return (\n                  <hy-footer-link-item\n                    is-luomus-group={this.isLuomusGroup}\n                    class={footerLinkItemClass}\n                    variant={variant}\n                    color={linksColor}\n                    label={link.label}\n                    url={link.url}\n                    is-external={external_link}\n                    main-link={link.mainlink}\n                    items={link.items}\n                    isMobile={this.isMobile}\n                  ></hy-footer-link-item>\n                );\n              })}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n",":host {\n  display: block;\n}\n\nhy-footer-link-item:not([main-link]) {\n  width: 100%;\n\n  @include breakpoint($narrow) {\n    width: 50%;\n  }\n}\n\nhy-footer-link-item[main-link] {\n  hyphens: auto;\n  min-width: 200px;\n  width: 100%;\n\n  @include breakpoint($narrow) {\n    width: 50%;\n  }\n}\n\nhy-footer-link-item.group[main-link]:not([is-luomus-group]) {\n  flex-basis: 100%;\n  margin-top: 1rem;\n\n  @include breakpoint($narrow) {\n    flex-basis: 50%;\n    margin: 0;\n  }\n}\n\n.hy-footer-link-item--container {\n  display: flex;\n  flex-direction: column;\n\n  .hy-footer-link-item:last-child {\n    margin-bottom: 16px;\n  }\n}\n\n//.hy-footer-link-item__main .hy-heading__container>h3.hy-heading .hy-footer-link-item__link {\n.hy-footer-link-item {\n  display: flex;\n  font-family: var(--main-font-family);\n  margin-left: 0;\n  margin-right: 0;\n  position: relative;\n  text-decoration: none;\n\n  @include breakpoint($narrow) {\n    margin-left: 0;\n    margin-right: 24px;\n    //padding: 15px 20px 15px 0;\n  }\n\n  @include breakpoint($wide) {\n    margin-left: 32px;\n    margin-right: 0;\n    //padding: 15px 20px 15px 0;\n  }\n\n  @include breakpoint($xlarge) {\n    margin-left: 48px;\n  }\n\n  &__main {\n    border: 0;\n    padding: 0;\n    margin-right: -32px;\n\n    .hy-heading__container > h3.hy-heading {\n      @include font-size(18px, 22px);\n      letter-spacing: -0.45px;\n      padding: 0 0 1px 0 !important;\n\n      @include breakpoint($narrow) {\n        @include font-size(22px, 28px);\n        letter-spacing: -0.44px;\n      }\n\n      .hy-footer-link-item__link {\n        color: var(--grayscale-black);\n        font-family: var(--main-font-family);\n        text-decoration: none;\n        margin-bottom: 12px;\n      }\n    }\n  }\n\n  &__color-black {\n    @include font-size(14px, 18px);\n    @include font-weight($regular);\n    border-bottom: 1px solid var(--grayscale-black);\n    color: var(--grayscale-black);\n    letter-spacing: -0.5px;\n    padding: 16px 20px 14px 0;\n\n    .hy-footer-link-item__icon svg {\n      fill: var(--brand-main-nearly-black);\n      height: 12px;\n      margin-right: 2px;\n      width: 12px;\n    }\n\n    .hy-heading__container > h3.hy-heading {\n      &a.hy-footer-link-item__link:hover {\n        color: var(--brand-main) !important;\n        text-decoration: underline;\n\n        svg {\n          fill: var(--brand-main);\n        }\n      }\n    }\n  }\n\n  &__color-white {\n    @include font-size(14px, 18px);\n    @include font-weight($semibold);\n    border-bottom: 1px solid var(--grayscale-white);\n    color: var(--grayscale-white);\n    letter-spacing: -0.5px;\n    padding: 15px 20px 15px 0;\n\n    .hy-footer-link-item__icon svg {\n      fill: var(--grayscale-white);\n    }\n\n    .hy-heading__container > h3.hy-heading {\n      .hy-footer-link-item__link:hover {\n        color: var(--grayscale-medium) !important;\n\n        svg {\n          fill: var(--grayscale-medium);\n        }\n      }\n    }\n  }\n\n  &__icon {\n    position: absolute;\n    right: 0;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n}\n","import {Component, h, Prop} from \"@stencil/core\";\nimport {FooterLinkItemColor, FooterLinkVariants, HeadingVarians} from \"../../../utils/utils\";\n\n@Component({\n  tag: \"hy-footer-link-item\",\n  styleUrl: \"hy-footer-link-item.scss\",\n  shadow: false,\n})\nexport class HyFooterLinkItem {\n  @Prop() label: string;\n  @Prop() url: string;\n  @Prop() isExternal: boolean = false;\n  @Prop() mainLink: boolean = false;\n  @Prop() items: Array<any>;\n  @Prop() color: FooterLinkItemColor = FooterLinkItemColor.black;\n  @Prop() isMobile: boolean;\n  @Prop() variant: FooterLinkVariants = FooterLinkVariants.base;\n  @Prop() isLuomusGroup: boolean = false;\n\n  render() {\n    const containerClassAttributes = [\n      \"hy-footer-link-item--container\",\n      `hy-footer-link-item__${this.variant}`,\n      this.items && \"hy-footer-link-item__has-children\",\n    ].join(\" \");\n    const classAttributes = [\n      \"hy-footer-link-item\",\n      this.mainLink && \"hy-footer-link-item__main\",\n      `hy-footer-link-item__color-${this.color}`,\n    ].join(\" \");\n    const headingClassAttributes = [\n      \"hy-footer-link-item\",\n      \"hy-footer-link-item__heading\",\n      this.mainLink && \"hy-footer-link-item__main\",\n      `hy-footer-link-item__heading__color-${this.color}`,\n    ].join(\" \");\n    const linkClassAttributes = [\n      \"hy-footer-link-item\",\n      `hy-footer-link-item__color-${this.color}`,\n      this.isLuomusGroup ? `luomus` : \"\",\n    ].join(\" \");\n\n    if (this.items) {\n      if (this.isMobile && this.variant !== FooterLinkVariants.group) {\n        return (\n          <div class={containerClassAttributes}>\n            {this.items.map((item) => {\n              const target = item.isExternal === \"external\" ? \"_blank\" : \"_self\";\n              return (\n                <a class={linkClassAttributes} href={item.url} target={target} style={{color: this.color}}>\n                  {item.label}\n                  <hy-icon class={\"hy-footer-link-item__icon\"} icon={\"hy-icon-arrow-right\"} size={16} />\n                </a>\n              );\n            })}\n          </div>\n        );\n      } else {\n        return (\n          <div class={containerClassAttributes}>\n            <hy-heading class={headingClassAttributes} heading={HeadingVarians.h3}>\n              {this.url.length > 0 && (\n                <a class={\"hy-footer-link-item__link\"} href={this.url} style={{color: this.color}}>\n                  {this.label}\n                </a>\n              )}\n              {this.url.length == 0 && <div class={\"hy-footer-link-item__link\"}>{this.label}</div>}\n            </hy-heading>\n            {this.items.map((item) => {\n              const target = item.isExternal === \"external\" ? \"_blank\" : \"_self\";\n              return (\n                <a class={linkClassAttributes} href={item.url} target={target} style={{color: this.color}}>\n                  {item.label}\n                  <hy-icon class={\"hy-footer-link-item__icon\"} icon={\"hy-icon-arrow-right\"} size={16} />\n                </a>\n              );\n            })}\n          </div>\n        );\n      }\n    } else {\n      const target = this.isExternal ? \"_blank\" : \"_self\";\n      return (\n        <a class={classAttributes} href={this.url} style={{color: this.color}} target={target}>\n          {this.label}\n          <hy-icon class={\"hy-footer-link-item__icon\"} icon={\"hy-icon-arrow-right\"} size={16} />\n        </a>\n      );\n    }\n  }\n}\n",":host {\n  display: block;\n}\n\n.hy-heading__container {\n  display: flex;\n  flex-direction: column-reverse;\n  width: 100%;\n\n  @include breakpoint($narrow) {\n    flex-direction: row;\n  }\n\n  &__subsection {\n    padding: 2.5rem 0 1.375rem;\n\n    @include breakpoint($narrow) {\n      padding: 4rem 0 2.375rem;\n    }\n  }\n\n  // H1 content page title\n  h1.hy-heading__default {\n    margin-bottom: 12px;\n\n    @include breakpoint($xlarge) {\n      margin-bottom: 16px;\n    }\n\n    // No sidebar, large desktops\n    &__large {\n      @include breakpoint($extrawide) {\n        margin-bottom: 16px;\n      }\n    }\n  }\n\n  h1.hy-heading__search {\n    margin-bottom: 0;\n    padding: 16px 0 0;\n\n    @include breakpoint($narrow) {\n      padding: 28px 0 0;\n    }\n    @include breakpoint($wide) {\n      padding: 32px 0 0;\n    }\n\n    &__large {\n      @include breakpoint($extrawide) {\n        padding: 40px 0 0;\n      }\n    }\n  }\n\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    padding: 1.5rem 0 1rem;\n\n    @include breakpoint($narrow) {\n      padding: 2rem 0 1rem;\n    }\n  }\n\n  &.hy-heading__introduction {\n    padding-top: 0;\n  }\n\n  .hy-heading__courses {\n    padding-top: 0;\n  }\n}\n\n.hy-heading {\n  display: flex;\n  flex-grow: 1;\n  flex-shrink: 0;\n  max-width: 100%;\n  width: auto;\n}\n\n/*\n  Headers (ex. h2, h3) used in Content pages (no caps and line).\n*/\n.hy-heading__subsection--divider,\n.hy-heading__contentsection--divider {\n  flex-shrink: 2;\n  overflow: hidden;\n  width: 100%;\n\n  &:after {\n    background-color: transparent;\n    border-bottom: 6px solid var(--grayscale-dark);\n    content: \" \";\n    display: flex;\n    height: 2px;\n    width: 100%;\n    margin-left: 0;\n    margin-bottom: 0.5rem;\n    position: relative;\n    top: 50%;\n    transform: translateY(-50%);\n\n    @include breakpoint($narrow) {\n      margin-left: 2rem;\n      border-bottom: 1px solid var(--grayscale-dark);\n      margin-bottom: 1rem;\n    }\n  }\n}\n\n// H2 used in landing pages and in Introduction paragraph: caps, bigger font.\n// These styles are applied if there is a Sidebar on the page in Desktop sizes\nh2.hy-heading__introduction,\nh2.hy-heading__landingsection {\n  @include font-size(28px, 32px);\n  @include font-weight($bold);\n  letter-spacing: -0.7px;\n  text-transform: uppercase;\n}\n\nh1.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\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// Applied when there is a sidebar\n.hy-heading__container__common {\n  h2.hy-heading__introduction,\n  h2.hy-heading__landingsection {\n    @include breakpoint($narrow) {\n      @include font-size(34px, 40px);\n      letter-spacing: -0.85px;\n    }\n\n    @include breakpoint($xlarge) {\n      @include font-size(42px, 48px);\n      letter-spacing: -1.05px;\n    }\n  }\n\n  h2.hy-heading__introduction {\n    padding: 0 0 12px;\n    @include breakpoint($narrow) {\n      padding: 0 0 1rem;\n    }\n  }\n\n  h2.hy-heading__landingsection,\n  h2.hy-heading__contentsection {\n    padding-bottom: 24px;\n\n    @include breakpoint($narrow) {\n      padding-bottom: 28px;\n    }\n\n    @include breakpoint($wide) {\n      padding-bottom: 32px;\n    }\n\n    @include breakpoint($extrawide) {\n      padding-bottom: 32px;\n    }\n\n    @include breakpoint($xlarge) {\n      padding-bottom: 40px;\n    }\n  }\n\n  // Footer info box header style for group pages.\n  h2.hy-heading__group_footer_info {\n    @include font-size(24px, 28px);\n    @include font-weight($bold);\n    letter-spacing: -0.6px;\n    text-transform: uppercase;\n\n    @include breakpoint($narrow) {\n      letter-spacing: -0.8px;\n    }\n    @include breakpoint($xlarge) {\n      @include font-size(26px, 30px);\n    }\n  }\n\n  // Footer info box header style for main site pages.\n  h2.hy-heading__footer_info {\n    @include font-size(28px, 32px);\n    @include font-weight($bold);\n    letter-spacing: -0.7px;\n    text-transform: uppercase;\n\n    @include breakpoint($narrow) {\n      @include font-size(34px, 40px);\n      letter-spacing: -0.85px;\n    }\n    @include breakpoint($xlarge) {\n      @include font-size(42px, 48px);\n      letter-spacing: -1.05px;\n    }\n  }\n}\n\n// Applied when there is NO sidebar\n.hy-heading__container__large {\n  h2.hy-heading__introduction,\n  h2.hy-heading__landingsection {\n    @include breakpoint($narrow) {\n      @include font-size(34px, 40px);\n      letter-spacing: -0.85px;\n    }\n\n    @include breakpoint($extrawide) {\n      @include font-size(42px, 48px);\n      letter-spacing: -1.05px;\n    }\n  }\n\n  h2.hy-heading__introduction {\n    //@todo check here\n    @include breakpoint($extrawide) {\n      // h2 font large\n      padding: 0 0 1rem;\n    }\n    @include breakpoint($xlarge) {\n      // h2 font x-large\n      padding: 0 0 20px;\n    }\n  }\n\n  h2.hy-heading__landingsection,\n  h2.hy-heading__contentsection {\n    padding-bottom: 24px;\n\n    @include breakpoint($narrow) {\n      padding-bottom: 28px;\n    }\n\n    @include breakpoint($wide) {\n      padding-bottom: 32px;\n    }\n\n    @include breakpoint($extrawide) {\n      padding-bottom: 40px;\n    }\n  }\n\n  // Hero h1 landing minor. no sidebar\n  h1.hy-heading__landing_minor {\n    @include breakpoint($extrawide) {\n      @include font-size(52px, 60px);\n      letter-spacing: -1.3px;\n    }\n  }\n\n  // Hero h1 heading frontpage. no sidebar\n  h1.hy-heading__frontpage,\n  h1.hy-heading__landing_major {\n    @include breakpoint($extrawide) {\n      @include font-size(56px, 64px);\n      letter-spacing: -1.4px;\n    }\n  }\n\n  // Footer info box header style for group pages.\n  h2.hy-heading__group_footer_info {\n    @include font-size(24px, 28px);\n    @include font-weight($bold);\n    letter-spacing: -0.6px;\n    text-transform: uppercase;\n\n    @include breakpoint($narrow) {\n      letter-spacing: -0.8px;\n    }\n    @include breakpoint($extrawide) {\n      @include font-size(26px, 30px);\n    }\n  }\n\n  // Footer info box header style for main site pages.\n  h2.hy-heading__footer_info {\n    @include font-size(28px, 32px);\n    @include font-weight($bold);\n    letter-spacing: -0.7px;\n    text-transform: uppercase;\n\n    @include breakpoint($narrow) {\n      @include font-size(34px, 40px);\n      letter-spacing: -0.85px;\n    }\n    @include breakpoint($extrawide) {\n      @include font-size(42px, 48px);\n      letter-spacing: -1.05px;\n    }\n  }\n}\n\n// h3 on landing pages use the same fonts as h2 on content pages; no line; no caps\nh3.hy-heading__landingsection {\n  @include font-size(26px, 32px);\n  letter-spacing: -0.8px;\n\n  @include breakpoint($narrow) {\n    // > 480px\n    @include font-size(32px, 32px);\n    letter-spacing: -1px;\n  }\n\n  @include breakpoint($extrawide) {\n    // > 1200px\n    @include font-size(40px, 48px);\n    letter-spacing: -1.2px;\n  }\n\n  @include breakpoint($xlarge) {\n    // > 1400px\n    @include font-size(40px, 48px);\n    letter-spacing: -1.2px;\n  }\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  color: var(--brand-main-nearly-black);\n  font-family: var(--main-font-family);\n  font-weight: 700;\n  padding: 0;\n  margin: 0;\n  width: 100%;\n\n  &.negative {\n    color: var(--grayscale-white);\n  }\n}\n\nh1 {\n  @include font-size(32px, 38px);\n  letter-spacing: -0.8px;\n  text-transform: uppercase;\n\n  @include breakpoint($narrow) {\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  // without Sidebar\n  .hy-heading__container__large & {\n    @include breakpoint($extrawide) {\n      @include font-size(52px, 60px);\n      letter-spacing: -1.3px;\n    }\n  }\n}\n\n// default h2 used in content pages\nh2 {\n  @include font-size(26px, 32px);\n  @include font-weight($bold);\n  letter-spacing: -0.52px;\n\n  @include breakpoint($narrow) {\n    @include font-size(30px, 36px);\n    letter-spacing: -0.6px;\n  }\n\n  // with Sidebar\n  .hy-heading__container__common & {\n    @include breakpoint($xlarge) {\n      @include font-size(34px, 40px);\n      letter-spacing: -0.68px;\n    }\n  }\n\n  // without Sidebar\n  .hy-heading__container__large & {\n    @include breakpoint($extrawide) {\n      @include font-size(34px, 40px);\n      letter-spacing: -0.68px;\n    }\n  }\n}\n\n// default h3 used in content pages\nh3 {\n  @include font-size(22px, 28px);\n  letter-spacing: -0.7px;\n\n  @include breakpoint($narrow) {\n    // > 480px\n    @include font-size(26px, 32px);\n    letter-spacing: -0.8px;\n  }\n}\n\nh4 {\n  @include font-size(18px, 24px);\n  letter-spacing: -0.56px;\n\n  @include breakpoint($narrow) {\n    // > 480px\n    @include font-size(22px, 28px);\n    letter-spacing: -0.69px;\n  }\n}\n\nh5 {\n  @include font-size(16px, 20px);\n  letter-spacing: -0.5px;\n\n  @include breakpoint($narrow) {\n    // > 480px\n    @include font-size(18px, 24px);\n    letter-spacing: -0.56px;\n  }\n}\n\nh6 {\n  @include font-size(14px, 16px);\n  letter-spacing: -0.44px;\n\n  @include breakpoint($narrow) {\n    // > 480px\n    @include font-size(16px, 20px);\n    letter-spacing: -0.5px;\n  }\n}\n","@import \"./heading.scss\";\n//overrides for full width views\n// JUST A DEMO, FIX AND EXPAND!\nh1 {\n  font-size: $font-size-xxxx-large;\n  font-weight: bold;\n  text-transform: uppercase;\n  line-height: 1.2;\n}\n","import {Component, Element, h, Host, Prop, State} from \"@stencil/core\";\nimport {HeadingSectionVariants, HeadingVarians} from \"../../utils/utils\";\n\n@Component({\n  tag: \"hy-heading\",\n  styleUrls: {default: \"heading.scss\", wide: \"heading-fw.scss\"},\n  scoped: false,\n  shadow: false,\n})\nexport class Heading {\n  /**\n   * @type {*}\n   */\n  @Prop() heading: HeadingVarians = HeadingVarians.default as any;\n  @Prop() isSearch: boolean = false;\n  /**\n   * @type {*}\n   */\n  @Prop() section: HeadingSectionVariants = HeadingSectionVariants.default as any;\n  @Prop() negative: boolean = false;\n  @Prop() headerstyle: string = \"common\";\n  @Prop({reflect: true}) hyphenatedText?: string;\n  @Element() el: HTMLElement;\n  @State() hasChildren: boolean = true;\n\n  componentDidLoad() {\n    let hyMainDiv = this.el.closest(\".hy-main\");\n    if (hyMainDiv) {\n      if (!hyMainDiv.classList.contains(\"with-sidebar\")) {\n        this.headerstyle = \"large\";\n      }\n    }\n    if (this.el.parentElement.classList.contains(\"hy-hero__title-container\")) {\n      this.hasChildren = false;\n    }\n  }\n\n  render() {\n    const headingInVariants = this.heading in HeadingVarians;\n    const classAttributes = [\n      \"hy-heading\",\n      this.negative ? \"negative\" : \"\",\n      this.isSearch ? \"hy-heading__search\" : \"\",\n      this.isSearch ? `hy-heading__search__${this.headerstyle}` : \"\",\n      `hy-heading__${this.section}`,\n      `hy-heading__${this.headerstyle}`,\n      `hy-heading__${this.section}__${this.headerstyle}`,\n    ];\n\n    const sectionClassAttributes = [`hy-heading__${this.section}--divider`].join(\" \");\n\n    const containerSectionClass = [\n      \"hy-heading__container\",\n      `hy-heading__container__${this.section}`,\n      `hy-heading__container__${this.headerstyle}`,\n    ].join(\" \");\n\n    return (\n      <Host>\n        {headingInVariants ? (\n          [\n            <div class={containerSectionClass}>\n              {this.hyphenatedText && !this.hasChildren ? (\n                <this.heading class={classAttributes.join(\" \")} innerHTML={this.hyphenatedText}></this.heading>\n              ) : (\n                <this.heading class={classAttributes.join(\" \")}>\n                  <slot />\n                </this.heading>\n              )}\n\n              <span class={sectionClassAttributes}></span>\n            </div>,\n          ]\n        ) : (\n          <div class={containerSectionClass}>\n            {this.hyphenatedText && !this.hasChildren ? (\n              <HeadingVarians.default class={classAttributes.join(\" \")}>\n                <span innerHTML={this.hyphenatedText}></span>\n              </HeadingVarians.default>\n            ) : (\n              <HeadingVarians.default class={classAttributes.join(\" \")}>\n                <span>\n                  <slot />\n                </span>\n              </HeadingVarians.default>\n            )}\n\n            <span class={sectionClassAttributes}></span>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n",":host {\n  display: block;\n}\n\np.hy-ingress {\n  @include font-size(16px, 24px);\n  color: var(--grayscale-black);\n  font-family: var(--main-font-family);\n  margin: 0 0 2rem;\n\n  @include breakpoint($narrow) {\n    @include font-size(18px, 28px);\n  }\n\n  @include breakpoint($wide) {\n    margin: 0 0 2.25rem;\n  }\n\n  @include breakpoint($xlarge) {\n    @include font-size(18px, 32px);\n    margin: 0 0 3rem;\n  }\n\n  // No sidebar, large desktop styles\n  &__large {\n    @include breakpoint($extrawide) {\n      @include font-size(18px, 32px);\n      margin: 0 0 3rem;\n    }\n  }\n}\n","import {Component, Element, h, Host, Prop} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-ingress\",\n  styleUrl: \"ingress.scss\",\n  shadow: false,\n})\nexport class Ingress {\n  @Element() el: HTMLElement;\n  @Prop() headerstyle: string = \"common\";\n\n  componentDidLoad() {\n    let hyMainDiv = this.el.closest(\".hy-main\");\n    if (hyMainDiv) {\n      if (!hyMainDiv.classList.contains(\"with-sidebar\")) {\n        this.headerstyle = \"large\";\n      }\n    }\n  }\n\n  render() {\n    const classAttributes = [\"hy-ingress\", `hy-ingress__${this.headerstyle}`].join(\" \");\n    return (\n      <Host>\n        <p class={classAttributes}>\n          <slot></slot>\n        </p>\n      </Host>\n    );\n  }\n}\n",":host {\n  display: block;\n}\n\n.with-sidebar {\n  .hy-main-content-wrapper {\n    // Layout Mobile 320-479px\n    margin: 0 auto;\n    max-width: 100%;\n    padding: 0 1rem;\n    position: relative;\n\n    // Layout Tablet 480-959px\n    // Side navigation disappears to hamburger when width < 1200.\n    @include breakpoint($narrow) {\n      // the rule is applied to screens >=480px: width 100% - side margins (32px)\n      padding: 0 2rem;\n    }\n\n    // Large desktop Layout >1600px\n    @include breakpoint($xlarge) {\n      max-width: 1216px;\n      padding: 0;\n    }\n  }\n}\n\n.without-sidebar {\n  .hy-main-content-wrapper {\n    // Layout Mobile 320-479px\n    margin: 0 auto;\n    max-width: 100%;\n    padding: 0 1rem;\n    position: relative;\n\n    // Layout Tablet 480-959px\n    @include breakpoint($narrow) {\n      padding: 0 2rem;\n    }\n\n    // Large desktop Layout >1200px\n    @include breakpoint($extrawide) {\n      max-width: 1216px;\n      padding: 0;\n    }\n  }\n}\n","import {Component, h, Host} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-main-content-wrapper\",\n  styleUrl: \"hy-main-content-wrapper.scss\",\n  shadow: false,\n})\nexport class HyMainContentWrapper {\n  render() {\n    const classAttributes = [\"hy-main-content-wrapper\"].join(\" \");\n\n    return (\n      <Host>\n        <div class={classAttributes}>\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n",".menu-language {\n  position: relative;\n  align-items: center;\n  display: flex;\n  height: 100%;\n}\n\n.menu-language__toggle {\n  @include font-size(16px, 16px);\n  @include font-weight($bold);\n  color: var(--grayscale-black);\n  align-items: center;\n  background-color: transparent;\n  border: 0;\n  display: inline-grid;\n  font-family: var(--main-font-family);\n  gap: 4px;\n  grid-template-columns: repeat(2, auto);\n  letter-spacing: -0.7px;\n  margin: 0;\n  padding: 14px 10px;\n  text-transform: uppercase;\n  height: 100%;\n\n  @include breakpoint($extrawide) {\n    @include font-size(12px, 24px);\n    @include font-weight($regular);\n    color: var(--brand-main-nearly-black);\n    letter-spacing: -0.5px;\n    grid-template-columns: repeat(3, auto);\n    padding: 0;\n  }\n\n  @include breakpoint($xlarge) {\n    @include font-size(14px, 24px);\n  }\n\n  &:hover {\n    color: var(--brand-main);\n    cursor: pointer;\n\n    svg {\n      fill: var(--brand-main);\n    }\n  }\n\n  &:focus {\n    outline: solid 2px var(--additional-yellow);\n    outline-offset: 2px;\n  }\n\n  hy-icon {\n    &:first-of-type {\n      display: none !important;\n\n      @include breakpoint($extrawide) {\n        display: inline-flex !important;\n      }\n    }\n  }\n\n  &[aria-expanded=\"true\"] {\n    position: relative;\n\n    &:after {\n      content: \"\";\n      position: absolute;\n      height: 4px;\n      right: 0;\n      bottom: -1px;\n      left: 0;\n      background-color: var(--grayscale-black);\n    }\n\n    span + hy-icon {\n      transform: rotate(180deg);\n    }\n  }\n\n  .is-group & {\n    color: var(--grayscale-white);\n\n    &:hover {\n      color: var(--grayscale-medium);\n      cursor: pointer;\n\n      svg {\n        fill: var(--grayscale-medium);\n      }\n    }\n  }\n}\n\n.menu-language__dropdown {\n  background-color: var(--grayscale-white);\n  border-radius: 0 0 5px 5px;\n  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  flex-flow: column;\n  justify-items: center;\n  right: -15px;\n  margin: 0;\n  padding: 8px;\n  position: absolute;\n  text-transform: uppercase;\n  visibility: visible;\n  width: max-content;\n  z-index: 100;\n  min-width: 160px;\n\n  &[aria-hidden=\"true\"] {\n    display: none;\n  }\n\n  @include breakpoint($extrawide) {\n    left: -15px;\n    right: 0;\n  }\n}\n\n.menu-language__links {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: grid;\n  gap: 4px;\n}\n","import {ComponentLabels} from \"../../hy-site-header/site-header\";\n\nexport interface MenuLanguage {\n  langCode: string;\n  url: string;\n  abbr: string;\n  label: string;\n  isActive?: boolean;\n  isDisabled?: boolean;\n}\n\nimport {Component, h, Prop, Element, Listen, State, Event, EventEmitter} from \"@stencil/core\";\nimport {jsonParserWorker} from \"../../../global/globalScript\";\n\n@Component({\n  tag: \"hy-menu-language\",\n  styleUrl: \"menu-language.scss\",\n  shadow: true,\n})\nexport class MenuLanguage {\n  @Element() el: HTMLElement;\n  @Prop() dataMenuLanguage: MenuLanguage[] | string;\n  @Prop() isGroup: boolean = false;\n  @Prop() labels?: ComponentLabels[] | string;\n  @State() isMenuOpen: boolean = false;\n\n  @Event() menuLanguageToggled: EventEmitter;\n\n  private _dataMenuLanguage: MenuLanguage[];\n  private _labels: ComponentLabels[];\n\n  // Close the language menu if user clicks anywhere outside the Menu language component.\n  @Listen(\"click\", {target: \"window\"})\n  handleOutsideMenuClick(event) {\n    this.isMenuOpen = false;\n    event.stopPropagation();\n  }\n\n  // CLose the language menu if user opens the desktop menu panel.\n  @Listen(\"menuDesktopToggled\", {target: \"document\"})\n  desktopMenuToggled() {\n    this.isMenuOpen = false;\n  }\n\n  // CLose the language menu if user opens the search panel\n  @Listen(\"searchPanelToggled\", {target: \"document\"})\n  searchPanelToggled() {\n    this.isMenuOpen = false;\n  }\n\n  // Close the language menu if user opens University main menu\n  @Listen(\"universityMainMenuToggled\", {target: \"document\"})\n  universityMainMenuPanelToggled() {\n    this.isMenuOpen = false;\n  }\n\n  @Listen(\"focus\")\n  handleComponentFocus(event) {\n    // Close desktop menu panel if it's open.\n    this.menuLanguageToggled.emit();\n\n    event.stopPropagation();\n  }\n\n  @Listen(\"click\")\n  handleComponentClick(event) {\n    this.isMenuOpen = !this.isMenuOpen;\n\n    if (this.isMenuOpen) {\n      // Close desktop menu panel if it's open.\n      this.menuLanguageToggled.emit();\n\n      const languageMenuSelector = event.target as HTMLElement;\n      this.adjustPosition(languageMenuSelector, this.el);\n    }\n\n    event.stopPropagation();\n  }\n\n  adjustPosition(languageMenuSelector, target) {\n    const languagePanel = languageMenuSelector.shadowRoot.querySelectorAll(\n      `.menu-language__dropdown`\n    )[0] as HTMLElement;\n    let headerHeight = \"0\";\n    let hyHeader = this.isGroup\n      ? (target.closest(\".hy-site-header__content-top\") as HTMLElement)\n      : (target.closest(\".hy-site-header\") as HTMLElement);\n\n    if (hyHeader) {\n      let rectHeader = hyHeader.getBoundingClientRect();\n      let rectLangMenu = languageMenuSelector.getBoundingClientRect();\n\n      headerHeight = `${languageMenuSelector.offsetHeight + rectHeader.bottom + 8 - rectLangMenu.bottom}px`;\n    }\n\n    languagePanel.style.top = headerHeight;\n  }\n\n  async componentWillLoad() {\n    this._dataMenuLanguage = await jsonParserWorker(this.dataMenuLanguage);\n    this._labels = await jsonParserWorker(this.labels);\n  }\n\n  render() {\n    const black = \"var(--brand-main-nearly-black)\";\n    const white = \"var(--grayscale-white)\";\n    const svgColor = this.isGroup ? white : black;\n    const globeIconSize = this.isGroup ? 16 : 14;\n\n    return (\n      <div\n        class={{\n          \"menu-language\": true,\n          \"is-open\": this.isMenuOpen,\n          \"is-group\": this.isGroup,\n        }}\n      >\n        <button\n          class={{\n            \"menu-language__toggle\": true,\n          }}\n          aria-label={this.isMenuOpen ? this._labels[\"close\"] : this._labels[\"open\"]}\n        >\n          <hy-icon icon={\"hy-icon-globe\"} size={globeIconSize} fill={svgColor} />\n          <span>\n            {this._dataMenuLanguage.map(({isActive, langCode}) => {\n              if (isActive) {\n                return langCode;\n              }\n            })}\n          </span>\n          <hy-icon icon={\"hy-icon-caret-down\"} size={8} fill={svgColor} />\n        </button>\n        <div\n          class={{\n            \"menu-language__dropdown\": true,\n          }}\n          aria-hidden={`${!this.isMenuOpen}`}\n        >\n          <ul class=\"menu-language__links\">\n            {this._dataMenuLanguage.map((item) => {\n              return (\n                <hy-menu-language-item\n                  lang-code={item.langCode}\n                  url={item.url}\n                  label={item.label}\n                  abbr={item.abbr}\n                  is-active={item.isActive}\n                  is-disabled={item.isDisabled}\n                />\n              );\n            })}\n          </ul>\n        </div>\n      </div>\n    );\n  }\n}\n",".menu-language__link {\n  @include font-size(16px, 24px);\n  @include font-weight($semibold);\n  color: var(--brand-main-light);\n  font-family: var(--main-font-family);\n  letter-spacing: -0.5px;\n  overflow: hidden;\n  text-decoration: none;\n  padding: 12px 12px;\n  display: block;\n\n  &:hover {\n    background-color: var(--grayscale-background-box);\n    color: var(--brand-main);\n  }\n\n  &.is-active {\n    color: var(--grayscale-black);\n    border: 2px solid var(--grayscale-black);\n  }\n\n  &.is-disabled {\n    color: var(--link-disabled);\n\n    &:hover {\n      background-color: transparent;\n      color: var(--link-disabled);\n    }\n  }\n}\n","import {Component, h, Prop} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-menu-language-item\",\n  styleUrl: \"menu-language-item.scss\",\n  shadow: true,\n})\nexport class SiteLanguage {\n  @Prop() abbr: string;\n  @Prop() isActive: boolean = false;\n  @Prop() isDisabled: boolean = false;\n  @Prop() label: string;\n  @Prop() langCode: string;\n  @Prop() url: string;\n\n  render() {\n    return (\n      <li class={`menu-language__links-item`}>\n        <a\n          href={this.url}\n          lang={this.langCode}\n          class={{\n            \"is-active\": this.isActive,\n            \"is-disabled\": this.isDisabled,\n            \"menu-language__link\": true,\n          }}\n        >\n          {this.label}\n        </a>\n      </li>\n    );\n  }\n}\n",":host {\n  display: block;\n}\n\n.search-field {\n  display: inline-block;\n  width: 100%;\n\n  @include breakpoint($narrow) {\n    min-width: 48.3%;\n  }\n\n  @include breakpoint($extrawide) {\n    min-width: 23.03%;\n  }\n}\n\n.search-field__label {\n  @include font-size(14px, 20px);\n  display: block;\n  font-family: var(--main-font-family);\n  letter-spacing: -0.44px;\n  margin-bottom: 8px;\n  position: relative;\n  text-decoration: none;\n  width: 100%;\n\n  @include breakpoint($narrow) {\n    @include font-size(16px, 20px);\n  }\n\n  &.label-large {\n    @include font-size(22px, 28px);\n    letter-spacing: -0.7px;\n    margin-bottom: 0.75rem;\n\n    @include breakpoint($narrow) {\n      @include font-size(26px, 32px);\n      letter-spacing: -0.8px;\n      margin-bottom: 1.25rem;\n    }\n  }\n\n  &.bold {\n    @include font-weight($bold);\n  }\n}\n\n.search-field__actions {\n  align-items: stretch;\n  display: flex;\n}\n\n.search-field__wrapper {\n  flex-grow: 1;\n  position: relative;\n}\n\n.search-field__input {\n  @include font-size(16px, 24px);\n  border-radius: 0;\n  border: 1px solid var(--grayscale-medium-dark);\n  caret-color: var(--brand-main-light);\n  font-weight: bold;\n  height: 40px;\n  letter-spacing: normal;\n  padding: 8px 12px;\n  width: 100%;\n  zoom: 0;\n\n  @include breakpoint($narrow) {\n    @include font-size(16px, 24px);\n    height: 44px;\n  }\n\n  @include breakpoint($extrawide) {\n    height: 48px;\n  }\n\n  &::placeholder {\n    @include font-size(16px, 24px);\n    color: var(--grayscale-dark);\n    font-weight: normal;\n\n    @include breakpoint($narrow) {\n      @include font-size(16px, 24px);\n    }\n  }\n\n  &:hover {\n    border-color: var(--brand-main-light);\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  }\n}\n\n.search-field__reset {\n  align-items: center;\n  background-color: transparent;\n  border: 0;\n  display: inline-flex;\n  height: 40px;\n  justify-content: center;\n  position: absolute;\n  right: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 40px;\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(--grayscale-dark);\n\n    @include breakpoint($extrawide) {\n      height: 16px;\n      width: 16px;\n    }\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:focus {\n    outline-color: var(--brand-main-light);\n  }\n}\n\n.search-field__submit {\n  align-items: center;\n  background-color: var(--brand-main-light);\n  border: 0;\n  display: inline-flex;\n  flex-shrink: 0;\n  height: 40px;\n  justify-content: center;\n  width: 40px;\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    @include breakpoint($narrow) {\n      height: 20px;\n      width: 20px;\n    }\n\n    @include breakpoint($extrawide) {\n      height: 22px;\n      width: 22px;\n    }\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  s &:focus {\n    outline-color: var(--brand-main-light);\n  }\n}\n","import {Component, Prop, h, State, Element, Host} from \"@stencil/core\";\nimport {ColorVariant} from \"../../utils/utils\";\n\n@Component({\n  tag: \"hy-search-field\",\n  styleUrl: \"hy-search-field.scss\",\n  shadow: false,\n})\nexport class HySearchField {\n  @Element() el: HTMLElement;\n  @Prop() label: string;\n  @Prop() isLabelBold: boolean = false;\n  @Prop() labelLarge: boolean = false;\n  @Prop() isLuomusSearch: boolean = false;\n  @Prop() placeholder: string = \"Type here...\";\n  @Prop() isLabelHidden?: boolean = false;\n  @Prop() inputId: string;\n  @Prop() prefillParameter: string = \"\";\n  @State() isInputValueEmpty: boolean = true;\n\n  componentDidLoad() {\n    const searchInput = this.el.querySelector(\".search-field__input\");\n\n    searchInput.addEventListener(\"keyup\", (event) => {\n      const {value} = event.target as HTMLInputElement;\n\n      this.isInputValueEmpty = value.length > 0 ? false : true;\n    });\n\n    if (this.prefillParameter.length > 0) {\n      if (window.location === undefined) return;\n\n      const urlParams = new URLSearchParams(window.location.search);\n      const searchValue = urlParams.get(`${this.prefillParameter}`);\n      const searchInput = this.el.querySelector(\".search-field__input\") as HTMLInputElement;\n      searchInput.value = searchValue && searchValue.length > 0 ? searchValue : \"\";\n      this.isInputValueEmpty = false;\n    }\n  }\n\n  handleInputReset() {\n    this.isInputValueEmpty = true;\n    const searchInput = this.el.querySelector(\".search-field__input\") as HTMLInputElement;\n    searchInput.value = \"\";\n    searchInput.focus();\n  }\n\n  render() {\n    return (\n      <Host class=\"search-field\">\n        {!this.isLuomusSearch && (\n          <label\n            htmlFor={this.inputId}\n            class={`search-field__label \n          ${this.isLabelHidden ? \"visually-hidden\" : \"\"} \n          ${this.labelLarge ? \"label-large\" : \"\"} \n          ${this.isLabelBold ? \"bold\" : \"\"}`}\n          >\n            {this.label}\n          </label>\n        )}\n        <div class=\"search-field__actions\">\n          <div class=\"search-field__wrapper\">\n            {this.isLuomusSearch && (\n              <input\n                id={this.inputId}\n                name=\"search\"\n                data-drupal-selector=\"edit-search\"\n                value=\"\"\n                type=\"text\"\n                placeholder={this.placeholder}\n                class=\"search-field__input\"\n              />\n            )}\n            {!this.isLuomusSearch && (\n              <input id={this.inputId} type=\"text\" placeholder={this.placeholder} class=\"search-field__input\" />\n            )}\n            {!this.isInputValueEmpty && (\n              <button\n                type=\"button\"\n                class=\"search-field__reset\"\n                aria-label=\"Reset\"\n                onClick={() => this.handleInputReset()}\n              >\n                <hy-icon icon={\"hy-icon-remove\"} size={14} aria-hidden=\"true\" />\n              </button>\n            )}\n          </div>\n          {this.isLuomusSearch && (\n            <button\n              type=\"submit\"\n              class=\"search-field__submit\"\n              aria-label=\"Search\"\n              data-drupal-selector=\"edit-submit-luomus-search\"\n              id=\"edit-submit-luomus-search\"\n              value=\"Apply\"\n            >\n              <hy-icon icon={\"hy-icon-search\"} size={18} fill={ColorVariant.white} aria-hidden=\"true\" />\n            </button>\n          )}\n          {!this.isLuomusSearch && (\n            <button type=\"submit\" class=\"search-field__submit\" aria-label=\"Search\">\n              <hy-icon icon={\"hy-icon-search\"} size={18} fill={ColorVariant.white} aria-hidden=\"true\" />\n            </button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  display: block;\n}\n\n.hy-site-header {\n  background-color: var(--grayscale-white);\n  z-index: 100;\n  border-bottom: 2px solid var(--grayscale-dark);\n  transform: none;\n\n  &:not(.is-at-top) {\n    top: 0;\n    transform: translateY(-100%);\n    transition: all 0.2s ease-in-out;\n  }\n\n  @include breakpoint($extrawide) {\n    border-bottom: 1px solid var(--grayscale-black);\n    margin: 0 auto;\n    max-width: $fullhd;\n  }\n\n  &.hy-site-header--sticky-active {\n    transition: all 0.2s ease-in-out;\n    box-shadow: rgba(14, 104, 139, 0.2) 0 20px 20px -20px;\n  }\n\n  &.hy-site-header--sticky-visible {\n    left: 0;\n    position: fixed;\n    right: 0;\n    top: 0;\n    transform: translateY(0);\n    transition: all 0.2s ease-in-out;\n    transition-delay: 0.2s;\n\n    &.hy-site-header--mobile {\n      transform: none;\n    }\n\n    &.has-toolbar {\n      top: 39px;\n\n      &--large {\n        top: 79px;\n      }\n    }\n  }\n\n  &.hy-site-header--sticky-hidden {\n    top: 0;\n  }\n\n  &.is-group {\n    hy-desktop-menu-links,\n    .hy-site-header__menu-desktop {\n      @include breakpoint($extrawide) {\n        margin-left: -10px;\n      }\n    }\n  }\n}\n\n.hy-site-header__container {\n  padding: 0 8px;\n  display: flex;\n  justify-content: space-between;\n\n  @include breakpoint($extrawide) {\n    padding: 0 32px;\n  }\n\n  &.is-group {\n    flex-wrap: wrap;\n    justify-content: flex-start;\n\n    @include breakpoint($extrawide) {\n      min-height: 82px;\n    }\n  }\n}\n\n.hy-site-header__branding {\n  padding: 12px 0;\n\n  @include breakpoint($extrawide) {\n    padding: 26px 0;\n  }\n\n  .hy-site-header__content-top & {\n    padding: 8px 0;\n\n    @include breakpoint($extrawide) {\n      padding: 8px 0;\n    }\n  }\n\n  // Research group label\n  > p {\n    @include font-size(12px, 14px);\n    @include font-weight($regular);\n    font-family: var(--main-font-family);\n    color: var(--grayscale-dark-text);\n    letter-spacing: -0.1px;\n    margin-bottom: 4px;\n    text-transform: uppercase;\n\n    + a {\n      min-height: auto;\n    }\n\n    @include breakpoint($extrawide) {\n      margin-bottom: 8px;\n    }\n  }\n\n  // Group name link\n  > a {\n    @include font-size(16px, 16px);\n    @include font-weight($bold);\n    font-family: var(--main-font-family);\n    color: var(--brand-main-nearly-black);\n    letter-spacing: -0.6px;\n    text-transform: uppercase;\n    text-decoration: none;\n    min-height: 48px;\n    display: inline-flex;\n    align-items: center;\n\n    @include breakpoint($extrawide) {\n      @include font-size(26px, 30px);\n      letter-spacing: -0.8px;\n      min-height: auto;\n    }\n\n    img {\n      height: 100%;\n      max-height: 48px;\n\n      @include breakpoint($extrawide) {\n        transform: translateY(-10px);\n      }\n    }\n  }\n\n  // Main container\n  .is-group:not(.is-research-group) > & {\n    @include breakpoint($extrawide) {\n      margin-right: 32px + 10px;\n      padding-bottom: 0;\n      margin-bottom: -10px;\n    }\n  }\n}\n\n.hy-site-header__actions {\n  display: inline-grid;\n  gap: 4px;\n  grid-template-columns: repeat(3, auto);\n  justify-content: flex-end;\n  min-width: 150px;\n\n  @include breakpoint($wide) {\n    min-width: none;\n  }\n\n  @include breakpoint($xlarge) {\n    gap: 16px;\n  }\n}\n\n.hy-site-header__menu-open-button {\n  align-items: center;\n  display: inline-flex;\n  height: 100%;\n  justify-content: center;\n  width: 44px;\n  background-color: transparent;\n  border: 0;\n  padding: 0;\n  margin: 0;\n\n  &[aria-expanded=\"true\"] {\n    @include font-size(16px, 18px);\n    @include font-weight($bold);\n    align-items: center;\n    background-color: transparent;\n    border: none;\n    color: var(--brand-main);\n    display: inline-flex;\n    font-family: var(--main-font-family);\n    height: auto;\n    letter-spacing: -0.3px;\n    margin-left: auto;\n    margin-right: -16px;\n    padding: 16px;\n    position: fixed;\n    right: 16px;\n    top: 12px;\n    z-index: 101;\n    width: auto;\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    hy-icon {\n      margin-left: 8px;\n\n      svg {\n        fill: var(--brand-main);\n      }\n    }\n  }\n}\n\n.hy-site-header__donate-link {\n  @include font-size(12px, 24px);\n  @include font-weight($regular);\n  display: inline-grid;\n  font-family: var(--main-font-family);\n  align-items: center;\n  gap: 4px;\n  grid-template-columns: repeat(2, auto);\n  color: var(--brand-main-nearly-black);\n  letter-spacing: -0.5px;\n  padding: 0;\n  text-decoration: none;\n\n  @include breakpoint($xlarge) {\n    @include font-size(14px, 24px);\n  }\n\n  &:hover {\n    color: var(--brand-main);\n    cursor: pointer;\n\n    svg {\n      fill: var(--brand-main);\n    }\n  }\n\n  &:focus {\n    outline: solid 2px var(--additional-yellow);\n    outline-offset: 2px;\n  }\n\n  .hy-site-header__content-top & {\n    color: var(--grayscale-white);\n\n    svg {\n      fill: var(--grayscale-white);\n    }\n\n    &:hover {\n      color: var(--grayscale-medium);\n      cursor: pointer;\n\n      svg {\n        fill: var(--grayscale-medium);\n      }\n    }\n  }\n}\n\n.hy-site-header__content-top {\n  background-color: var(--grayscale-black);\n  border-bottom: 2px solid rgb(000, 000, 000, 0.7);\n  position: relative;\n}\n\n.hy-backdrop {\n  bottom: 0;\n  left: 0;\n  position: fixed;\n  right: 0;\n  top: 0;\n  visibility: hidden;\n\n  &.is-active {\n    background-color: rgba(0, 0, 0, 0.4);\n    transition: background-color 300ms;\n    visibility: visible;\n    z-index: 99;\n  }\n\n  &.is-active-top {\n    background-color: rgba(0, 0, 0, 0.4);\n    transition: background-color 300ms;\n    visibility: visible;\n    z-index: 98;\n  }\n}\n\n.hy-site-header__panel {\n  background: var(--grayscale-white);\n  bottom: 0;\n  overflow: hidden;\n  position: fixed;\n  right: 0;\n  top: 0;\n  visibility: visible;\n  width: 90%;\n  z-index: 100;\n\n  @include breakpoint($narrow) {\n    width: 400px;\n  }\n\n  &[aria-hidden=\"true\"] {\n    visibility: hidden;\n    padding: 0;\n    width: 0;\n  }\n}\n","export interface DesktopLinks {\n  label: string;\n  url: string;\n  menuLinkId: string;\n}\nexport interface DonateLink {\n  url: string;\n  label: string;\n}\nexport interface ComponentLabels {\n  open: string;\n  close: string;\n  expand?: string;\n  label?: string;\n}\n\nlet clickTimer = null;\n\nimport {Component, Element, Event, EventEmitter, Fragment, h, Listen, Prop, State} from \"@stencil/core\";\nimport ResizeObserver from \"resize-observer-polyfill\";\nimport {MenuType, ColorVariant, SiteLogoSize} from \"../../utils/utils\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\n\nlet clickTimeout = null;\n\n@Component({\n  tag: \"hy-site-header\",\n  styleUrl: \"site-header.scss\",\n  shadow: false,\n})\nexport class SiteHeader {\n  @Element() el: HTMLElement;\n  @Prop() isGroup: boolean = false;\n  @Prop() isLuomusGroup: boolean = false;\n  @Prop() isBetaGroup: boolean = false;\n  @Prop() researchGroupLabel: string = \"\";\n  @Prop() groupType: string = \"\";\n  @Prop() groupLogoUrl: string = \"\";\n  @Prop() dataMenuLanguage: string;\n  @Prop() dataMenuDonate: string;\n  @Prop() dataSiteHeaderLabels: string;\n  @Prop() dataSiteSearchLabels: string;\n  @Prop() logoUrl?: string;\n  @Prop() logoLabel?: string;\n  @Prop() siteLabel?: string;\n  @Prop() siteUrl?: string;\n  @Prop() showSearchLabel: boolean = true;\n  @Prop() noSearch: boolean = false;\n  @Prop() menuLabel: string = \"Menu\";\n  @Prop() menuLabelOpen?: string;\n  @Prop() menuLabelClose?: string;\n  @Prop({reflect: true}) menuType: MenuType = null;\n\n  @Prop() dataMainMenuLinks: DesktopLinks[] | string;\n  @Prop() dataSearchTools: DesktopLinks[] | string;\n\n  @State() isMobile: boolean;\n  @State() isMenuOpen: boolean = false;\n  @State() isDesktopMenuOpen: boolean = false;\n  @State() isDesktopMenuDropdown: boolean = false;\n  @State() isTopMenuOpen: boolean = false;\n  @State() isBottomVisible: boolean = false;\n  @State() isTopVisible: boolean = false;\n\n  @Event() headerScrollUp: EventEmitter;\n  @Event() headerScrollDown: EventEmitter;\n  @Event() menuMobileToggled: EventEmitter;\n  @Event() menuMobileTopToggled: EventEmitter;\n\n  private ro: ResizeObserver;\n  private bottomObserver: IntersectionObserver;\n  private topObserver: IntersectionObserver;\n  private donateLink: DonateLink[];\n  private menuLabels: ComponentLabels[];\n  private searchLabels: ComponentLabels[];\n  private groupPages: ComponentLabels[];\n  private languageLabels: ComponentLabels[];\n\n  @State() lastScrollTop = 0;\n  @State() delta = 50;\n  @State() navbarHeight = 0;\n\n  // Listener for toggling mobile menu panel on or off.\n  @Listen(\"mobileMenuToggle\") mobileMenuToggle() {\n    this.isMenuOpen = !this.isMenuOpen;\n    this.menuMobileToggled.emit();\n    let bodyElement = document.getElementsByTagName(\"body\")[0] as HTMLElement;\n\n    if (this.isMenuOpen) {\n      bodyElement.style.overflow = \"hidden\";\n    } else {\n      bodyElement.style.overflow = \"initial\";\n    }\n  }\n\n  // Listener for toggling mobile menu top panel on or off.\n  @Listen(\"mobileMenuTopToggle\") mobileMenuTopToggle() {\n    this.isTopMenuOpen = !this.isTopMenuOpen;\n    this.menuMobileTopToggled.emit();\n  }\n\n  @Listen(\"menuToggled\", {target: \"window\"}) mainMenuToggled() {\n    this.isDesktopMenuOpen = !this.isDesktopMenuOpen;\n  }\n\n  @Listen(\"scroll\", {target: \"window\"})\n  handleScroll() {\n    this.headerScrollHandler();\n  }\n\n  headerScrollHandler() {\n    let topOffset = window.pageYOffset;\n    if (Math.abs(this.lastScrollTop - topOffset) <= this.delta) {\n      return;\n    }\n\n    if (topOffset > this.lastScrollTop && !this.isTopVisible) {\n      this.toggleStickyness(false);\n      this.headerScrollDown.emit();\n    }\n    // Scrolling up\n    if (topOffset < this.lastScrollTop && !this.isTopVisible) {\n      this.toggleStickyness();\n      this.headerScrollUp.emit();\n    }\n    // At the top of the page\n    if (this.isTopVisible) {\n      this.toggleStickyness(false);\n    }\n\n    this.lastScrollTop = topOffset;\n  }\n\n  toggleStickyness(toggleOn = true) {\n    const bodyElementClasses = document.querySelector(\"body\").classList;\n    let hySiteHeader = this.el.querySelector(\".hy-site-header\") as HTMLElement;\n    if (!hySiteHeader) return;\n\n    this.isTopVisible ? hySiteHeader.classList.add(\"is-at-top\") : hySiteHeader.classList.remove(\"is-at-top\");\n\n    if (toggleOn) {\n      hySiteHeader.classList.add(\"hy-site-header--sticky-active\", \"hy-site-header--sticky-visible\");\n      hySiteHeader.classList.remove(\"hy-site-header--sticky-hidden\");\n\n      !this.isBottomVisible && !this.isTopVisible && bodyElementClasses.add(\"sticky-active\");\n\n      if (bodyElementClasses.contains(\"toolbar-horizontal\")) {\n        hySiteHeader.classList.add(\"has-toolbar\");\n\n        if (bodyElementClasses.contains(\"toolbar-tray-open\")) {\n          hySiteHeader.classList.add(\"has-toolbar--large\");\n        }\n      }\n    }\n\n    if (!toggleOn) {\n      hySiteHeader.classList.remove(\n        \"hy-site-header--sticky-active\",\n        \"hy-site-header--sticky-visible\",\n        \"hy-site-header--sticky-hidden\",\n        \"has-toolbar\",\n        \"has-toolbar--large\"\n      );\n      bodyElementClasses.remove(\"sticky-active\");\n    }\n  }\n\n  componentDidLoad() {\n    // Set the browser resize observer to gather information about browser width.\n    this.ro = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        this.applySizeClasses(entry.contentRect.width);\n      }\n    });\n    this.ro.observe(document.body);\n\n    const topOptions = {\n      root: null,\n      rootMargin: \"250px\",\n      threshold: [0.0, 1.0],\n    };\n\n    this.topObserver = new IntersectionObserver((entries) => {\n      entries.forEach((entry) => {\n        if (entry.target.nodeName === \"HEADER\") {\n          this.isTopVisible = entry.isIntersecting;\n        }\n      });\n    }, topOptions);\n\n    const header = document.querySelector(\"header\");\n    if (header) {\n      this.topObserver.observe(header);\n    }\n\n    const bottomOptions = {\n      root: null,\n      rootMargin: \"0px\",\n      threshold: [0.0, 1.0],\n    };\n\n    this.bottomObserver = new IntersectionObserver((entries) => {\n      entries.forEach((entry) => {\n        if (entry.target.nodeName === \"HEADER\") {\n          this.isTopVisible = entry.isIntersecting;\n        }\n      });\n    }, bottomOptions);\n\n    const footer = document.querySelector(\"hy-footer\");\n    if (footer) {\n      this.bottomObserver.observe(footer);\n    }\n\n    // Pass the dataMenuLanguage prop to menu component.\n    this.el.children[0].setAttribute(\"data-menu-language\", this.dataMenuLanguage);\n    this.navbarHeight = 120;\n    const body = document.querySelector(\"body\");\n    body.style.setProperty(\"--nav-height\", `${this.navbarHeight * 2}px`);\n  }\n\n  async componentWillLoad() {\n    // Check for site header labels and set them to variables accordingly.\n    if (this.dataSiteHeaderLabels) {\n      const labels = await jsonParserWorker(this.dataSiteHeaderLabels);\n      this.menuLabels = labels.menu_labels;\n      this.languageLabels = labels.language_labels;\n      this.searchLabels = labels.search_labels;\n      this.groupPages = labels.group_pages;\n\n      this.el.children[0].setAttribute(\"menu-button-breadcrumb-logourl\", this.logoUrl);\n    }\n\n    // Check for the donation link information and set it to variables accordingly.\n    // Also pass the donation link data to menu-component.\n    if (this.dataMenuDonate) {\n      this.donateLink = await jsonParserWorker(this.dataMenuDonate);\n      this.el.children[0].setAttribute(\"data-menu-donate\", this.dataMenuDonate);\n    }\n    // Pass the necessary information to menu component. These props will be\n    // used in mobile menu.\n    this.el.children[0].setAttribute(\"open\", this.isMenuOpen.toString());\n    this.el.children[0].setAttribute(\"logo-label\", this.logoLabel);\n    this.el.children[0].setAttribute(\"logo-url\", this.logoUrl);\n    this.el.children[0].setAttribute(\"site-label\", this.siteLabel);\n    this.el.children[0].setAttribute(\"site-url\", this.siteUrl);\n    this.el.children[0].setAttribute(\"menu-button-breadcrumb-logourl\", this.logoUrl);\n    this.el.children[0].setAttribute(\"menu-language-label-open\", this.languageLabels[\"open\"]);\n    this.el.children[0].setAttribute(\"menu-language-label-close\", this.languageLabels[\"close\"]);\n    this.el.children[0].setAttribute(\"label-front-page\", this.menuLabels[\"front_page\"]);\n\n    if (this.groupType !== \"\") {\n      this.isDesktopMenuDropdown = true;\n    }\n  }\n\n  disconnectedCallback() {\n    clearTimeout(clickTimer);\n    this.ro.disconnect();\n    this.topObserver.disconnect();\n    this.bottomObserver.disconnect();\n    clearTimeout(clickTimeout);\n  }\n\n  applySizeClasses(size: number) {\n    // Set the menu-type based on the width of the browser.\n    size <= 1200 ? (this.menuType = MenuType.mobile) : (this.menuType = MenuType.desktop);\n\n    // Pass the menu type to menu component.\n    this.isMobile = this.menuType === (MenuType.mobile || MenuType.tablet);\n    const menuAttribute = this.menuType;\n    this.el.children[0].setAttribute(\"menu-type\", menuAttribute);\n  }\n\n  render() {\n    if (this.menuType === null) return;\n\n    const logoSize = this.isMobile ? SiteLogoSize.small : SiteLogoSize.big;\n    const logoSizeGroup = this.isMobile ? SiteLogoSize.small : SiteLogoSize.small;\n    const logoColor = ColorVariant.black;\n    const logoColorGroup = ColorVariant.white;\n\n    let classAttributes = [\n      \"hy-site-header\",\n      `hy-site-header--${this.menuType}`,\n      this.isGroup ? \"is-group\" : \"\",\n      \"is-at-top\",\n    ];\n\n    const toggleMenuMobileAndRemoveListener = () => {\n      window.removeEventListener(\"click\", handleClickOutside);\n      this.mobileMenuToggle();\n    };\n\n    const handleClickOutside = (event: MouseEvent) => {\n      const [targetElement] = event.composedPath() as HTMLElement[];\n      if (targetElement.classList.contains(\"hy-backdrop\")) {\n        toggleMenuMobileAndRemoveListener();\n      }\n    };\n\n    if (this.isMenuOpen) {\n      window.addEventListener(\"click\", () => {\n        clearTimeout(clickTimeout);\n        clickTimeout = setTimeout(() => {\n          handleClickOutside;\n        }, 250);\n      });\n    }\n\n    let activeLang = \"en\";\n    let dataMenuLanguageArray = JSON.parse(this.dataMenuLanguage);\n    dataMenuLanguageArray.forEach((lang) => {\n      if (lang.isActive) {\n        activeLang = lang.langCode;\n      }\n    });\n\n    switch (this.menuType) {\n      case MenuType.desktop:\n        // Larger than 1200px screens\n        return [\n          <header class={`${classAttributes.join(\" \")}`}>\n            <div\n              class={{\n                \"hy-backdrop\": true,\n                \"is-active\":\n                  (this.isMenuOpen && !this.isDesktopMenuDropdown) ||\n                  (this.isTopMenuOpen && !this.isDesktopMenuDropdown),\n              }}\n            />\n            {this.isGroup && (\n              <section class={`hy-site-header__content-top ${this.isTopMenuOpen ? \"is-open\" : \"\"}`}>\n                <div class=\"hy-site-header__container\">\n                  <div class=\"hy-site-header__branding\">\n                    <hy-site-logo\n                      is-group={true}\n                      is-luomus-group={this.isLuomusGroup}\n                      size={logoSizeGroup}\n                      color={logoColorGroup}\n                      url={this.siteUrl}\n                      label={this.siteLabel}\n                    />\n                  </div>\n                  {this.dataMainMenuLinks.length > 2 && (\n                    <hy-menu-main-group\n                      tabindex=\"0\"\n                      is-mobile={false}\n                      menu-label={this.groupPages[\"university_main_menu\"] ?? null}\n                      data-main-menu={this.dataMainMenuLinks}\n                      menu-label-close={this.menuLabelClose}\n                    />\n                  )}\n                  <div class=\"hy-site-header__actions\">\n                    <hy-menu-language data-menu-language={this.dataMenuLanguage} labels={this.languageLabels} isGroup />\n                    {!this.noSearch && (\n                      <hy-site-search\n                        class={\"menu--secondary__item group\"}\n                        size={18}\n                        color={logoColorGroup}\n                        is-group={true}\n                        is-luomus-group={this.isLuomusGroup}\n                        is-beta-group={this.isBetaGroup}\n                        search-language={activeLang}\n                        show-label={this.showSearchLabel}\n                        labels={this.searchLabels}\n                        search-labels={this.dataSiteSearchLabels}\n                        search-tools={this.dataSearchTools}\n                      />\n                    )}\n                    {this.donateLink.map(({label, url}) => {\n                      return (\n                        <a class={\"hy-site-header__donate-link\"} href={url}>\n                          <hy-icon icon={\"hy-icon-heart-support\"} size={14} fill={ColorVariant.black} />\n                          <span>{label}</span>\n                        </a>\n                      );\n                    })}\n                  </div>\n                </div>\n              </section>\n            )}\n            <section\n              class={`hy-site-header__container ${this.isGroup ? \"is-group\" : \"\"} ${\n                this.groupType === \"research_group_menu\" ? \"is-research-group\" : \"\"\n              }`}\n            >\n              <div class={\"hy-site-header__branding\"}>\n                {this.isGroup && this.groupType == \"research_group_menu\" && <p>{this.researchGroupLabel}</p>}\n                {this.isGroup ? (\n                  <a href={this.logoUrl}>\n                    {this.groupType == \"generic_site_group_menu\" && this.groupLogoUrl ? (\n                      <img src={this.groupLogoUrl} alt={`${this.logoLabel} logo`} />\n                    ) : (\n                      this.logoLabel\n                    )}\n                  </a>\n                ) : (\n                  <hy-site-logo size={logoSize} color={logoColor} url={this.logoUrl} label={this.logoLabel} />\n                )}\n              </div>\n              {this.groupType != \"research_group_menu\" && <slot name=\"menu\"></slot>}\n              {!this.isGroup && (\n                <div class=\"hy-site-header__actions\">\n                  <hy-menu-language data-menu-language={this.dataMenuLanguage} labels={this.languageLabels} />\n                  {!this.noSearch && (\n                    <hy-site-search\n                      size={14}\n                      is-luomus-group={this.isLuomusGroup}\n                      is-beta-group={this.isBetaGroup}\n                      search-language={activeLang}\n                      color={ColorVariant.black}\n                      show-label={this.showSearchLabel}\n                      labels={this.searchLabels}\n                      search-labels={this.dataSiteSearchLabels}\n                      search-tools={this.dataSearchTools}\n                    />\n                  )}\n                  {this.donateLink.map(({label, url}) => {\n                    return (\n                      <a class={\"hy-site-header__donate-link\"} href={url}>\n                        <hy-icon icon={\"hy-icon-heart-support\"} size={14} fill={ColorVariant.black} />\n                        <span>{label}</span>\n                      </a>\n                    );\n                  })}\n                </div>\n              )}\n            </section>\n          </header>,\n        ];\n\n      case MenuType.mobile:\n        // Smaller than 960px screens\n        return (\n          <header class={classAttributes.join(\" \")} data-menu-active={this.isMenuOpen}>\n            <div class={{\"hy-backdrop\": true, \"is-active\": this.isMenuOpen}} />\n            <div class={{\"hy-backdrop\": true, \"is-active-top\": this.isTopMenuOpen}} />\n            {this.isGroup && (\n              <section class={`hy-site-header__content-top ${this.isTopMenuOpen ? \"is-open\" : \"\"}`}>\n                <div class=\"hy-site-header__container\">\n                  <div class=\"hy-site-header__branding\">\n                    <hy-site-logo\n                      is-group={true}\n                      is-luomus-group={this.isLuomusGroup}\n                      size={logoSizeGroup}\n                      color={logoColorGroup}\n                      url={this.siteUrl}\n                      label={this.siteLabel}\n                    />\n                  </div>\n                  <div class=\"hy-site-header__actions\">\n                    <hy-menu-language data-menu-language={this.dataMenuLanguage} labels={this.languageLabels} isGroup />\n                    {!this.noSearch && (\n                      <hy-site-search\n                        class={\"menu--secondary__item group\"}\n                        size={18}\n                        color={logoColorGroup}\n                        is-group={true}\n                        is-luomus-group={this.isLuomusGroup}\n                        is-beta-group={this.isBetaGroup}\n                        search-language={activeLang}\n                        show-label={this.showSearchLabel}\n                        labels={this.searchLabels}\n                        search-labels={this.dataSiteSearchLabels}\n                        search-tools={this.dataSearchTools}\n                      />\n                    )}\n                    {this.dataMainMenuLinks.length > 2 && (\n                      <hy-menu-main-group\n                        site-label={this.siteLabel}\n                        site-url={this.siteUrl}\n                        logo-label={this.logoLabel}\n                        logo-url={this.logoUrl}\n                        is-mobile={true}\n                        donate={this.donateLink}\n                        data-main-menu={this.dataMainMenuLinks}\n                      />\n                    )}\n                  </div>\n                </div>\n              </section>\n            )}\n            <section class=\"hy-site-header__container\">\n              <div class={\"hy-site-header__branding\"}>\n                {this.groupType == \"research_group_menu\" && <p>{this.researchGroupLabel}</p>}\n                {this.isGroup ? (\n                  <a href={this.logoUrl}>\n                    {this.groupType == \"generic_site_group_menu\" && this.groupLogoUrl ? (\n                      <img src={this.groupLogoUrl} alt={`${this.logoLabel} logo`} />\n                    ) : (\n                      this.logoLabel\n                    )}\n                  </a>\n                ) : (\n                  <hy-site-logo size={logoSize} color={logoColor} url={this.logoUrl} label={this.logoLabel} />\n                )}\n              </div>\n              <div class=\"hy-site-header__actions\">\n                {!this.isGroup && (\n                  <hy-menu-language data-menu-language={this.dataMenuLanguage} labels={this.languageLabels} />\n                )}\n                {!this.isGroup && !this.noSearch && (\n                  <hy-site-search\n                    size={24}\n                    color={ColorVariant.black}\n                    is-luomus-group={this.isLuomusGroup}\n                    is-beta-group={this.isBetaGroup}\n                    search-language={activeLang}\n                    show-label={this.showSearchLabel}\n                    labels={this.searchLabels}\n                    search-labels={this.dataSiteSearchLabels}\n                    search-tools={this.dataSearchTools}\n                  />\n                )}\n                <button\n                  onClick={() => toggleMenuMobileAndRemoveListener()}\n                  class={`hy-site-header__menu-open-button`}\n                  aria-label={this.isMenuOpen ? this.menuLabels[\"close\"] : this.menuLabels[\"open\"]}\n                  aria-expanded={`${this.isMenuOpen}`}\n                >\n                  {!this.isMenuOpen && <hy-icon icon={\"hy-icon-hamburger\"} size={24} fill={ColorVariant.black} />}\n                  {this.isMenuOpen && (\n                    <Fragment>\n                      <span>{this.menuLabelClose}</span>\n                      <hy-icon icon={\"hy-icon-remove\"} size={16} />\n                    </Fragment>\n                  )}\n                </button>\n              </div>\n              <div\n                class={{\n                  \"is-open\": this.isMenuOpen,\n                  \"hy-site-header__panel\": true,\n                }}\n                aria-hidden={`${!this.isMenuOpen}`}\n              >\n                <slot name={\"menu_mobile\"} />\n              </div>\n            </section>\n          </header>\n        );\n    }\n  }\n}\n",":host {\n  --site-logo-color: var(--brand-main-nearly-black);\n}\n\n:host(.hy-site-logo--mobile) {\n  --site-logo-color: var(--brand-main-nearly-black);\n}\n\n.hy-site-logo {\n  a,\n  div.luomus-group {\n    align-items: center;\n    display: flex;\n    text-decoration: none;\n\n    &:focus {\n      outline: solid 2px var(--additional-yellow);\n      outline-offset: 2px;\n    }\n  }\n\n  &__label {\n    @include font-size(14px, 14px);\n    @include font-weight($bold);\n    color: var(--site-logo-color);\n    font-family: var(--main-font-family);\n    letter-spacing: -0.7px;\n    margin-left: 8px;\n    max-width: 90px;\n    text-transform: uppercase;\n\n    .hy-site-header__branding & {\n      @include breakpoint($narrow) {\n        min-width: min-content;\n        max-width: max-content;\n        white-space: nowrap;\n      }\n\n      @include breakpoint($extrawide) {\n        min-width: min-content;\n        max-width: 90px;\n        white-space: initial;\n      }\n\n      @include breakpoint($xlarge) {\n        min-width: min-content;\n        max-width: max-content;\n        white-space: nowrap;\n      }\n    }\n\n    @include breakpoint($narrow) {\n      @include font-size(15px, 16px);\n      letter-spacing: -0.75px;\n      margin-left: 6px;\n    }\n\n    @include breakpoint($extrawide) {\n      @include font-size(14px, 14px);\n      letter-spacing: -0.6px;\n      margin-left: 4px;\n    }\n\n    @include breakpoint($xlarge) {\n      @include font-size(16px, 16px);\n      letter-spacing: -0.7px;\n      margin-left: 4px;\n    }\n\n    &.group {\n      @include font-size(12px, 14px);\n      color: var(--grayscale-white);\n      letter-spacing: -0.6px;\n      margin-left: 3px;\n\n      @include breakpoint($wide) {\n        @include font-size(14px, 14px);\n        letter-spacing: -0.7px;\n      }\n\n      @include breakpoint($xlarge) {\n        margin-left: 8px;\n      }\n    }\n  }\n\n  &__icon {\n    &.group {\n      svg {\n        height: 32px !important;\n        width: 33.41px;\n      }\n    }\n\n    &:not(.group) svg {\n      height: 32px;\n      width: 33.41px;\n\n      @include breakpoint($narrow) {\n        height: 48px;\n        width: 51px;\n      }\n\n      @include breakpoint($xlarge) {\n        height: 60px;\n        width: 64px;\n      }\n    }\n  }\n\n  &__header {\n    //&:hover {\n    &__page {\n      &:hover {\n        color: var(--brand-main);\n\n        a,\n        span {\n          color: var(--brand-main) !important;\n        }\n\n        svg {\n          fill: var(--brand-main);\n        }\n      }\n    }\n    &__group:not(.luomus) {\n      &:hover {\n        color: var(--grayscale-medium);\n\n        a,\n        span {\n          color: var(--grayscale-medium) !important;\n        }\n\n        svg {\n          fill: var(--grayscale-medium);\n        }\n      }\n    }\n  }\n\n  &__footer {\n    &:hover {\n      span {\n        color: var(--grayscale-medium) !important;\n      }\n      svg {\n        fill: var(--grayscale-medium) !important;\n      }\n    }\n  }\n}\n\n.hy-site-header__logo-container {\n  a.group {\n    @include font-size(14px, 16px);\n    @include font-weight($bold);\n\n    color: var(--grayscale-black);\n    font-family: var(--main-font-family);\n    letter-spacing: -0.5px;\n    text-decoration: none;\n    text-transform: uppercase;\n\n    @include breakpoint($narrow) {\n      @include font-size(24px, 28px);\n      letter-spacing: -0.8px;\n    }\n\n    @include breakpoint($xlarge) {\n      @include font-size(26px, 30px);\n    }\n  }\n}\n","import {Component, h, Host, Prop} from \"@stencil/core\";\nimport {ColorVariant, FooterVariant, SiteLogoSize} from \"../../../utils/utils\";\n\n@Component({\n  tag: \"hy-site-logo\",\n  styleUrl: \"site-logo.scss\",\n  shadow: false,\n})\nexport class SiteLogo {\n  @Prop() type: FooterVariant = FooterVariant.header;\n  @Prop() color: ColorVariant = ColorVariant.black;\n  @Prop() isGroup: boolean = false;\n  @Prop() isLuomusGroup: boolean = false;\n  @Prop() label?: string;\n  @Prop() size: SiteLogoSize = SiteLogoSize.big;\n  @Prop() url?: string;\n\n  render() {\n    const isGroupClass = this.isGroup ? \"group\" : \"page\";\n    // const isLuomusGroupClass = this.isLuomusGroup ? 'luomus' : 'regular';\n    const classAttributes = [\n      \"hy-site-logo\",\n      `hy-site-logo__${this.type}__${isGroupClass}`,\n      `hy-site-logo__${this.type}`,\n      \"luomus\",\n    ].join(\" \");\n\n    return this.url ? (\n      <Host class={classAttributes}>\n        {!this.isLuomusGroup && (\n          <a href={this.url}>\n            <hy-icon\n              class={{\"hy-site-logo__icon\": true, group: this.isGroup}}\n              icon={\"hy-icon-hy-logo\"}\n              size={this.size}\n              fill={this.color}\n            />\n            <span class={{\"hy-site-logo__label\": true, group: this.isGroup}} style={{color: this.color}}>\n              {this.label}\n            </span>\n          </a>\n        )}\n        {this.isLuomusGroup && (\n          <div class=\"luomus-group\">\n            <hy-icon\n              class={{\"hy-site-logo__icon\": true, group: this.isGroup}}\n              icon={\"hy-icon-hy-logo\"}\n              size={this.size}\n              fill={this.color}\n            />\n            <span class={{\"hy-site-logo__label\": true, group: this.isGroup}} style={{color: this.color}}>\n              {this.label}\n            </span>\n          </div>\n        )}\n      </Host>\n    ) : this.label ? (\n      <Host class={classAttributes}>\n        <hy-icon\n          class={{\"hy-site-logo__icon\": true, group: this.isGroup}}\n          icon={\"hy-icon-hy-logo\"}\n          size={this.size}\n          fill={this.color}\n        />\n        <span class={{\"hy-site-logo__label\": true, group: this.isGroup}} style={{color: this.color}}>\n          {this.label}\n        </span>\n      </Host>\n    ) : (\n      \"\"\n    );\n  }\n}\n",".button--search {\n  @include font-size(12px, 24px);\n  @include font-weight($regular);\n  align-items: center;\n  background: transparent;\n  border: 0 none;\n  color: var(--brand-main-nearly-black);\n  display: inline-flex;\n  flex-direction: row;\n  font-family: var(--main-font-family);\n  height: 100%;\n  justify-content: center;\n  letter-spacing: -0.5px;\n  width: 44px;\n\n  @include breakpoint($extrawide) {\n    display: inline-grid;\n    grid-template-columns: repeat(2, auto);\n    gap: 4px;\n    width: auto;\n  }\n\n  @include breakpoint($xlarge) {\n    @include font-size(14px, 24px);\n  }\n\n  &:hover:not([disabled]) {\n    color: var(--brand-main);\n    cursor: pointer;\n\n    svg {\n      fill: var(--brand-main);\n    }\n  }\n\n  &:focus:not([disabled]) {\n    outline: solid 2px var(--additional-yellow);\n    outline-offset: 2px;\n  }\n\n  &.is-active,\n  &[aria-expanded=\"true\"] {\n    position: relative;\n\n    &:after {\n      content: \"\";\n      position: absolute;\n      height: 4px;\n      right: 0;\n      bottom: -1px;\n      left: 0;\n      background-color: var(--grayscale-black);\n    }\n  }\n\n  .is-group & {\n    color: var(--grayscale-white);\n\n    &:hover:not([disabled]) {\n      color: var(--grayscale-medium);\n      cursor: pointer;\n\n      svg {\n        fill: var(--grayscale-medium);\n      }\n    }\n  }\n\n  &.is-open--menu {\n    position: absolute;\n    right: 50px;\n    top: 15px;\n    z-index: 101;\n  }\n}\n\n.button--search__label {\n  display: none;\n  visibility: hidden;\n\n  @include breakpoint($extrawide) {\n    display: block;\n    visibility: visible;\n    order: 2;\n  }\n}\n\n.site-search {\n  height: 100%;\n\n  &__panel {\n    display: none;\n    &__is-open {\n      background-color: #f8f8f8;\n      border: 1px solid rgba(0, 0, 0, 0.1);\n      display: flex;\n      flex-direction: column;\n      font-family: var(--main-font-family);\n      left: 0;\n      position: absolute;\n      width: 100%;\n      z-index: 520;\n    }\n\n    &__title {\n      &__group {\n        align-items: baseline;\n        display: flex;\n        flex-direction: column;\n\n        @include breakpoint($wide) {\n          align-items: baseline;\n          flex-direction: row;\n          justify-content: flex-start;\n        }\n      }\n\n      .panel-title {\n        @include font-size(32px, 32px);\n        @include font-weight($bold);\n        color: var(--grayscale-black);\n        letter-spacing: -1px;\n        margin-bottom: 12px;\n        margin-top: 20px;\n        text-transform: uppercase;\n\n        @include breakpoint($narrow) {\n          @include font-size(46px, 48px);\n          letter-spacing: -1.5px;\n          margin-top: 24px;\n        }\n        @include breakpoint($xlarge) {\n          @include font-size(52px, 54px);\n          letter-spacing: -1.6px;\n        }\n      }\n      .description {\n        @include font-size(12px, 16px);\n        color: var(--grayscale-black);\n        letter-spacing: -0.2px;\n        margin-bottom: 16px;\n        padding: 0;\n\n        @include breakpoint($narrow) {\n          @include font-size(16px, 22px);\n          letter-spacing: -0.1px;\n          margin-bottom: 18px;\n        }\n        @include breakpoint($wide) {\n          @include font-size(18px, 24px);\n          letter-spacing: -0.1px;\n          padding-left: 8px;\n        }\n        @include breakpoint($xlarge) {\n          @include font-size(20px, 28px);\n          letter-spacing: -0.2px;\n          padding-left: 12px;\n        }\n      }\n    }\n\n    &__wrapper {\n      margin: 0 auto;\n      max-width: 100%;\n      padding: 0 1rem 2rem;\n      width: 100%;\n\n      @include breakpoint($narrow) {\n        max-width: 1216px;\n        padding: 0 0 2rem;\n      }\n      @include breakpoint($xlarge) {\n        padding: 0 0 4rem;\n      }\n    }\n\n    &__panel-toggle {\n      background-color: transparent;\n      border: none;\n      position: absolute;\n      right: 1rem;\n      top: 25px;\n\n      @include breakpoint($narrow) {\n        right: 2rem;\n        top: 36px;\n      }\n      @include breakpoint($xlarge) {\n        top: 45px;\n      }\n\n      &__label {\n        @include font-size(14px, 22px);\n        @include font-weight($bold);\n        align-items: center;\n        color: var(--grayscale-black);\n        display: flex;\n        letter-spacing: -0.44px;\n        text-transform: uppercase;\n\n        &__title {\n          padding-right: 8px;\n        }\n\n        @include breakpoint($xlarge) {\n          @include font-size(18px, 22px);\n          letter-spacing: -0.56px;\n        }\n      }\n\n      &:focus:not([disabled]),\n      &:hover:not([disabled]) {\n        cursor: pointer;\n        span {\n          color: var(--brand-main);\n        }\n        svg {\n          fill: var(--brand-main);\n        }\n      }\n    }\n\n    &__tools {\n      .title {\n        @include font-size(16px, 20px);\n        @include font-weight($bold);\n        color: var(--brand-main-nearly-black);\n        letter-spacing: -0.5px;\n        text-transform: uppercase;\n\n        @include breakpoint($narrow) {\n          @include font-size(18px, 24px);\n          letter-spacing: -0.56px;\n          margin: 32px 0 16px;\n        }\n      }\n\n      .list {\n        a.search-special-tool {\n          align-items: center;\n          background-color: var(--grayscale-white);\n          display: flex;\n          margin-bottom: 8px;\n          text-decoration: none;\n\n          .label {\n            @include font-size(14px, 16px);\n            @include font-weight($bold);\n            color: var(--brand-main-nearly-black);\n            letter-spacing: -0.44px;\n            padding-left: 8px;\n\n            @include breakpoint($narrow) {\n              @include font-size(16px, 20px);\n              letter-spacing: -0.5px;\n              padding-left: 12px;\n            }\n          }\n          .description {\n            display: none;\n            @include breakpoint($wide) {\n              @include font-size(14px, 18px);\n              color: var(--grayscale-dark);\n              display: flex;\n              letter-spacing: -0.2px;\n              padding-left: 12px;\n            }\n            @include breakpoint($xlarge) {\n              @include font-size(16px, 24px);\n              color: var(--grayscale-dark);\n              display: flex;\n              letter-spacing: 0;\n              padding-left: 12px;\n            }\n          }\n\n          hy-icon {\n            height: 40px;\n            width: 40px;\n\n            svg {\n              background-color: var(--brand-main-light);\n              fill: var(--grayscale-white);\n              height: 40px;\n              padding: 8px;\n              width: 40px;\n            }\n          }\n        }\n      }\n    }\n  }\n}\n","export interface SearchTools {\n  label: string;\n  url: string;\n  description: string;\n  menuLinkId: string;\n  isExternal: string;\n}\n\nexport interface SearchLabels {\n  label?: string;\n}\n\ndeclare global {\n  interface Window {\n    CludoSayt: any;\n  }\n}\n\nimport {Component, Prop, h, State, Listen, Event, EventEmitter, Element} from \"@stencil/core\";\nimport {ComponentLabels} from \"../site-header\";\nimport {ColorVariant} from \"../../../utils/utils\";\nimport {jsonParserWorker} from \"../../../global/globalScript\";\n\n@Component({\n  tag: \"hy-site-search\",\n  styleUrl: \"site-search.scss\",\n  shadow: true,\n})\nexport class SiteSearch {\n  @Element() el: HTMLElement;\n\n  @Prop() color: ColorVariant = ColorVariant.black;\n  @Prop() isAlternative: boolean = false;\n  @Prop() isGroup: boolean = false;\n  @Prop() isLuomusGroup: boolean = false;\n  @Prop() isBetaGroup: boolean = false;\n  @Prop() searchLanguage: string;\n  @Prop() labels?: ComponentLabels[] | string;\n  @Prop() searchLabels: string;\n  @Prop() searchTools: string;\n  private _searchTools: SearchTools[];\n\n  @Prop() showLabel: boolean = false;\n  @Prop() size: number;\n  @Prop() dataSearchSpecialTools: string;\n\n  private _searchLabels: SearchLabels[];\n  private searchTitleLabel: string;\n  private searchCloseLabel: string;\n  private searchToolsLabel: string;\n  private searchDescriptionLabel: string;\n\n  @State() isSearchPanelOpen: boolean = false;\n  @Event() searchPanelToggled: EventEmitter;\n\n  private _labels: ComponentLabels[];\n\n  async componentWillLoad() {\n    this._labels = await jsonParserWorker(this.labels);\n    // Special search tools.\n    if (this.searchTools) {\n      this._searchTools = await jsonParserWorker(this.searchTools);\n    }\n\n    if (this.searchLabels) {\n      this._searchLabels = await jsonParserWorker(this.searchLabels);\n\n      this.searchTitleLabel = this._searchLabels[\"search_label\"];\n      this.searchCloseLabel = this._searchLabels[\"search_close_label\"];\n      this.searchToolsLabel = this._searchLabels[\"search_tools_label\"];\n      this.searchDescriptionLabel = this._searchLabels[\"search_description\"];\n    }\n  }\n\n  // CLose the search panel if user opens the desktop menu panel.\n  @Listen(\"menuDesktopToggled\", {target: \"document\"})\n  desktopMenuToggled() {\n    this.closeSearchPanel();\n  }\n\n  // CLose the search panel if user opens the mobile menu panel.\n  @Listen(\"menuMobileToggled\", {target: \"document\"})\n  mobileMenuToggled() {\n    this.closeSearchPanel();\n  }\n\n  // CLose the search panel if user opens the language menu.\n  @Listen(\"menuLanguageToggled\", {target: \"document\"})\n  menuLanguageToggled() {\n    this.closeSearchPanel();\n  }\n\n  // Close the search panel if user opens University main menu\n  @Listen(\"universityMainMenuToggled\", {target: \"document\"})\n  universityMainMenuPanelToggled() {\n    this.closeSearchPanel();\n  }\n\n  @Listen(\"click\", {target: \"window\"})\n  handleWindowClick(event) {\n    // Check if event is being fired during pressing a key (event.detail==0 in this case)\n    if (event.detail == 0) return;\n\n    if (this.isSearchPanelOpen) {\n      const path = event.path || (event.composedPath && event.composedPath());\n\n      if ((path[0] as HTMLElement).classList.contains(\"hy-backdrop\")) {\n        this.closeSearchPanel();\n        event.stopPropagation();\n      }\n    }\n  }\n\n  // Close the search panel on Scroll down.\n  // @Listen('headerScrollDown', {target: 'document'})\n  // headerScrollDown() {\n  //   this.closeSearchPanel();\n  // }\n\n  closeSearchPanel() {\n    this.isSearchPanelOpen = false;\n\n    let cludoSayt = document.querySelectorAll(\"stencil-cludo-sayt\")[0] as HTMLElement;\n    if (cludoSayt) {\n      let CludoSayt = window.CludoSayt;\n      if (typeof CludoSayt !== \"undefined\") {\n        CludoSayt.hide();\n      }\n    }\n\n    this.showBackdropShadow();\n  }\n\n  handleSearchPanelToggle(event) {\n    if (this.isLuomusGroup) {\n      let beta = this.isBetaGroup ? \"/beta\" : \"\";\n      let luomus_search_url = \"/\" + this.searchLanguage + beta + \"/luomus/search-results\";\n      if (this.searchLanguage == \"fi\") {\n        luomus_search_url = \"/\" + this.searchLanguage + beta + \"/luomus/hakutulokset\";\n      } else if (this.searchLanguage == \"sv\") {\n        luomus_search_url = \"/\" + this.searchLanguage + beta + \"/luomus/sokresultat\";\n      } else if (this.searchLanguage == \"ru\") {\n        luomus_search_url = \"/\" + this.searchLanguage + beta + \"/luomus/rezultaty-poiska\";\n      }\n      location.href = luomus_search_url;\n    } else {\n      this.isSearchPanelOpen = !this.isSearchPanelOpen;\n\n      if (this.isSearchPanelOpen) {\n        // Close desktop menu panel and lang menu panel if they are open.\n        this.searchPanelToggled.emit();\n\n        this.adjustPosition(this.el);\n\n        // Remove hidden class from cludo suggestions\n        let cludoSayt = document.querySelectorAll(\"stencil-cludo-sayt\")[0] as HTMLElement;\n\n        if (cludoSayt) {\n          const cludoSearchContentFormElement = this.el.shadowRoot.querySelector(\n            \"#cludo-search-content-form\"\n          ) as HTMLElement;\n          cludoSayt.classList.remove(\"hidden\");\n          cludoSearchContentFormElement.append(cludoSayt);\n          (cludoSayt.shadowRoot.querySelector(\"#cludo-reli-flexi-wrapper\") as HTMLElement).style.position = \"relative\";\n          (cludoSayt.shadowRoot.querySelector(\"#cludo-reli-flexi\") as HTMLElement).style.position = \"relative\";\n          (cludoSayt.shadowRoot.querySelector(\"#cludo-reli-flexi\") as HTMLElement).style.maxWidth = \"none\";\n        }\n\n        // Without setTimeout it will not focus the input because it hasn't rendered yet.\n        setTimeout(() => {\n          const searchInput = this.el.shadowRoot.querySelector(\"input#search\") as HTMLElement;\n          searchInput.focus();\n        });\n      } else {\n        this.closeSearchPanel();\n      }\n    }\n\n    event.stopPropagation();\n  }\n\n  adjustPosition(target) {\n    let headerHeight = \"0\";\n    let shadowTop = 0;\n    const searchPanel = target.shadowRoot.querySelectorAll(`.site-search__panel`)[0] as HTMLElement;\n    let initialDisplayStyle = searchPanel.style.display;\n\n    if (this.isGroup) {\n      let hyHeader = target.closest(\".hy-site-header__content-top\") as HTMLElement;\n      if (hyHeader) {\n        let headerHeightValue = hyHeader.offsetHeight;\n        headerHeight = `${headerHeightValue}px`;\n        let headerTop = hyHeader.offsetTop;\n\n        // Add shadow backdrop\n        searchPanel.style.display = \"flex\";\n        shadowTop = headerHeightValue + headerTop + searchPanel.offsetHeight;\n      }\n    } else {\n      let hyHeader = target.closest(\".hy-site-header\") as HTMLElement;\n      if (hyHeader) {\n        let headerHeightValue = hyHeader.classList.contains(\"hy-site-header--sticky-active\")\n          ? hyHeader.offsetHeight\n          : hyHeader.offsetTop + hyHeader.offsetHeight;\n\n        headerHeight = `${headerHeightValue}px`;\n\n        // Add shadow backdrop\n        searchPanel.style.display = \"flex\";\n        let searchPanelHeight = searchPanel.offsetHeight;\n\n        shadowTop = searchPanelHeight + headerHeightValue;\n      }\n    }\n\n    searchPanel.style.display = initialDisplayStyle;\n    searchPanel.style.top = headerHeight;\n\n    this.showBackdropShadow(\"open\", shadowTop);\n  }\n\n  showBackdropShadow(state = \"close\", top = 0) {\n    let hyHeader = this.el.closest(\".hy-site-header\") as HTMLElement;\n    let hyBackdropDiv = hyHeader.children[0] as HTMLElement;\n\n    if (hyBackdropDiv) {\n      if (state === \"open\") {\n        let me = window.outerHeight - top;\n        hyBackdropDiv.style.height = `${me}px`;\n        hyBackdropDiv.style.top = `${top}px`;\n        hyBackdropDiv.style.position = \"absolute\";\n        hyBackdropDiv.classList.add(\"is-active\");\n      } else {\n        hyBackdropDiv.removeAttribute(\"style\");\n        hyBackdropDiv.classList.remove(\"is-active\");\n      }\n    }\n  }\n\n  render() {\n    const currentPageUrlPathName = window.location.pathname;\n    const searchPagePathNames = [\"/fi/haku\", \"/en/search\", \"/sv/sök\"];\n\n    return (\n      <div\n        class={{\n          \"site-search\": true,\n          \"site-search__is-open\": this.isSearchPanelOpen,\n          \"is-group\": this.isGroup,\n        }}\n      >\n        <button\n          aria-label={this.showLabel ? this._labels[\"open\"] : \"\"}\n          aria-expanded={`${this.isSearchPanelOpen}`}\n          class={{\n            \"button--search\": true,\n            \"is-open--menu\": this.isAlternative,\n            \"is-open\": this.isSearchPanelOpen,\n            \"is-active\": searchPagePathNames.some((item) => item === currentPageUrlPathName),\n          }}\n          onClick={(e) => this.handleSearchPanelToggle(e)}\n          disabled={searchPagePathNames.some((item) => item === currentPageUrlPathName) ? true : false}\n        >\n          {this.showLabel ? (\n            <span class={{\"button--search__label\": true, \"button--search__label__group\": this.isGroup}}>\n              {this._labels[\"label\"]}\n            </span>\n          ) : (\n            \"\"\n          )}\n          <hy-icon icon={\"hy-icon-search\"} size={this.size} fill={this.color} />\n        </button>\n        {!this.isLuomusGroup && (\n          <div\n            class={{\n              \"site-search__panel\": true,\n              \"site-search__panel__is-open\": this.isSearchPanelOpen,\n            }}\n            aria-hidden={`${!this.isSearchPanelOpen}`}\n          >\n            <div class=\"site-search__panel__wrapper\">\n              <div class=\"site-search__panel__title\">\n                <div class=\"site-search__panel__title__group\">\n                  <span class=\"panel-title\">{this.searchTitleLabel}</span>\n                  <div class=\"description\">{this.searchDescriptionLabel}</div>\n                </div>\n              </div>\n              <div id=\"cludo-search-results\" class=\"container_12\">\n                <div class=\"search-banner\"></div>\n                <div class=\"search-filters search-filters-mobile\"></div>\n\n                <div class=\"col-md-12\">\n                  <div style={{margin: \"20px 0 32px\"}} id=\"cludo-search-content-form\">\n                    <hy-search-field input-id=\"search\" label=\"\"></hy-search-field>\n                  </div>\n                </div>\n\n                <div class=\"col-md-3\">\n                  <div class=\"search-filters\" aria-controls=\"search-results\"></div>\n                </div>\n                <div class=\"col-md-9\">\n                  <div class=\"search-results-container\">\n                    <hy-paragraph-text>\n                      <div class=\"search-result-count\"></div>\n                    </hy-paragraph-text>\n                    <div class=\"search-did-you-mean\" role=\"Complementary\"></div>\n                    <div class=\"search-results\" role=\"region\" id=\"search-results\" aria-live=\"polite\"></div>\n                  </div>\n                </div>\n              </div>\n\n              {this._searchTools && this._searchTools.length > 0 && (\n                <div class=\"site-search__panel__tools\">\n                  <div class=\"title\">{this.searchToolsLabel}</div>\n                  <div class=\"list\">\n                    {this._searchTools.map((i) => {\n                      let searchToolTarget = i.isExternal ? \"_blank\" : \"_self\";\n                      return (\n                        <a class=\"search-special-tool\" href={i.url} target={searchToolTarget}>\n                          <hy-icon icon={\"hy-icon-arrow-to-right\"} size={14} fill={ColorVariant.black} />\n                          <span class=\"label\">{i.label}</span>\n                          <span class=\"description\">{i.description}</span>\n                        </a>\n                      );\n                    })}\n                  </div>\n                </div>\n              )}\n              <button\n                onClick={() => this.closeSearchPanel()}\n                class={{\n                  \"site-search__panel__panel-toggle\": true,\n                }}\n                aria-label={this.searchCloseLabel}\n                aria-expanded={`${this.isSearchPanelOpen}`}\n              >\n                <span class=\"site-search__panel__panel-toggle__label\">\n                  <span class=\"site-search__panel__panel-toggle__label__title\" tabindex=\"0\">\n                    {this.searchCloseLabel}\n                  </span>\n                  <hy-icon icon={\"hy-icon-remove\"} size={16} fill={ColorVariant.black} />\n                </span>\n              </button>\n            </div>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import{r as e,h as i,H as t}from"./index-f84f2a7d.js";import{e as a}from"./utils-7438924c.js";const c=':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-checkbox{display:inline-block;position:relative;margin-right:1rem}.hy-checkbox__checkmark{border-color:var(--link-blue);border-style:solid inset solid solid;border-width:2px;height:20px;margin-right:6px;min-width:20px;min-height:20px;position:relative;width:20px}.hy-checkbox__checkmark svg{bottom:0;left:0;position:absolute;visibility:hidden}.hy-checkbox__checkmark::before{background-color:var(--grayscale-white);content:"";height:10px;position:absolute;right:0;-webkit-transform:rotate(40deg) translate(6%, -55%);transform:rotate(40deg) translate(6%, -55%);visibility:hidden;width:8px}.hy-checkbox__label{font-size:0.875rem;line-height:20px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--grayscale-black);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);letter-spacing:-0.4px;text-align:left}@media (min-width: 30rem){.hy-checkbox__label{font-size:1rem;line-height:20px}}.hy-checkbox__checkbox{height:100%;margin:0;opacity:0;position:absolute;width:100%;z-index:10}.hy-checkbox__checkbox:checked+label{color:var(--grayscale-black)}.hy-checkbox__checkbox:checked+label .hy-checkbox__checkmark svg,.hy-checkbox__checkbox:checked+label .hy-checkbox__checkmark::before{visibility:visible}.hy-checkbox__checkbox:hover{cursor:pointer}.hy-checkbox__checkbox:hover+label{color:var(--brand-main)}.hy-checkbox__checkbox:focus+label{outline-offset:1px;outline:2px solid var(--link-blue)}.hy-checkbox--button{display:inline-block;margin-right:4px;position:relative}.hy-checkbox--button__label{font-size:0.75rem;line-height:14px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:0.5px 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;letter-spacing:-0.3px;padding:12px 15px 12px 13px;z-index:1}@media (min-width: 60rem){.hy-checkbox--button__label{font-size:0.875rem;line-height:18px;letter-spacing:-0.4px;padding:9px 8px 9px 8px}}.hy-checkbox--button__checkmark{position:absolute;right:12px;top:0;bottom:0}@media (min-width: 60rem){.hy-checkbox--button__checkmark{right:10px;bottom:calc(50% + 10px)}}.hy-checkbox--button__checkmark svg{bottom:0;left:0;position:absolute;visibility:hidden}.hy-checkbox--button__label-icon{height:13px;position:absolute;width:12px}@media (min-width: 60rem){.hy-checkbox--button__label-icon{padding:10px;right:-6px;top:calc(50% + 5px)}}.hy-checkbox--button__label-icon svg{background:var(--grayscale-white);height:12px;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:12px}.hy-checkbox--button__checkbox{height:100%;margin:0;opacity:0;position:absolute;width:100%;z-index:10}.hy-checkbox--button__checkbox:checked+label{border:1px solid var(--grayscale-black);color:var(--grayscale-black);padding:12px 15px 12px 13px}@media (min-width: 60rem){.hy-checkbox--button__checkbox:checked+label{border:2px solid var(--grayscale-black);padding:8px 26px 8px 7px}}.hy-checkbox--button__checkbox:checked+label .hy-checkbox--button__checkmark .hy-checkbox--button__label-icon{background:var(--grayscale-white)}.hy-checkbox--button__checkbox:checked+label .hy-checkbox--button__checkmark svg{visibility:visible}.hy-checkbox--button__checkbox:hover{cursor:pointer}.hy-checkbox--button__checkbox:focus+label{outline-offset:1px;outline:1px solid var(--link-blue)}';const o=class{constructor(i){e(this,i);this.checkboxId=undefined;this.checkboxValue=undefined;this.checkboxLabel=undefined;this.checkboxChecked=false;this.variant=a.default}render(){switch(this.variant){case"button":return i(t,{class:"hy-checkbox--button"},i("input",{type:"checkbox",class:"hy-checkbox--button__checkbox",checked:this.checkboxChecked,id:`${this.checkboxId}`,value:`${this.checkboxValue}`}),i("label",{class:"hy-checkbox--button__label",htmlFor:`${this.checkboxId}`},this.checkboxLabel,i("span",{class:"hy-checkbox--button__checkmark"},i("hy-icon",{class:"hy-checkbox--button__label-icon",icon:"hy-icon-done",size:14,"aria-hidden":"true"}))));default:return i(t,{class:"hy-checkbox"},i("input",{type:"checkbox",class:"hy-checkbox__checkbox",checked:this.checkboxChecked,id:`${this.checkboxId}`,value:`${this.checkboxValue}`}),i("label",{class:"hy-checkbox__label",htmlFor:`${this.checkboxId}`},i("span",{class:"hy-checkbox__checkmark"},i("hy-icon",{class:"hy-checkbox__label-icon",icon:"hy-icon-done",size:23,"aria-hidden":"true"})),this.checkboxLabel))}}};o.style=c;export{o as hy_checkbox};
+//# sourceMappingURL=hy-checkbox.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["hyCheckboxCss","HyCheckbox","CheckboxVariants","default","render","this","variant","h","Host","class","type","checked","checkboxChecked","id","checkboxId","value","checkboxValue","htmlFor","checkboxLabel","icon","size"],"sources":["./src/components/hy-checkbox/hy-checkbox.scss?tag=hy-checkbox","./src/components/hy-checkbox/hy-checkbox.tsx"],"sourcesContent":[".hy-checkbox {\n  display: inline-block;\n  position: relative;\n  margin-right: 1rem;\n}\n\n.hy-checkbox__checkmark {\n  border-color: var(--link-blue);\n  border-style: solid inset solid solid;\n  border-width: 2px;\n  height: 20px;\n  margin-right: 6px;\n  min-width: 20px;\n  min-height: 20px;\n  position: relative;\n  width: 20px;\n\n  svg {\n    bottom: 0;\n    left: 0;\n    position: absolute;\n    visibility: hidden;\n  }\n\n  &::before {\n    background-color: var(--grayscale-white);\n    content: \"\";\n    height: 10px;\n    position: absolute;\n    right: 0;\n    transform: rotate(40deg) translate(6%, -55%);\n    visibility: hidden;\n    width: 8px;\n  }\n}\n\n.hy-checkbox__label {\n  @include font-size(14px, 20px);\n  align-items: center;\n  color: var(--grayscale-black);\n  display: inline-flex;\n  font-family: var(--main-font-family);\n  letter-spacing: -0.4px;\n  text-align: left;\n\n  @include breakpoint($narrow) {\n    @include font-size(16px, 20px);\n  }\n}\n\n.hy-checkbox__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      color: var(--grayscale-black);\n\n      .hy-checkbox__checkmark {\n        svg,\n        &::before {\n          visibility: visible;\n        }\n      }\n    }\n  }\n\n  &:hover {\n    cursor: pointer;\n\n    & + label {\n      color: var(--brand-main);\n    }\n  }\n\n  &:focus {\n    & + label {\n      outline-offset: 1px;\n      outline: 2px solid var(--link-blue);\n    }\n  }\n}\n\n.hy-checkbox--button {\n  display: inline-block;\n  margin-right: 4px;\n  position: relative;\n\n  &__label {\n    @include font-size(12px, 14px);\n\n    align-items: center;\n    border: 0.5px solid var(--grayscale-medium-dark);\n    color: var(--link-blue);\n    display: inline-flex;\n    font-family: var(--main-font-family);\n    font-weight: 600;\n    letter-spacing: -0.3px;\n    padding: 12px 15px 12px 13px;\n    z-index: 1;\n\n    @include breakpoint($wide) {\n      @include font-size(14px, 18px);\n\n      letter-spacing: -0.4px;\n      padding: 9px 8px 9px 8px;\n    }\n  }\n\n  &__checkmark {\n    position: absolute;\n    right: 12px;\n    top: 0;\n    bottom: 0;\n\n    @include breakpoint($wide) {\n      right: 10px;\n      bottom: calc(50% + 10px);\n    }\n\n    svg {\n      bottom: 0;\n      left: 0;\n      position: absolute;\n      visibility: hidden;\n    }\n  }\n\n  &__label-icon {\n    height: 13px;\n    position: absolute;\n    width: 12px;\n\n    @include breakpoint($wide) {\n      padding: 10px;\n      right: -6px;\n      top: calc(50% + 5px);\n    }\n\n    svg {\n      background: var(--grayscale-white);\n      height: 12px;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%, -50%);\n      width: 12px;\n    }\n  }\n\n  &__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: 1px solid var(--grayscale-black);\n        color: var(--grayscale-black);\n        padding: 12px 15px 12px 13px;\n\n        @include breakpoint($wide) {\n          border: 2px solid var(--grayscale-black);\n          padding: 8px 26px 8px 7px;\n        }\n\n        .hy-checkbox--button__checkmark {\n          .hy-checkbox--button__label-icon {\n            background: var(--grayscale-white);\n          }\n\n          svg {\n            visibility: visible;\n          }\n        }\n      }\n    }\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    &:focus {\n      & + label {\n        outline-offset: 1px;\n        outline: 1px solid var(--link-blue);\n      }\n    }\n  }\n}\n","import {Component, Host, h, Prop} from \"@stencil/core\";\nimport {CheckboxVariants} from \"../../utils/utils\";\n\n@Component({\n  tag: \"hy-checkbox\",\n  styleUrl: \"hy-checkbox.scss\",\n  shadow: false,\n})\nexport class HyCheckbox {\n  /**\n   * Unique id for checkbox element\n   */\n  @Prop() checkboxId: string | number;\n  /**\n   * Value for input element\n   */\n  @Prop() checkboxValue: string | number;\n  /**\n   * Label for input to describe\n   */\n  @Prop() checkboxLabel: string;\n  /**\n   * Checked attribute\n   */\n  @Prop() checkboxChecked: boolean = false;\n  /**\n   * Variant to deifne what style of checkbox to use\n   */\n  @Prop() variant: CheckboxVariants = CheckboxVariants.default;\n\n  render() {\n    switch (this.variant) {\n      case \"button\":\n        return (\n          <Host class=\"hy-checkbox--button\">\n            <input\n              type=\"checkbox\"\n              class=\"hy-checkbox--button__checkbox\"\n              checked={this.checkboxChecked}\n              id={`${this.checkboxId}`}\n              value={`${this.checkboxValue}`}\n            />\n            <label class=\"hy-checkbox--button__label\" htmlFor={`${this.checkboxId}`}>\n              {this.checkboxLabel}\n              <span class=\"hy-checkbox--button__checkmark\">\n                <hy-icon class=\"hy-checkbox--button__label-icon\" icon={\"hy-icon-done\"} size={14} aria-hidden=\"true\" />\n              </span>\n            </label>\n          </Host>\n        );\n\n      default:\n        return (\n          <Host class=\"hy-checkbox\">\n            <input\n              type=\"checkbox\"\n              class=\"hy-checkbox__checkbox\"\n              checked={this.checkboxChecked}\n              id={`${this.checkboxId}`}\n              value={`${this.checkboxValue}`}\n            />\n            <label class=\"hy-checkbox__label\" htmlFor={`${this.checkboxId}`}>\n              <span class=\"hy-checkbox__checkmark\">\n                <hy-icon class=\"hy-checkbox__label-icon\" icon={\"hy-icon-done\"} size={23} aria-hidden=\"true\" />\n              </span>\n              {this.checkboxLabel}\n            </label>\n          </Host>\n        );\n    }\n  }\n}\n"],"mappings":"8FAAA,MAAMA,EAAgB,8iJ,MCQTC,EAAU,M,kIAgBc,M,aAICC,EAAiBC,O,CAErDC,SACE,OAAQC,KAAKC,SACX,IAAK,SACH,OACEC,EAACC,EAAI,CAACC,MAAM,uBACVF,EAAA,SACEG,KAAK,WACLD,MAAM,gCACNE,QAASN,KAAKO,gBACdC,GAAI,GAAGR,KAAKS,aACZC,MAAO,GAAGV,KAAKW,kBAEjBT,EAAA,SAAOE,MAAM,6BAA6BQ,QAAS,GAAGZ,KAAKS,cACxDT,KAAKa,cACNX,EAAA,QAAME,MAAM,kCACVF,EAAA,WAASE,MAAM,kCAAkCU,KAAM,eAAgBC,KAAM,GAAE,cAAc,YAMvG,QACE,OACEb,EAACC,EAAI,CAACC,MAAM,eACVF,EAAA,SACEG,KAAK,WACLD,MAAM,wBACNE,QAASN,KAAKO,gBACdC,GAAI,GAAGR,KAAKS,aACZC,MAAO,GAAGV,KAAKW,kBAEjBT,EAAA,SAAOE,MAAM,qBAAqBQ,QAAS,GAAGZ,KAAKS,cACjDP,EAAA,QAAME,MAAM,0BACVF,EAAA,WAASE,MAAM,0BAA0BU,KAAM,eAAgBC,KAAM,GAAE,cAAc,UAEtFf,KAAKa,gB"}

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

@@ -0,0 +1,2 @@
+import{r as i,h as a}from"./index-f84f2a7d.js";const e=":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-collaboration{border-bottom:1px solid var(--grayscale-dark);padding:32px 0}@media (min-width: 60rem){.hy-collaboration{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;display:grid;grid-template-columns:fit-content(calc(43.75% - 60px)) 1fr;gap:60px}}@media (min-width: 75.0625rem){.hy-collaboration{grid-template-columns:fit-content(calc(43% - 60px)) 1fr;padding:40px 0}}@media (min-width: 87.5rem){.hy-collaboration{grid-template-columns:fit-content(calc(42.5% - 60px)) 1fr}}@media (min-width: 1601px){.hy-collaboration{grid-template-columns:fit-content(calc(41.85% - 60px)) 1fr}}@media (min-width: 1750px){.hy-collaboration{grid-template-columns:fit-content(calc(41% - 60px)) 1fr}}@media (min-width: 120.0625rem){.hy-collaboration{grid-template-columns:fit-content(428px) 1fr}}.hy-collaboration__logo{margin:0 0 32px;padding:0}@media (min-width: 60rem){.hy-collaboration__logo{margin:0}}.hy-collaboration__logo img{max-width:75%;max-height:200px}@media (min-width: 30rem){.hy-collaboration__logo img{max-width:50%}}@media (min-width: 60rem){.hy-collaboration__logo img{max-width:100%;max-height:260px}}.hy-collaboration__description{font-size:0.9375rem;line-height:22px;font-family:var(--main-font-family);margin:0 0 12px}@media (min-width: 30rem){.hy-collaboration__description{font-size:1rem;line-height:24px}}@media (min-width: 75.0625rem){.hy-collaboration__description{font-size:1.0625rem;line-height:26px}}.hy-collaboration__link{font-size:0.9375rem;line-height:22px;font-weight:600;font-family:var(--main-font-family);color:var(--link-blue);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media (min-width: 30rem){.hy-collaboration__link{font-size:1rem;line-height:24px}}@media (min-width: 75.0625rem){.hy-collaboration__link{font-size:1.0625rem;line-height:26px}}.hy-collaboration__link span{margin-left:4px}.hy-collaboration__link span svg{fill:var(--link-blue)}";const t=class{constructor(a){i(this,a);this.textDescription=undefined;this.linkUrl=undefined;this.linkTitle=undefined;this.imageUrl=undefined;this.imageAltText=undefined}render(){return a("div",{class:"hy-collaboration"},a("figure",{class:"hy-collaboration__logo",role:"complementary"},a("img",{src:this.imageUrl,alt:this.imageAltText})),a("div",{class:"hy-collaboration__content"},a("p",{class:"hy-collaboration__description"},this.textDescription),this.linkUrl&&a("a",{href:this.linkUrl,class:"hy-collaboration__link"},this.linkTitle,a("span",{"aria-hidden":"true"},a("hy-icon",{icon:"hy-icon-arrow-right",size:10})))))}};t.style=e;export{t as hy_collaboration};
+//# sourceMappingURL=hy-collaboration.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["hyCollaborationCss","HyCollaboration","render","h","class","role","src","this","imageUrl","alt","imageAltText","textDescription","linkUrl","href","linkTitle","icon","size"],"sources":["./src/components/hy-collaboration/hy-collaboration.scss?tag=hy-collaboration","./src/components/hy-collaboration/hy-collaboration.tsx"],"sourcesContent":[".hy-collaboration {\n  border-bottom: 1px solid var(--grayscale-dark);\n  padding: 32px 0;\n\n  @include breakpoint($wide) {\n    align-items: flex-start;\n    display: grid;\n    grid-template-columns: fit-content(calc(43.75% - 60px)) 1fr;\n    gap: 60px;\n  }\n\n  @include breakpoint($extrawide) {\n    grid-template-columns: fit-content(calc(43% - 60px)) 1fr;\n    padding: 40px 0;\n  }\n\n  @include breakpoint($overwide) {\n    grid-template-columns: fit-content(calc(42.5% - 60px)) 1fr;\n  }\n\n  @include breakpoint($xlarge) {\n    grid-template-columns: fit-content(calc(41.85% - 60px)) 1fr;\n  }\n\n  @include breakpoint(1750px) {\n    grid-template-columns: fit-content(calc(41% - 60px)) 1fr;\n  }\n\n  @include breakpoint($fullhd) {\n    grid-template-columns: fit-content(428px) 1fr;\n  }\n}\n\n.hy-collaboration__logo {\n  margin: 0 0 32px;\n  padding: 0;\n\n  @include breakpoint($wide) {\n    margin: 0;\n  }\n\n  img {\n    max-width: 75%;\n    max-height: 200px;\n\n    @include breakpoint($narrow) {\n      max-width: 50%;\n    }\n\n    @include breakpoint($wide) {\n      max-width: 100%;\n      max-height: 260px;\n    }\n  }\n}\n\n.hy-collaboration__description {\n  @include font-size(15px, 22px);\n  font-family: var(--main-font-family);\n  margin: 0 0 12px;\n\n  @include breakpoint($narrow) {\n    @include font-size(16px, 24px);\n  }\n\n  @include breakpoint($extrawide) {\n    @include font-size(17px, 26px);\n  }\n}\n\n.hy-collaboration__link {\n  @include font-size(15px, 22px);\n  @include font-weight($semibold);\n  font-family: var(--main-font-family);\n  color: var(--link-blue);\n  display: inline-flex;\n  align-items: center;\n\n  @include breakpoint($narrow) {\n    @include font-size(16px, 24px);\n  }\n\n  @include breakpoint($extrawide) {\n    @include font-size(17px, 26px);\n  }\n\n  span {\n    margin-left: 4px;\n\n    svg {\n      fill: var(--link-blue);\n    }\n  }\n}\n","import {Component, h, Prop} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-collaboration\",\n  styleUrl: \"hy-collaboration.scss\",\n  shadow: false,\n})\nexport class HyCollaboration {\n  @Prop() textDescription: string;\n  @Prop() linkUrl?: string;\n  @Prop() linkTitle?: string;\n  @Prop() imageUrl: string;\n  @Prop() imageAltText: string;\n\n  render() {\n    return (\n      <div class=\"hy-collaboration\">\n        <figure class=\"hy-collaboration__logo\" role=\"complementary\">\n          <img src={this.imageUrl} alt={this.imageAltText} />\n        </figure>\n        <div class=\"hy-collaboration__content\">\n          <p class=\"hy-collaboration__description\">{this.textDescription}</p>\n          {this.linkUrl && (\n            <a href={this.linkUrl} class=\"hy-collaboration__link\">\n              {this.linkTitle}\n              <span aria-hidden=\"true\">\n                <hy-icon icon={\"hy-icon-arrow-right\"} size={10} />\n              </span>\n            </a>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"+CAAA,MAAMA,EAAqB,umG,MCOdC,EAAe,M,4JAO1BC,SACE,OACEC,EAAA,OAAKC,MAAM,oBACTD,EAAA,UAAQC,MAAM,yBAAyBC,KAAK,iBAC1CF,EAAA,OAAKG,IAAKC,KAAKC,SAAUC,IAAKF,KAAKG,gBAErCP,EAAA,OAAKC,MAAM,6BACTD,EAAA,KAAGC,MAAM,iCAAiCG,KAAKI,iBAC9CJ,KAAKK,SACJT,EAAA,KAAGU,KAAMN,KAAKK,QAASR,MAAM,0BAC1BG,KAAKO,UACNX,EAAA,sBAAkB,QAChBA,EAAA,WAASY,KAAM,sBAAuBC,KAAM,Q"}

package/dist/huds-lib/hy-content-list_2.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as i,H as e,g as n}from"./index-f84f2a7d.js";import{j as a,k as r}from"./utils-7438924c.js";import{j as o}from"./globalScript-5a4b7abf.js";const l=":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-content-list{display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);-ms-flex-wrap:wrap;flex-wrap:wrap}.hy-content-list--no-result{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.hy-content-list--alert{margin-right:6px}.hy-content-list--alert svg{fill:var(--grayscale-dark)}@media (min-width: 1601px){.hy-content-list--alert svg{height:18px;width:18px}}@media (min-width: 87.5rem){.hy-content-list--alert--large svg{height:18px;width:18px}}.hy-content-list--alert-label{font-family:var(--main-font-family);font-size:0.9375rem;line-height:22px;color:var(--grayscale-dark);font-style:italic;letter-spacing:0}@media (min-width: 30rem){.hy-content-list--alert-label{font-size:1rem;line-height:24px}}@media (min-width: 1601px){.hy-content-list--alert-label{font-size:1.0625rem;line-height:26px}}@media (min-width: 87.5rem){.hy-content-list--alert-label--large{font-size:1.0625rem;line-height:26px}}.hy-content-list.row{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.hy-content-list.grid{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}";const s=class{constructor(i){t(this,i);this.variant=a.default;this.linkLabel="Go to course page";this.noResultLabel="No courses scheduled at the moment";this.creditsLabel="cr";this.cancelledLabel="Cancelled";this.dataItems=undefined;this.headerstyle="common";this.courseStateVariant=r.default;this.courseRealisations=[]}dataWatcher(t){this._dataItems=typeof t==="string"?JSON.parse(t):t}componentWillLoad(){this.dataWatcher(this.dataItems)}handleCardClick(t,i){t.preventDefault();let e=this.el.querySelector(`#${i}`);if(e){window.open(e.dataset.location,"_blank")}}async componentDidLoad(){let t=this.el.closest(".hy-main");if(t){if(!t.classList.contains("with-sidebar")){this.headerstyle="large"}}}renderItems(){let t=[];if(this._dataItems&&this._dataItems.length>0){this._dataItems.forEach((e=>{const n=JSON.parse(JSON.stringify(e));const r=n["courseListType"];this.variant=r=="list"?a.row:a.grid;for(const e in n){if(e=="courseListType")continue;const a=n[e];const r=a["code"];const o=a["credits"];if(a["realisations"]){const e=JSON.parse(JSON.stringify(a["realisations"]));for(const n in e){const a=e[n];const l=a["name"];const s=l+", "+o+" "+this.creditsLabel;const d=a["studyFormat"];const c=a["cancelled"];const m=a["startDate"];const h=a["endDate"];const g=a["formattedTimeRange"];const p=a["enrolmentLink"];const b=a["teachingLanguage"];const y=a["organisation"];let x=[];if(a["tags"]){let t=JSON.parse(JSON.stringify(a["tags"]));for(let i in t){let e={name:t[i]};x.push(e)}}const f=JSON.stringify(x);const w=["item",this.variant].join(" ");t.push(i("hy-content-list-item",{id:n,class:w,variant:this.variant,"state-variant":this.courseStateVariant,"course-code":r,"course-name":s,"is-cancelled":c,"cancelled-label":this.cancelledLabel,"course-credits":o,"course-tags":f,"course-start-date":m,"course-end-date":h,"formatted-time-range":g,"course-study-format":d,"course-organisation":y,"course-enrollment-link":p,"course-teaching-language":b,"course-link-label":this.linkLabel,"data-location":p,onClick:t=>this.handleCardClick(t,n)}))}}}}))}return t}render(){const t=[this.variant,"hy-content-list"].join(" ");const n=["hy-content-list--alert",`hy-content-list--alert--${this.headerstyle}`].join(" ");const a=["hy-content-list--alert-label",`hy-content-list--alert-label--${this.headerstyle}`].join(" ");this.courseRealisations=this.renderItems();if(this.courseRealisations&&this.courseRealisations.length>0){return i(e,null,i("div",{class:t},this.courseRealisations))}else{return i(e,null,i("div",{class:t},i("div",{class:"hy-content-list--no-result"},i("span",{class:n},i("hy-icon",{icon:"hy-icon-info",size:16})),i("span",{class:a},this.noResultLabel))))}}get el(){return n(this)}static get watchers(){return{dataItems:["dataWatcher"]}}};s.style=l;const d=':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-content-list-item{background:radial-gradient(circle, #f8f8f8 0%, #f5f5f5 100%);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:16px;position:relative}@media (min-width: 30rem){hy-content-list-item{margin-bottom:24px}}hy-content-list-item[variant=row],hy-content-list-item.row{max-width:100%;padding:21px 0 60px 12px;width:100%}@media (min-width: 30rem){hy-content-list-item[variant=row],hy-content-list-item.row{padding:21px 0 12px 24px}}@media (min-width: 60rem){hy-content-list-item[variant=row],hy-content-list-item.row{margin-bottom:16px}}hy-content-list-item.grid{max-width:100%;padding:21px 0 60px 12px;width:100%}@media (min-width: 30rem){hy-content-list-item.grid{margin-right:var(--gutter-medium);max-width:calc(((100% - var(--gutter-medium) * 11) / 12) * 6 + var(--gutter-medium) * 5);padding:21px 0 60px 12px;width:calc(((100% - var(--gutter-medium) * 11) / 12) * 6 + var(--gutter-medium) * 5)}}@media (min-width: 60rem){hy-content-list-item.grid{margin-bottom:27px;margin-right:var(--gutter-wide);max-width:calc(((100% - var(--gutter-wide) * 11) / 12) * 4 + var(--gutter-wide) * 3);width:calc(((100% - var(--gutter-wide) * 11) / 12) * 4 + var(--gutter-wide) * 3)}}@media (min-width: 75.0625rem){hy-content-list-item.grid{margin-bottom:32px;margin-right:var(--gutter-extrawide);max-width:calc(((100% - var(--gutter-extrawide) * 11) / 12) * 4 + var(--gutter-extrawide) * 3);width:calc(((100% - var(--gutter-extrawide) * 11) / 12) * 4 + var(--gutter-extrawide) * 3)}}@media (min-width: 30rem){hy-content-list-item.grid:nth-of-type(2n+0){margin-right:0}}@media (min-width: 60rem){hy-content-list-item.grid:nth-of-type(2n+0){margin-right:var(--gutter-wide)}}@media (min-width: 75.0625rem){hy-content-list-item.grid:nth-of-type(2n+0){margin-right:var(--gutter-extrawide)}}@media (min-width: 60rem){hy-content-list-item.grid:nth-of-type(3n+0){margin-right:0}}.hy-content-list-item{font-family:var(--main-font-family);position:relative;width:100%}.hy-content-list-item a{text-decoration:none}.hy-content-list-item--container{cursor:pointer}.hy-content-list-item--item-name{color:var(--link-blue);font-size:1.25rem;line-height:24px;font-weight:700;letter-spacing:-0.6px;margin-bottom:16px;word-break:break-word}.hy-content-list-item--item-name--past-courses{color:var(--grayscale-dark)}.hy-content-list-item--metadata{font-size:0.875rem;line-height:16px;font-weight:600;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;-ms-flex-wrap:wrap;flex-wrap:wrap;letter-spacing:-0.44px;line-height:16px;margin-bottom:19px;padding-bottom:0}.hy-content-list-item--metadata--item{padding-bottom:6px}@media (min-width: 30rem){.hy-content-list-item--metadata{padding-bottom:1rem}}@media (min-width: 75.0625rem){.hy-content-list-item--metadata{padding-bottom:0}}.hy-content-list-item--metadata--item:after{content:"|";padding:0 8px}.hy-content-list-item--metadata--item--last:after{content:" "}.hy-content-list-item .cancelled span{font-size:0.75rem;line-height:12px;font-weight:700;background-color:var(--additional-red-light);color:var(--grayscale-white);letter-spacing:-0.5px;padding:6px 8px;text-transform:uppercase}.hy-content-list-item .cancelled--past-courses span{background-color:var(--grayscale-dark)}.hy-content-list-item .cancelled:not(.mobile){display:none}.hy-content-list-item .cancelled.mobile{bottom:-50px;display:block;margin:0;padding-bottom:12px;position:absolute}@media (min-width: 30rem){.hy-content-list-item .cancelled{margin-right:8px}.hy-content-list-item .cancelled.mobile{display:none}.hy-content-list-item .cancelled:not(.mobile){display:block}}.hy-content-list-item--link{position:absolute;right:-6px}.hy-content-list-item--link a{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;text-decoration:none}.hy-content-list-item--link a .label{font-size:1rem;line-height:16px;font-weight:700;color:var(--link-blue);letter-spacing:-0.5px;line-height:16px;margin-right:8px;text-align:right}.hy-content-list-item--link a .icon-wrapper{background-color:var(--brand-main-light);z-index:10}.hy-content-list-item--link a .icon-wrapper .icon{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);position:relative;overflow:hidden}.hy-content-list-item--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:10.29px}.hy-content-list-item.row .hy-content-list-item--link{bottom:-60px;padding-bottom:12px}@media (min-width: 30rem){.hy-content-list-item.row .hy-content-list-item--link{bottom:0;padding-bottom:0}}.hy-content-list-item.row .hy-content-list-item--tags{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap}@media (min-width: 60rem){.hy-content-list-item.row .hy-content-list-item--tags{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding-right:200px}}.hy-content-list-item.grid .hy-content-list-item--link{bottom:-60px;padding-bottom:12px}.hy-content-list-item.grid .hy-content-list-item--tags{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap}';let c={enter:"Enter"};const m=class{constructor(i){t(this,i);this.variant=a.default;this.stateVariant=r.default;this.courseCode=undefined;this.courseName=undefined;this.isCancelled=undefined;this.cancelledLabel="Cancelled";this.courseCredits=undefined;this.courseTags=undefined;this.courseStartDate=undefined;this.courseEndDate=undefined;this.formattedTimeRange=undefined;this.courseStudyFormat=undefined;this.courseOrganisation=undefined;this.courseEnrollmentLink=undefined;this.courseTeachingLanguage=undefined;this.courseLinkLabel=undefined}async componentWillLoad(){this._courseTags=await o(this.courseTags)}handleKeyDown(t){const i=t.code;if(i==c.enter){let t=this.el;window.open(t.dataset.location,"_blank","noopener")}}render(){const t=[this.variant,"hy-content-list-item"].join(" ");const e="_blank";const n="Link points outside the current website.";const a=["hy-content-list-item--item-name",`hy-content-list-item--item-name--${this.stateVariant}`].join(" ");const r=["cancelled",`cancelled--${this.stateVariant}`].join(" ");return[i("div",{class:t,tabindex:"0"},i("div",{class:a},this.courseName),i("div",{class:"hy-content-list-item--metadata"},this.isCancelled&&i("div",{class:r},i("span",null,this.cancelledLabel)),i("div",{class:"hy-content-list-item--metadata--item hy-content-list-item--metadata--item--first"},i("span",null,this.formattedTimeRange)),this.courseOrganisation?[i("div",{class:"hy-content-list-item--metadata--item"},i("span",null,this.courseStudyFormat)),i("div",{class:"hy-content-list-item--metadata--item hy-content-list-item--metadata--item--last"},i("span",null,this.courseOrganisation))]:[i("div",{class:"hy-content-list-item--metadata--item hy-content-list-item--metadata--item--last"},i("span",null,this.courseStudyFormat))]),this._courseTags&&this._courseTags.length>0&&i("div",{class:"hy-content-list-item--tags"},this._courseTags.map((t=>i("hy-tag",null,t.name)))),this.isCancelled&&i("div",{class:"cancelled mobile"},i("span",null,this.cancelledLabel)),i("div",{class:"hy-content-list-item--link"},i("a",{href:this.courseEnrollmentLink,target:e,"aria-label":n,class:"hy-content-list-item--link--link",tabindex:"-1"},i("span",{class:"label"},this.courseLinkLabel),i("span",{class:"icon-wrapper"},i("div",{class:"icon"},i("hy-icon",{icon:"hy-icon-arrow-to-right",size:40}))))))]}get el(){return n(this)}};m.style=d;export{s as hy_content_list,m as hy_content_list_item};
+//# sourceMappingURL=hy-content-list_2.entry.js.map

package/dist/huds-lib/hy-content-list_2.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["hyContentListCss","HyContentList","this","variant","CourseVariants","default","CourseStateVariants","dataWatcher","data","_dataItems","JSON","parse","componentWillLoad","dataItems","handleCardClick","e","id","preventDefault","card","el","querySelector","window","open","dataset","location","async","hyMainDiv","closest","classList","contains","headerstyle","renderItems","courseRealisations","length","forEach","item","courseObject","stringify","courseListType","row","grid","courseProperty","courseItem","courseCode","courseCredits","realisations","realisationProperty","realizationItem","courseRealisationName","courseRealisationFullName","creditsLabel","courseStudyFormat","courseCancelled","courseStartDate","courseEndDate","formattedTimeRange","courseEnrollmentLink","courseTeachingLanguage","courseOrganisation","courseTags","tags","z","tagItem","name","push","courseTagsJSON","contentListItemClassAttributes","join","h","class","courseStateVariant","cancelledLabel","linkLabel","onClick","render","classAttributes","classAlertAttributes","classAlertLabelAttributes","Host","icon","size","noResultLabel","hyContentListItemCss","keys","enter","HyContentLstItem","_courseTags","jsonParserWorker","handleKeyDown","event","key","code","target","ariaLabel","classItemName","stateVariant","classItemCancelled","tabindex","courseName","isCancelled","map","x","href","courseLinkLabel"],"sources":["./src/components/hy-content-lists/hy-content-list/hy-content-list.scss?tag=hy-content-list","./src/components/hy-content-lists/hy-content-list/hy-content-list.tsx","./src/components/hy-content-lists/hy-content-list-item/hy-content-list-item.scss?tag=hy-content-list-item","./src/components/hy-content-lists/hy-content-list-item/hy-content-list-item.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-content-list {\n  display: flex;\n  font-family: var(--main-font-family);\n  flex-wrap: wrap;\n\n  &--no-result {\n    align-items: center;\n    display: flex;\n  }\n  &--alert {\n    margin-right: 6px;\n    svg {\n      fill: var(--grayscale-dark);\n    }\n    @include breakpoint($xlarge) {\n      svg {\n        height: 18px;\n        width: 18px;\n      }\n    }\n    &--large {\n      @include breakpoint($overwide) {\n        svg {\n          height: 18px;\n          width: 18px;\n        }\n      }\n    }\n  }\n\n  &--alert-label {\n    font-family: var(--main-font-family);\n    @include font-size(15px, 22px);\n    color: var(--grayscale-dark);\n    font-style: italic;\n    letter-spacing: 0;\n\n    @include breakpoint($narrow) {\n      @include font-size(16px, 24px);\n    }\n    @include breakpoint($xlarge) {\n      @include font-size(17px, 26px);\n    }\n    &--large {\n      @include breakpoint($overwide) {\n        @include font-size(17px, 26px);\n      }\n    }\n  }\n}\n\n.hy-content-list.row {\n  flex-direction: column;\n}\n\n.hy-content-list.grid {\n  flex-direction: row;\n}\n","import {CourseStateVariants, CourseVariants} from \"../../../utils/utils\";\nimport {Component, ComponentInterface, Element, h, Host, Prop, State, Watch} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-content-list\",\n  styleUrl: \"hy-content-list.scss\",\n  shadow: false,\n})\nexport class HyContentList implements ComponentInterface {\n  @Prop() linkLabel: string = \"Go to course page\";\n  @Prop() noResultLabel: string = \"No courses scheduled at the moment\";\n  @Prop() creditsLabel: string = \"cr\";\n  @Prop() cancelledLabel: string = \"Cancelled\";\n  @Prop() dataItems: string;\n  @Prop() headerstyle: string = \"common\";\n  @Prop() courseStateVariant: CourseStateVariants = CourseStateVariants.default;\n  private _dataItems: [];\n  private variant: CourseVariants = CourseVariants.default;\n  @State() courseRealisations: Array<object> = [];\n  @Element() el: HTMLElement;\n  /**\n   * Data for links to be displayed.\n   */\n\n  @Watch(\"dataItems\") dataWatcher(data: [] | string) {\n    this._dataItems = typeof data === \"string\" ? JSON.parse(data) : data;\n  }\n\n  componentWillLoad() {\n    this.dataWatcher(this.dataItems);\n  }\n\n  handleCardClick(e, id) {\n    e.preventDefault();\n    let card = this.el.querySelector(`#${id}`) as HTMLElement;\n\n    if (card) {\n      window.open(card.dataset.location, \"_blank\");\n    }\n  }\n\n  async componentDidLoad() {\n    let hyMainDiv = this.el.closest(\".hy-main\");\n    if (hyMainDiv) {\n      if (!hyMainDiv.classList.contains(\"with-sidebar\")) {\n        this.headerstyle = \"large\";\n      }\n    }\n  }\n\n  renderItems() {\n    let courseRealisations = [];\n    if (this._dataItems && this._dataItems.length > 0) {\n      this._dataItems.forEach((item) => {\n        const courseObject = JSON.parse(JSON.stringify(item));\n\n        const courseListType = courseObject[\"courseListType\"];\n        this.variant = courseListType == \"list\" ? CourseVariants.row : CourseVariants.grid;\n\n        for (const courseProperty in courseObject) {\n          if (courseProperty == \"courseListType\") continue;\n\n          const courseItem = courseObject[courseProperty];\n          const courseCode = courseItem[\"code\"];\n          const courseCredits = courseItem[\"credits\"];\n\n          // Course realisations.\n          if (courseItem[\"realisations\"]) {\n            const realisations = JSON.parse(JSON.stringify(courseItem[\"realisations\"]));\n            for (const realisationProperty in realisations) {\n              const realizationItem = realisations[realisationProperty];\n              const courseRealisationName = realizationItem[\"name\"];\n              const courseRealisationFullName = courseRealisationName + \", \" + courseCredits + \" \" + this.creditsLabel;\n              const courseStudyFormat = realizationItem[\"studyFormat\"];\n              const courseCancelled = realizationItem[\"cancelled\"];\n              const courseStartDate = realizationItem[\"startDate\"];\n              const courseEndDate = realizationItem[\"endDate\"];\n              const formattedTimeRange = realizationItem[\"formattedTimeRange\"];\n              const courseEnrollmentLink = realizationItem[\"enrolmentLink\"];\n              const courseTeachingLanguage = realizationItem[\"teachingLanguage\"];\n              const courseOrganisation = realizationItem[\"organisation\"];\n\n              let courseTags = [];\n              if (realizationItem[\"tags\"]) {\n                let tags = JSON.parse(JSON.stringify(realizationItem[\"tags\"]));\n                for (let z in tags) {\n                  let tagItem = {name: tags[z]};\n                  courseTags.push(tagItem);\n                }\n              }\n              const courseTagsJSON = JSON.stringify(courseTags);\n\n              const contentListItemClassAttributes = [\"item\", this.variant].join(\" \");\n\n              courseRealisations.push(\n                <hy-content-list-item\n                  id={realisationProperty}\n                  class={contentListItemClassAttributes}\n                  variant={this.variant}\n                  state-variant={this.courseStateVariant}\n                  course-code={courseCode}\n                  course-name={courseRealisationFullName}\n                  is-cancelled={courseCancelled}\n                  cancelled-label={this.cancelledLabel}\n                  course-credits={courseCredits}\n                  course-tags={courseTagsJSON}\n                  course-start-date={courseStartDate}\n                  course-end-date={courseEndDate}\n                  formatted-time-range={formattedTimeRange}\n                  course-study-format={courseStudyFormat}\n                  course-organisation={courseOrganisation}\n                  course-enrollment-link={courseEnrollmentLink}\n                  course-teaching-language={courseTeachingLanguage}\n                  course-link-label={this.linkLabel}\n                  data-location={courseEnrollmentLink}\n                  onClick={(e) => this.handleCardClick(e, realisationProperty)}\n                  //onKeyDown={() => this.handleKeyDown(window.event, realisationProperty)}\n                ></hy-content-list-item>\n              );\n            }\n          }\n        }\n      });\n    }\n\n    return courseRealisations;\n  }\n\n  render() {\n    const classAttributes = [this.variant, \"hy-content-list\"].join(\" \");\n    const classAlertAttributes = [\"hy-content-list--alert\", `hy-content-list--alert--${this.headerstyle}`].join(\" \");\n    const classAlertLabelAttributes = [\n      \"hy-content-list--alert-label\",\n      `hy-content-list--alert-label--${this.headerstyle}`,\n    ].join(\" \");\n\n    this.courseRealisations = this.renderItems();\n    if (this.courseRealisations && this.courseRealisations.length > 0) {\n      return (\n        <Host>\n          <div class={classAttributes}>{this.courseRealisations}</div>\n        </Host>\n      );\n    } else {\n      return (\n        <Host>\n          <div class={classAttributes}>\n            <div class=\"hy-content-list--no-result\">\n              <span class={classAlertAttributes}>\n                <hy-icon icon={\"hy-icon-info\"} size={16} />\n              </span>\n              <span class={classAlertLabelAttributes}>{this.noResultLabel}</span>\n            </div>\n          </div>\n        </Host>\n      );\n    }\n  }\n}\n","hy-content-list-item {\n  background: radial-gradient(circle, #f8f8f8 0%, #f5f5f5 100%);\n  cursor: pointer;\n  display: flex;\n  margin-bottom: 16px;\n  position: relative;\n  //width: 100%;\n\n  @include breakpoint($narrow) {\n    margin-bottom: 24px;\n  }\n}\nhy-content-list-item[variant=\"row\"],\nhy-content-list-item.row {\n  max-width: 100%;\n  padding: 21px 0 60px 12px;\n  width: 100%;\n\n  @include breakpoint($narrow) {\n    padding: 21px 0 12px 24px;\n  }\n  @include breakpoint($wide) {\n    margin-bottom: 16px;\n  }\n}\nhy-content-list-item.grid {\n  max-width: 100%;\n  padding: 21px 0 60px 12px;\n  width: 100%;\n\n  @include breakpoint($narrow) {\n    margin-right: var(--gutter-medium);\n    max-width: calc(((100% - #{var(--gutter-medium)} * 11) / 12) * 6 + #{var(--gutter-medium)} * 5);\n    padding: 21px 0 60px 12px;\n    width: calc(((100% - #{var(--gutter-medium)} * 11) / 12) * 6 + #{var(--gutter-medium)} * 5);\n  }\n  @include breakpoint($wide) {\n    margin-bottom: 27px;\n    margin-right: var(--gutter-wide);\n    max-width: calc(((100% - #{var(--gutter-wide)} * 11) / 12) * 4 + #{var(--gutter-wide)} * 3);\n    width: calc(((100% - #{var(--gutter-wide)} * 11) / 12) * 4 + #{var(--gutter-wide)} * 3);\n  }\n  @include breakpoint($extrawide) {\n    margin-bottom: 32px;\n    margin-right: var(--gutter-extrawide);\n    max-width: calc(((100% - #{var(--gutter-extrawide)} * 11) / 12) * 4 + #{var(--gutter-extrawide)} * 3);\n    width: calc(((100% - #{var(--gutter-extrawide)} * 11) / 12) * 4 + #{var(--gutter-extrawide)} * 3);\n  }\n}\n\nhy-content-list-item.grid:nth-of-type(2n + 0) {\n  @include breakpoint($narrow) {\n    margin-right: 0;\n  }\n  @include breakpoint($wide) {\n    margin-right: var(--gutter-wide);\n  }\n  @include breakpoint($extrawide) {\n    margin-right: var(--gutter-extrawide);\n  }\n}\n\nhy-content-list-item.grid:nth-of-type(3n + 0) {\n  @include breakpoint($wide) {\n    margin-right: 0;\n  }\n}\n\n.hy-content-list-item {\n  font-family: var(--main-font-family);\n  position: relative;\n  width: 100%;\n\n  a {\n    text-decoration: none;\n  }\n\n  &--container {\n    cursor: pointer;\n  }\n\n  &--item-name {\n    color: var(--link-blue);\n    @include font-size(20px, 24px);\n    @include font-weight($bold);\n    letter-spacing: -0.6px;\n    margin-bottom: 16px;\n    word-break: break-word;\n\n    &--past-courses {\n      color: var(--grayscale-dark);\n    }\n  }\n\n  &--metadata {\n    @include font-size(14px, 16px);\n    @include font-weight($semibold);\n\n    color: var(--grayscale-black);\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    letter-spacing: -0.44px;\n    line-height: 16px;\n    margin-bottom: 19px;\n    padding-bottom: 0;\n\n    &--item {\n      padding-bottom: 6px;\n    }\n\n    @include breakpoint($narrow) {\n      padding-bottom: 1rem;\n    }\n    @include breakpoint($extrawide) {\n      padding-bottom: 0;\n    }\n\n    &--item:after {\n      content: \"|\";\n      padding: 0 8px;\n    }\n    &--item--last:after {\n      content: \" \";\n    }\n  }\n\n  .cancelled {\n    span {\n      @include font-size(12px, 12px);\n      @include font-weight($bold);\n      background-color: var(--additional-red-light);\n      color: var(--grayscale-white);\n      letter-spacing: -0.5px;\n      padding: 6px 8px;\n      text-transform: uppercase;\n    }\n    &--past-courses {\n      span {\n        background-color: var(--grayscale-dark);\n      }\n    }\n\n    &:not(.mobile) {\n      display: none;\n    }\n\n    &.mobile {\n      bottom: -50px;\n      display: block;\n      margin: 0;\n      padding-bottom: 12px;\n      position: absolute;\n    }\n\n    @include breakpoint($narrow) {\n      margin-right: 8px;\n\n      &.mobile {\n        display: none;\n      }\n      &:not(.mobile) {\n        display: block;\n      }\n    }\n  }\n\n  &--link {\n    position: absolute;\n    right: -6px;\n\n    a {\n      align-items: center;\n      display: flex;\n      flex-direction: row;\n      text-decoration: none;\n\n      .label {\n        @include font-size(16px, 16px);\n        @include font-weight($bold);\n        color: var(--link-blue);\n        letter-spacing: -0.5px;\n        line-height: 16px;\n        margin-right: 8px;\n        text-align: right;\n      }\n\n      .icon-wrapper {\n        background-color: var(--brand-main-light);\n        z-index: 10;\n\n        .icon {\n          transform: rotate(-45deg);\n          position: relative;\n          overflow: hidden;\n\n          svg {\n            background-color: transparent;\n            box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);\n            fill: var(--grayscale-white);\n            padding: 10.29px;\n          }\n        }\n      }\n    }\n  }\n}\n\n.hy-content-list-item.row {\n  .hy-content-list-item--link {\n    bottom: -60px;\n    padding-bottom: 12px;\n\n    @include breakpoint($narrow) {\n      bottom: 0;\n      padding-bottom: 0;\n    }\n  }\n\n  .hy-content-list-item--tags {\n    display: flex;\n    flex-direction: column;\n    flex-wrap: wrap;\n    @include breakpoint($wide) {\n      flex-direction: row;\n      padding-right: 200px;\n    }\n  }\n}\n\n.hy-content-list-item.grid {\n  .hy-content-list-item--link {\n    bottom: -60px;\n    padding-bottom: 12px;\n  }\n\n  .hy-content-list-item--tags {\n    display: flex;\n    flex-direction: column;\n    flex-wrap: wrap;\n  }\n}\n","export interface TagValue {\n  name: string;\n}\n\nimport {Component, Element, h, Listen, Prop} from \"@stencil/core\";\nimport {CourseStateVariants, CourseVariants} from \"../../../utils/utils\";\nimport {jsonParserWorker} from \"../../../global/globalScript\";\n\nlet keys = {\n  enter: \"Enter\",\n};\n\n@Component({\n  tag: \"hy-content-list-item\",\n  styleUrl: \"hy-content-list-item.scss\",\n  shadow: false,\n})\nexport class HyContentLstItem {\n  @Prop() variant: CourseVariants = CourseVariants.default;\n  @Prop() stateVariant: CourseStateVariants = CourseStateVariants.default;\n  @Prop() courseCode?: string;\n  @Prop() courseName?: string;\n  @Prop() isCancelled?: boolean;\n  @Prop() cancelledLabel: string = \"Cancelled\";\n  @Prop() courseCredits?: string;\n  private _courseTags: TagValue[];\n  @Prop() courseTags: TagValue[] | string;\n  @Prop() courseStartDate?: string;\n  @Prop() courseEndDate?: string;\n  @Prop() formattedTimeRange?: string;\n  @Prop() courseStudyFormat?: string;\n  @Prop() courseOrganisation?: string;\n  @Prop() courseEnrollmentLink?: string;\n  @Prop() courseTeachingLanguage?: string;\n  @Prop() courseLinkLabel?: string;\n\n  @Element() el: HTMLElement;\n\n  async componentWillLoad() {\n    this._courseTags = await jsonParserWorker(this.courseTags);\n  }\n\n  @Listen(\"keydown\")\n  handleKeyDown(event) {\n    const key = (event as KeyboardEvent).code;\n    if (key == keys.enter) {\n      let card = this.el;\n      window.open(card.dataset.location, \"_blank\", \"noopener\");\n    }\n  }\n\n  render() {\n    const classAttributes = [this.variant, \"hy-content-list-item\"].join(\" \");\n\n    const target = \"_blank\";\n    const ariaLabel = \"Link points outside the current website.\";\n\n    const classItemName = [\n      \"hy-content-list-item--item-name\",\n      `hy-content-list-item--item-name--${this.stateVariant}`,\n    ].join(\" \");\n    const classItemCancelled = [\"cancelled\", `cancelled--${this.stateVariant}`].join(\" \");\n\n    return [\n      <div class={classAttributes} tabindex=\"0\">\n        <div class={classItemName}>{this.courseName}</div>\n        <div class=\"hy-content-list-item--metadata\">\n          {this.isCancelled && (\n            <div class={classItemCancelled}>\n              <span>{this.cancelledLabel}</span>\n            </div>\n          )}\n          <div class=\"hy-content-list-item--metadata--item hy-content-list-item--metadata--item--first\">\n            <span>{this.formattedTimeRange}</span>\n          </div>\n          {this.courseOrganisation\n            ? [\n                <div class=\"hy-content-list-item--metadata--item\">\n                  <span>{this.courseStudyFormat}</span>\n                </div>,\n                <div class=\"hy-content-list-item--metadata--item hy-content-list-item--metadata--item--last\">\n                  <span>{this.courseOrganisation}</span>\n                </div>,\n              ]\n            : [\n                <div class=\"hy-content-list-item--metadata--item hy-content-list-item--metadata--item--last\">\n                  <span>{this.courseStudyFormat}</span>\n                </div>,\n              ]}\n        </div>\n        {this._courseTags && this._courseTags.length > 0 && (\n          <div class=\"hy-content-list-item--tags\">\n            {this._courseTags.map((x) => {\n              return <hy-tag>{x.name}</hy-tag>;\n            })}\n          </div>\n        )}\n        {this.isCancelled && (\n          <div class=\"cancelled mobile\">\n            <span>{this.cancelledLabel}</span>\n          </div>\n        )}\n        <div class=\"hy-content-list-item--link\">\n          <a\n            href={this.courseEnrollmentLink}\n            target={target}\n            aria-label={ariaLabel}\n            class=\"hy-content-list-item--link--link\"\n            tabindex=\"-1\"\n          >\n            <span class=\"label\">{this.courseLinkLabel}</span>\n            <span class=\"icon-wrapper\">\n              <div class=\"icon\">\n                <hy-icon icon={\"hy-icon-arrow-to-right\"} size={40} />\n              </div>\n            </span>\n          </a>\n        </div>\n      </div>,\n    ];\n  }\n}\n"],"mappings":"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"}

package/dist/huds-lib/hy-crisis-banner.entry.js

@@ -0,0 +1,2 @@
+import{r as i,h as n,H as e}from"./index-f84f2a7d.js";const r=":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-crisis-banner{-webkit-box-shadow:inset 0 -20px 20px -20px rgba(14, 104, 139, 0.1);box-shadow:inset 0 -20px 20px -20px rgba(14, 104, 139, 0.1);display:block}.hy-crisis-banner__container{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0 auto;max-width:1216px}.hy-crisis-banner__indicator{background-color:var(--additional-yellow-light);-ms-flex-negative:0;flex-shrink:0}@media (min-width: 30rem){.hy-crisis-banner__indicator{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}}.hy-crisis-banner__indicator-icon{margin-left:8px;margin-right:8px;margin-top:10px}@media (min-width: 30rem){.hy-crisis-banner__indicator-icon{margin-left:10px;margin-right:10px;margin-top:0}}.hy-crisis-banner__indicator-icon svg{height:22px;width:22px}.hy-crisis-banner__indicator-icon svg circle{fill:var(--grayscale-white)}.hy-crisis-banner__indicator-icon svg path{fill:var(--additional-yellow-light)}.hy-crisis-banner__content-wrapper{-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;padding:12px 0 12px 12px}@media (min-width: 30rem){.hy-crisis-banner__content-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;padding:14px 0 14px 14px}}@media (min-width: 60rem){.hy-crisis-banner__content-wrapper{padding:20px 0 20px 20px}}@media (min-width: 30rem){.hy-crisis-banner__content{max-width:61.22%;width:100%}}@media (min-width: 60rem){.hy-crisis-banner__content{max-width:65.83%}}@media (min-width: 75.0625rem){.hy-crisis-banner__content{max-width:65.79%}}.hy-crisis-banner__title{font-size:0.875rem;line-height:16px;font-weight:700;color:var(--grayscale-black);font-family:var(--main-font-family);letter-spacing:-0.35px;margin:0 0 2px 0}@media (min-width: 1601px){.hy-crisis-banner__title{font-size:1rem;line-height:18px;letter-spacing:-0.4px}}.hy-crisis-banner__description{font-size:0.75rem;line-height:14px;color:var(--grayscale-dark);font-family:var(--main-font-family);letter-spacing:-0.35px;margin:0}@media (min-width: 30rem){.hy-crisis-banner__description{font-size:0.875rem;line-height:16px}}.hy-crisis-banner__description p{margin-top:0}.hy-crisis-banner__description p:last-of-type{margin-bottom:0}.hy-crisis-banner__link{font-size:0.875rem;line-height:16px;font-weight:600;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--brand-main-light);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);letter-spacing:-0.5px;margin:12px 0 0;overflow:hidden;text-decoration:none}@media (min-width: 30rem){.hy-crisis-banner__link{-ms-flex-negative:0;flex-shrink:0;margin-left:24px;margin-right:32px;margin-top:0;text-align:right}}@media (min-width: 75.0625rem){.hy-crisis-banner__link{margin-left:32px}}@media (min-width: 1601px){.hy-crisis-banner__link{font-size:1rem;line-height:18px}}.hy-crisis-banner__link:hover,.hy-crisis-banner__link:focus{color:var(--brand-main);text-decoration:underline}.hy-crisis-banner__link:hover .hy-crisis-banner__link-icon svg,.hy-crisis-banner__link:focus .hy-crisis-banner__link-icon svg{fill:var(--brand-main)}.hy-crisis-banner__link-icon{margin-left:4px}@media (min-width: 30rem){.hy-crisis-banner__link-icon{margin-left:8px}}@media (min-width: 75.0625rem){.hy-crisis-banner__link-icon{margin-left:12px}}.hy-crisis-banner__link-icon svg{fill:var(--brand-main-light);height:12px;width:12px}@media (min-width: 30rem){.hy-crisis-banner__link-icon svg{height:14px;width:14px}}@media (min-width: 1601px){.hy-crisis-banner__link-icon svg{height:16px;width:16px}}";const a=class{constructor(n){i(this,n);this.bannerTitle=undefined;this.bannerDescription=undefined;this.linkTitle=undefined;this.linkUrl=undefined}render(){return n(e,{class:"hy-crisis-banner",role:"alert"},n("div",{class:"hy-crisis-banner__container"},n("div",{class:"hy-crisis-banner__indicator"},n("hy-icon",{class:"hy-crisis-banner__indicator-icon",icon:"hy-icon-alert"})),n("div",{class:"hy-crisis-banner__content-wrapper"},n("div",{class:"hy-crisis-banner__content"},n("h3",{class:"hy-crisis-banner__title"},this.bannerTitle),this.bannerDescription&&n("div",{class:"hy-crisis-banner__description",innerHTML:this.bannerDescription})),this.linkUrl&&n("a",{class:"hy-crisis-banner__link",href:this.linkUrl},this.linkTitle,n("hy-icon",{class:"hy-crisis-banner__link-icon",icon:"hy-icon-arrow-to-right"})))))}};a.style=r;export{a as hy_crisis_banner};
+//# sourceMappingURL=hy-crisis-banner.entry.js.map

package/dist/huds-lib/hy-crisis-banner.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["hyCrisisBannerCss","HyCrisisBanner","render","h","Host","class","role","icon","this","bannerTitle","bannerDescription","innerHTML","linkUrl","href","linkTitle"],"sources":["./src/components/hy-crisis-banner/hy-crisis-banner.scss?tag=hy-crisis-banner","./src/components/hy-crisis-banner/hy-crisis-banner.tsx"],"sourcesContent":[".hy-crisis-banner {\n  box-shadow: inset 0 -20px 20px -20px rgba(14, 104, 139, 0.1);\n  display: block;\n}\n\n.hy-crisis-banner__container {\n  display: flex;\n  margin: 0 auto;\n  max-width: 1216px;\n}\n\n.hy-crisis-banner__indicator {\n  background-color: var(--additional-yellow-light);\n  flex-shrink: 0;\n\n  @include breakpoint($narrow) {\n    align-items: center;\n    display: flex;\n    justify-content: center;\n  }\n}\n\n.hy-crisis-banner__indicator-icon {\n  margin-left: 8px;\n  margin-right: 8px;\n  margin-top: 10px;\n\n  @include breakpoint($narrow) {\n    margin-left: 10px;\n    margin-right: 10px;\n    margin-top: 0;\n  }\n\n  svg {\n    height: 22px;\n    width: 22px;\n\n    circle {\n      fill: var(--grayscale-white);\n    }\n\n    path {\n      fill: var(--additional-yellow-light);\n    }\n  }\n}\n\n.hy-crisis-banner__content-wrapper {\n  align-items: baseline;\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  padding: 12px 0 12px 12px;\n\n  @include breakpoint($narrow) {\n    align-items: center;\n    flex-direction: row;\n    justify-content: space-between;\n    padding: 14px 0 14px 14px;\n  }\n\n  @include breakpoint($wide) {\n    padding: 20px 0 20px 20px;\n  }\n}\n\n.hy-crisis-banner__content {\n  @include breakpoint($narrow) {\n    max-width: 61.22%;\n    width: 100%;\n  }\n\n  @include breakpoint($wide) {\n    max-width: 65.83%;\n  }\n\n  @include breakpoint($extrawide) {\n    max-width: 65.79%;\n  }\n}\n\n.hy-crisis-banner__title {\n  @include font-size(14px, 16px);\n  @include font-weight($bold);\n  color: var(--grayscale-black);\n  font-family: var(--main-font-family);\n  letter-spacing: -0.35px;\n  margin: 0 0 2px 0;\n\n  @include breakpoint($xlarge) {\n    @include font-size(16px, 18px);\n    letter-spacing: -0.4px;\n  }\n}\n\n.hy-crisis-banner__description {\n  @include font-size(12px, 14px);\n  color: var(--grayscale-dark);\n  font-family: var(--main-font-family);\n  letter-spacing: -0.35px;\n  margin: 0;\n\n  @include breakpoint($narrow) {\n    @include font-size(14px, 16px);\n  }\n\n  p {\n    margin-top: 0;\n\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n  }\n}\n\n.hy-crisis-banner__link {\n  @include font-size(14px, 16px);\n  @include font-weight($semibold);\n  align-items: center;\n  color: var(--brand-main-light);\n  display: inline-flex;\n  font-family: var(--main-font-family);\n  letter-spacing: -0.5px;\n  margin: 12px 0 0;\n  overflow: hidden;\n  text-decoration: none;\n\n  @include breakpoint($narrow) {\n    flex-shrink: 0;\n    margin-left: 24px;\n    margin-right: 32px;\n    margin-top: 0;\n    text-align: right;\n  }\n\n  @include breakpoint($extrawide) {\n    margin-left: 32px;\n  }\n  @include breakpoint($xlarge) {\n    @include font-size(16px, 18px);\n  }\n\n  &:hover,\n  &:focus {\n    color: var(--brand-main);\n    text-decoration: underline;\n\n    .hy-crisis-banner__link-icon svg {\n      fill: var(--brand-main);\n    }\n  }\n}\n\n.hy-crisis-banner__link-icon {\n  margin-left: 4px;\n\n  @include breakpoint($narrow) {\n    margin-left: 8px;\n  }\n\n  @include breakpoint($extrawide) {\n    margin-left: 12px;\n  }\n\n  svg {\n    fill: var(--brand-main-light);\n    height: 12px;\n    width: 12px;\n\n    @include breakpoint($narrow) {\n      height: 14px;\n      width: 14px;\n    }\n\n    @include breakpoint($xlarge) {\n      height: 16px;\n      width: 16px;\n    }\n  }\n}\n","import {Component, Host, h, Prop} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-crisis-banner\",\n  styleUrl: \"hy-crisis-banner.scss\",\n  shadow: false,\n})\nexport class HyCrisisBanner {\n  @Prop() bannerTitle: string;\n  @Prop() bannerDescription?: string;\n  @Prop() linkTitle?: string;\n  @Prop() linkUrl?: string;\n\n  render() {\n    return (\n      <Host class=\"hy-crisis-banner\" role=\"alert\">\n        <div class=\"hy-crisis-banner__container\">\n          <div class=\"hy-crisis-banner__indicator\">\n            <hy-icon class={\"hy-crisis-banner__indicator-icon\"} icon={\"hy-icon-alert\"} />\n          </div>\n          <div class=\"hy-crisis-banner__content-wrapper\">\n            <div class=\"hy-crisis-banner__content\">\n              <h3 class=\"hy-crisis-banner__title\">{this.bannerTitle}</h3>\n              {this.bannerDescription && (\n                <div class=\"hy-crisis-banner__description\" innerHTML={this.bannerDescription}></div>\n              )}\n            </div>\n            {this.linkUrl && (\n              <a class=\"hy-crisis-banner__link\" href={this.linkUrl}>\n                {this.linkTitle}\n                <hy-icon class={\"hy-crisis-banner__link-icon\"} icon={\"hy-icon-arrow-to-right\"} />\n              </a>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sDAAA,MAAMA,EAAoB,6mK,MCObC,EAAc,M,qIAMzBC,SACE,OACEC,EAACC,EAAI,CAACC,MAAM,mBAAmBC,KAAK,SAClCH,EAAA,OAAKE,MAAM,+BACTF,EAAA,OAAKE,MAAM,+BACTF,EAAA,WAASE,MAAO,mCAAoCE,KAAM,mBAE5DJ,EAAA,OAAKE,MAAM,qCACTF,EAAA,OAAKE,MAAM,6BACTF,EAAA,MAAIE,MAAM,2BAA2BG,KAAKC,aACzCD,KAAKE,mBACJP,EAAA,OAAKE,MAAM,gCAAgCM,UAAWH,KAAKE,qBAG9DF,KAAKI,SACJT,EAAA,KAAGE,MAAM,yBAAyBQ,KAAML,KAAKI,SAC1CJ,KAAKM,UACNX,EAAA,WAASE,MAAO,8BAA+BE,KAAM,8B"}