@itcenteratunihelsinki/huds-lib 0.8.43 → 0.8.44

package/components/hy-site-header.js

@@ -0,0 +1,369 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
+import { R as ResizeObserver } from './index2.js';
+import { M as MenuType, e as ColorVariant, S as SiteLogoSize } from './utils.js';
+import { j as jsonParserWorker } from './globalScript.js';
+import { d as defineCustomElement$9 } from './icon.js';
+import { d as defineCustomElement$8 } from './menu-language.js';
+import { d as defineCustomElement$7 } from './menu-language-item.js';
+import { d as defineCustomElement$6 } from './hy-menu-main-group2.js';
+import { d as defineCustomElement$5 } from './paragraph-text.js';
+import { d as defineCustomElement$4 } from './hy-search-field2.js';
+import { d as defineCustomElement$3 } from './site-logo.js';
+import { d as defineCustomElement$2 } from './site-search.js';
+
+const siteHeaderCss = ":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-site-header{background-color:var(--grayscale-white);z-index:100;border-bottom:2px solid var(--grayscale-dark);-webkit-transform:none;transform:none}.hy-site-header:not(.is-at-top){top:0;-webkit-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out}@media (min-width: 75.0625rem){.hy-site-header{border-bottom:1px solid var(--grayscale-black);margin:0 auto;max-width:120.0625rem}}.hy-site-header.hy-site-header--sticky-active{-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;-webkit-box-shadow:rgba(14, 104, 139, 0.2) 0 20px 20px -20px;box-shadow:rgba(14, 104, 139, 0.2) 0 20px 20px -20px}.hy-site-header.hy-site-header--sticky-visible{left:0;position:fixed;right:0;top:0;-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;-webkit-transition-delay:0.2s;transition-delay:0.2s}.hy-site-header.hy-site-header--sticky-visible.hy-site-header--mobile{-webkit-transform:none;transform:none}.hy-site-header.hy-site-header--sticky-visible.has-toolbar{top:39px}.hy-site-header.hy-site-header--sticky-visible.has-toolbar--large{top:79px}.hy-site-header.hy-site-header--sticky-hidden{top:0}@media (min-width: 75.0625rem){.hy-site-header.is-group hy-desktop-menu-links,.hy-site-header.is-group .hy-site-header__menu-desktop{margin-left:-10px}}.hy-site-header__container{padding:0 8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@media (min-width: 75.0625rem){.hy-site-header__container{padding:0 32px}}.hy-site-header__container.is-group{-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}@media (min-width: 75.0625rem){.hy-site-header__container.is-group{min-height:82px}}.hy-site-header__branding{padding:12px 0}@media (min-width: 75.0625rem){.hy-site-header__branding{padding:26px 0}}.hy-site-header__content-top .hy-site-header__branding{padding:8px 0}@media (min-width: 75.0625rem){.hy-site-header__content-top .hy-site-header__branding{padding:8px 0}}.hy-site-header__branding>p{font-size:0.75rem;line-height:14px;font-weight:400;font-family:var(--main-font-family);color:var(--grayscale-dark-text);letter-spacing:-0.1px;margin-bottom:4px;text-transform:uppercase}.hy-site-header__branding>p+a{min-height:auto}@media (min-width: 75.0625rem){.hy-site-header__branding>p{margin-bottom:8px}}.hy-site-header__branding>a{font-size:1rem;line-height:16px;font-weight:700;font-family:var(--main-font-family);color:var(--brand-main-nearly-black);letter-spacing:-0.6px;text-transform:uppercase;text-decoration:none;min-height:48px;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: 75.0625rem){.hy-site-header__branding>a{font-size:1.625rem;line-height:30px;letter-spacing:-0.8px;min-height:auto}}.hy-site-header__branding>a img{height:100%;max-height:48px}@media (min-width: 75.0625rem){.hy-site-header__branding>a img{-webkit-transform:translateY(-10px);transform:translateY(-10px)}}@media (min-width: 75.0625rem){.is-group:not(.is-research-group)>.hy-site-header__branding{margin-right:42px;padding-bottom:0;margin-bottom:-10px}}.hy-site-header__actions{display:inline-grid;gap:4px;grid-template-columns:repeat(3, auto);-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}@media (min-width: 1601px){.hy-site-header__actions{gap:16px}}.hy-site-header__menu-open-button{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:100%;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:44px;background-color:transparent;border:0;padding:0;margin:0}.hy-site-header__menu-open-button[aria-expanded=true]{font-size:1rem;line-height:18px;font-weight:700;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;border:none;color:var(--brand-main);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);height:auto;letter-spacing:-0.3px;margin-left:auto;margin-right:-16px;padding:16px;position:fixed;right:16px;top:12px;z-index:101;width:auto}.hy-site-header__menu-open-button[aria-expanded=true]:hover{cursor:pointer}.hy-site-header__menu-open-button[aria-expanded=true] hy-icon{margin-left:8px}.hy-site-header__menu-open-button[aria-expanded=true] hy-icon svg{fill:var(--brand-main)}.hy-site-header__donate-link{font-size:0.75rem;line-height:24px;font-weight:400;display:inline-grid;font-family:var(--main-font-family);-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:4px;grid-template-columns:repeat(2, auto);color:var(--brand-main-nearly-black);letter-spacing:-0.5px;padding:0;text-decoration:none}@media (min-width: 1601px){.hy-site-header__donate-link{font-size:0.875rem;line-height:24px}}.hy-site-header__donate-link:hover{color:var(--brand-main);cursor:pointer}.hy-site-header__donate-link:hover svg{fill:var(--brand-main)}.hy-site-header__donate-link:focus{outline:solid 2px var(--additional-yellow);outline-offset:2px}.hy-site-header__content-top .hy-site-header__donate-link{color:var(--grayscale-white)}.hy-site-header__content-top .hy-site-header__donate-link svg{fill:var(--grayscale-white)}.hy-site-header__content-top .hy-site-header__donate-link:hover{color:var(--grayscale-medium);cursor:pointer}.hy-site-header__content-top .hy-site-header__donate-link:hover svg{fill:var(--grayscale-medium)}.hy-site-header__content-top{background-color:var(--grayscale-black);border-bottom:2px solid rgba(0, 0, 0, 0.7);position:relative}.hy-backdrop{bottom:0;left:0;position:fixed;right:0;top:0;visibility:hidden}.hy-backdrop.is-active{background-color:rgba(0, 0, 0, 0.4);-webkit-transition:background-color 300ms;transition:background-color 300ms;visibility:visible;z-index:99}.hy-backdrop.is-active-top{background-color:rgba(0, 0, 0, 0.4);-webkit-transition:background-color 300ms;transition:background-color 300ms;visibility:visible;z-index:98}.hy-site-header__panel{background:var(--grayscale-white);bottom:0;overflow:hidden;position:fixed;right:0;top:0;visibility:visible;width:90%;z-index:100}@media (min-width: 30rem){.hy-site-header__panel{width:400px}}.hy-site-header__panel[aria-hidden=true]{visibility:hidden;padding:0;width:0}";
+
+let clickTimer = null;
+let clickTimeout = null;
+const SiteHeader = /*@__PURE__*/ proxyCustomElement(class SiteHeader extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.headerScrollUp = createEvent(this, "headerScrollUp", 7);
+    this.headerScrollDown = createEvent(this, "headerScrollDown", 7);
+    this.menuMobileToggled = createEvent(this, "menuMobileToggled", 7);
+    this.menuMobileTopToggled = createEvent(this, "menuMobileTopToggled", 7);
+    this.isGroup = false;
+    this.isLuomusGroup = false;
+    this.isBetaGroup = false;
+    this.researchGroupLabel = "";
+    this.groupType = "";
+    this.groupLogoUrl = "";
+    this.dataMenuLanguage = undefined;
+    this.dataMenuDonate = undefined;
+    this.dataSiteHeaderLabels = undefined;
+    this.dataSiteSearchLabels = undefined;
+    this.logoUrl = undefined;
+    this.logoLabel = undefined;
+    this.siteLabel = undefined;
+    this.siteUrl = undefined;
+    this.showSearchLabel = true;
+    this.noSearch = false;
+    this.menuLabel = "Menu";
+    this.menuLabelOpen = undefined;
+    this.menuLabelClose = undefined;
+    this.menuType = null;
+    this.dataMainMenuLinks = undefined;
+    this.dataSearchTools = undefined;
+    this.isMobile = undefined;
+    this.isMenuOpen = false;
+    this.isDesktopMenuOpen = false;
+    this.isDesktopMenuDropdown = false;
+    this.isTopMenuOpen = false;
+    this.isBottomVisible = false;
+    this.isTopVisible = false;
+    this.lastScrollTop = 0;
+    this.delta = 50;
+    this.navbarHeight = 0;
+  }
+  // Listener for toggling mobile menu panel on or off.
+  mobileMenuToggle() {
+    this.isMenuOpen = !this.isMenuOpen;
+    this.menuMobileToggled.emit();
+    let bodyElement = document.getElementsByTagName("body")[0];
+    if (this.isMenuOpen) {
+      bodyElement.style.overflow = "hidden";
+    }
+    else {
+      bodyElement.style.overflow = "initial";
+    }
+  }
+  // Listener for toggling mobile menu top panel on or off.
+  mobileMenuTopToggle() {
+    this.isTopMenuOpen = !this.isTopMenuOpen;
+    this.menuMobileTopToggled.emit();
+  }
+  mainMenuToggled() {
+    this.isDesktopMenuOpen = !this.isDesktopMenuOpen;
+  }
+  handleScroll() {
+    this.headerScrollHandler();
+  }
+  headerScrollHandler() {
+    let topOffset = window.pageYOffset;
+    if (Math.abs(this.lastScrollTop - topOffset) <= this.delta) {
+      return;
+    }
+    if (topOffset > this.lastScrollTop && !this.isTopVisible) {
+      this.toggleStickyness(false);
+      this.headerScrollDown.emit();
+    }
+    // Scrolling up
+    if (topOffset < this.lastScrollTop && !this.isTopVisible) {
+      this.toggleStickyness();
+      this.headerScrollUp.emit();
+    }
+    // At the top of the page
+    if (this.isTopVisible) {
+      this.toggleStickyness(false);
+    }
+    this.lastScrollTop = topOffset;
+  }
+  toggleStickyness(toggleOn = true) {
+    const bodyElementClasses = document.querySelector("body").classList;
+    let hySiteHeader = this.el.querySelector(".hy-site-header");
+    if (!hySiteHeader)
+      return;
+    this.isTopVisible ? hySiteHeader.classList.add("is-at-top") : hySiteHeader.classList.remove("is-at-top");
+    if (toggleOn) {
+      hySiteHeader.classList.add("hy-site-header--sticky-active", "hy-site-header--sticky-visible");
+      hySiteHeader.classList.remove("hy-site-header--sticky-hidden");
+      !this.isBottomVisible && !this.isTopVisible && bodyElementClasses.add("sticky-active");
+      if (bodyElementClasses.contains("toolbar-horizontal")) {
+        hySiteHeader.classList.add("has-toolbar");
+        if (bodyElementClasses.contains("toolbar-tray-open")) {
+          hySiteHeader.classList.add("has-toolbar--large");
+        }
+      }
+    }
+    if (!toggleOn) {
+      hySiteHeader.classList.remove("hy-site-header--sticky-active", "hy-site-header--sticky-visible", "hy-site-header--sticky-hidden", "has-toolbar", "has-toolbar--large");
+      bodyElementClasses.remove("sticky-active");
+    }
+  }
+  componentDidLoad() {
+    // Set the browser resize observer to gather information about browser width.
+    this.ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        this.applySizeClasses(entry.contentRect.width);
+      }
+    });
+    this.ro.observe(document.body);
+    const topOptions = {
+      root: null,
+      rootMargin: "250px",
+      threshold: [0.0, 1.0],
+    };
+    this.topObserver = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.target.nodeName === "HEADER") {
+          this.isTopVisible = entry.isIntersecting;
+        }
+      });
+    }, topOptions);
+    const header = document.querySelector("header");
+    if (header) {
+      this.topObserver.observe(header);
+    }
+    const bottomOptions = {
+      root: null,
+      rootMargin: "0px",
+      threshold: [0.0, 1.0],
+    };
+    this.bottomObserver = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.target.nodeName === "HEADER") {
+          this.isTopVisible = entry.isIntersecting;
+        }
+      });
+    }, bottomOptions);
+    const footer = document.querySelector("hy-footer");
+    if (footer) {
+      this.bottomObserver.observe(footer);
+    }
+    // Pass the dataMenuLanguage prop to menu component.
+    this.el.children[0].setAttribute("data-menu-language", this.dataMenuLanguage);
+    this.navbarHeight = 120;
+    const body = document.querySelector("body");
+    body.style.setProperty("--nav-height", `${this.navbarHeight * 2}px`);
+  }
+  async componentWillLoad() {
+    // Check for site header labels and set them to variables accordingly.
+    if (this.dataSiteHeaderLabels) {
+      const labels = await jsonParserWorker(this.dataSiteHeaderLabels);
+      this.menuLabels = labels.menu_labels;
+      this.languageLabels = labels.language_labels;
+      this.searchLabels = labels.search_labels;
+      this.groupPages = labels.group_pages;
+      this.el.children[0].setAttribute("menu-button-breadcrumb-logourl", this.logoUrl);
+    }
+    // Check for the donation link information and set it to variables accordingly.
+    // Also pass the donation link data to menu-component.
+    if (this.dataMenuDonate) {
+      this.donateLink = await jsonParserWorker(this.dataMenuDonate);
+      this.el.children[0].setAttribute("data-menu-donate", this.dataMenuDonate);
+    }
+    // Pass the necessary information to menu component. These props will be
+    // used in mobile menu.
+    this.el.children[0].setAttribute("open", this.isMenuOpen.toString());
+    this.el.children[0].setAttribute("logo-label", this.logoLabel);
+    this.el.children[0].setAttribute("logo-url", this.logoUrl);
+    this.el.children[0].setAttribute("site-label", this.siteLabel);
+    this.el.children[0].setAttribute("site-url", this.siteUrl);
+    this.el.children[0].setAttribute("menu-button-breadcrumb-logourl", this.logoUrl);
+    this.el.children[0].setAttribute("menu-language-label-open", this.languageLabels["open"]);
+    this.el.children[0].setAttribute("menu-language-label-close", this.languageLabels["close"]);
+    this.el.children[0].setAttribute("label-front-page", this.menuLabels["front_page"]);
+    if (this.groupType !== "") {
+      this.isDesktopMenuDropdown = true;
+    }
+  }
+  disconnectedCallback() {
+    clearTimeout(clickTimer);
+    this.ro.disconnect();
+    this.topObserver.disconnect();
+    this.bottomObserver.disconnect();
+    clearTimeout(clickTimeout);
+  }
+  applySizeClasses(size) {
+    // Set the menu-type based on the width of the browser.
+    size <= 1200 ? (this.menuType = MenuType.mobile) : (this.menuType = MenuType.desktop);
+    // Pass the menu type to menu component.
+    this.isMobile = this.menuType === (MenuType.mobile || MenuType.tablet);
+    const menuAttribute = this.menuType;
+    this.el.children[0].setAttribute("menu-type", menuAttribute);
+  }
+  render() {
+    var _a;
+    if (this.menuType === null)
+      return;
+    const logoSize = this.isMobile ? SiteLogoSize.small : SiteLogoSize.big;
+    const logoSizeGroup = this.isMobile ? SiteLogoSize.small : SiteLogoSize.small;
+    const logoColor = ColorVariant.black;
+    const logoColorGroup = ColorVariant.white;
+    let classAttributes = [
+      "hy-site-header",
+      `hy-site-header--${this.menuType}`,
+      this.isGroup ? "is-group" : "",
+      "is-at-top",
+    ];
+    const toggleMenuMobileAndRemoveListener = () => {
+      window.removeEventListener("click", handleClickOutside);
+      this.mobileMenuToggle();
+    };
+    const handleClickOutside = (event) => {
+      const [targetElement] = event.composedPath();
+      if (targetElement.classList.contains("hy-backdrop")) {
+        toggleMenuMobileAndRemoveListener();
+      }
+    };
+    if (this.isMenuOpen) {
+      window.addEventListener("click", () => {
+        clearTimeout(clickTimeout);
+        clickTimeout = setTimeout(() => {
+        }, 250);
+      });
+    }
+    let activeLang = "en";
+    let dataMenuLanguageArray = JSON.parse(this.dataMenuLanguage);
+    dataMenuLanguageArray.forEach((lang) => {
+      if (lang.isActive) {
+        activeLang = lang.langCode;
+      }
+    });
+    switch (this.menuType) {
+      case MenuType.desktop:
+        // Larger than 1200px screens
+        return [
+          h("header", { class: `${classAttributes.join(" ")}` }, h("div", { class: {
+              "hy-backdrop": true,
+              "is-active": (this.isMenuOpen && !this.isDesktopMenuDropdown) ||
+                (this.isTopMenuOpen && !this.isDesktopMenuDropdown),
+            } }), this.isGroup && (h("section", { class: `hy-site-header__content-top ${this.isTopMenuOpen ? "is-open" : ""}` }, h("div", { class: "hy-site-header__container" }, h("div", { class: "hy-site-header__branding" }, h("hy-site-logo", { "is-group": true, "is-luomus-group": this.isLuomusGroup, size: logoSizeGroup, color: logoColorGroup, url: this.siteUrl, label: this.siteLabel })), this.dataMainMenuLinks.length > 2 && (h("hy-menu-main-group", { tabindex: "0", "is-mobile": false, "menu-label": (_a = this.groupPages["university_main_menu"]) !== null && _a !== void 0 ? _a : null, "data-main-menu": this.dataMainMenuLinks, "menu-label-close": this.menuLabelClose })), h("div", { class: "hy-site-header__actions" }, h("hy-menu-language", { "data-menu-language": this.dataMenuLanguage, labels: this.languageLabels, isGroup: true }), !this.noSearch && (h("hy-site-search", { class: "menu--secondary__item group", size: 18, color: logoColorGroup, "is-group": true, "is-luomus-group": this.isLuomusGroup, "is-beta-group": this.isBetaGroup, "search-language": activeLang, "show-label": this.showSearchLabel, labels: this.searchLabels, "search-labels": this.dataSiteSearchLabels, "search-tools": this.dataSearchTools })), this.donateLink.map(({ label, url }) => {
+            return (h("a", { class: "hy-site-header__donate-link", href: url }, h("hy-icon", { icon: "hy-icon-heart-support", size: 14, fill: ColorVariant.black }), h("span", null, label)));
+          }))))), h("section", { class: `hy-site-header__container ${this.isGroup ? "is-group" : ""} ${this.groupType === "research_group_menu" ? "is-research-group" : ""}` }, h("div", { class: "hy-site-header__branding" }, this.isGroup && this.groupType == "research_group_menu" && h("p", null, this.researchGroupLabel), this.isGroup ? (h("a", { href: this.logoUrl }, this.groupType == "generic_site_group_menu" && this.groupLogoUrl ? (h("img", { src: this.groupLogoUrl, alt: `${this.logoLabel} logo` })) : (this.logoLabel))) : (h("hy-site-logo", { size: logoSize, color: logoColor, url: this.logoUrl, label: this.logoLabel }))), this.groupType != "research_group_menu" && h("slot", { name: "menu" }), !this.isGroup && (h("div", { class: "hy-site-header__actions" }, h("hy-menu-language", { "data-menu-language": this.dataMenuLanguage, labels: this.languageLabels }), !this.noSearch && (h("hy-site-search", { size: 14, "is-luomus-group": this.isLuomusGroup, "is-beta-group": this.isBetaGroup, "search-language": activeLang, color: ColorVariant.black, "show-label": this.showSearchLabel, labels: this.searchLabels, "search-labels": this.dataSiteSearchLabels, "search-tools": this.dataSearchTools })), this.donateLink.map(({ label, url }) => {
+            return (h("a", { class: "hy-site-header__donate-link", href: url }, h("hy-icon", { icon: "hy-icon-heart-support", size: 14, fill: ColorVariant.black }), h("span", null, label)));
+          }))))),
+        ];
+      case MenuType.mobile:
+        // Smaller than 960px screens
+        return (h("header", { class: classAttributes.join(" "), "data-menu-active": this.isMenuOpen }, h("div", { class: { "hy-backdrop": true, "is-active": this.isMenuOpen } }), h("div", { class: { "hy-backdrop": true, "is-active-top": this.isTopMenuOpen } }), this.isGroup && (h("section", { class: `hy-site-header__content-top ${this.isTopMenuOpen ? "is-open" : ""}` }, h("div", { class: "hy-site-header__container" }, h("div", { class: "hy-site-header__branding" }, h("hy-site-logo", { "is-group": true, "is-luomus-group": this.isLuomusGroup, size: logoSizeGroup, color: logoColorGroup, url: this.siteUrl, label: this.siteLabel })), h("div", { class: "hy-site-header__actions" }, h("hy-menu-language", { "data-menu-language": this.dataMenuLanguage, labels: this.languageLabels, isGroup: true }), !this.noSearch && (h("hy-site-search", { class: "menu--secondary__item group", size: 18, color: logoColorGroup, "is-group": true, "is-luomus-group": this.isLuomusGroup, "is-beta-group": this.isBetaGroup, "search-language": activeLang, "show-label": this.showSearchLabel, labels: this.searchLabels, "search-labels": this.dataSiteSearchLabels, "search-tools": this.dataSearchTools })), this.dataMainMenuLinks.length > 2 && (h("hy-menu-main-group", { "site-label": this.siteLabel, "site-url": this.siteUrl, "logo-label": this.logoLabel, "logo-url": this.logoUrl, "is-mobile": true, donate: this.donateLink, "data-main-menu": this.dataMainMenuLinks })))))), h("section", { class: "hy-site-header__container" }, h("div", { class: "hy-site-header__branding" }, this.groupType == "research_group_menu" && h("p", null, this.researchGroupLabel), this.isGroup ? (h("a", { href: this.logoUrl }, this.groupType == "generic_site_group_menu" && this.groupLogoUrl ? (h("img", { src: this.groupLogoUrl, alt: `${this.logoLabel} logo` })) : (this.logoLabel))) : (h("hy-site-logo", { size: logoSize, color: logoColor, url: this.logoUrl, label: this.logoLabel }))), h("div", { class: "hy-site-header__actions" }, !this.isGroup && (h("hy-menu-language", { "data-menu-language": this.dataMenuLanguage, labels: this.languageLabels })), !this.isGroup && !this.noSearch && (h("hy-site-search", { size: 24, color: ColorVariant.black, "is-luomus-group": this.isLuomusGroup, "is-beta-group": this.isBetaGroup, "search-language": activeLang, "show-label": this.showSearchLabel, labels: this.searchLabels, "search-labels": this.dataSiteSearchLabels, "search-tools": this.dataSearchTools })), h("button", { onClick: () => toggleMenuMobileAndRemoveListener(), class: `hy-site-header__menu-open-button`, "aria-label": this.isMenuOpen ? this.menuLabels["close"] : this.menuLabels["open"], "aria-expanded": `${this.isMenuOpen}` }, !this.isMenuOpen && h("hy-icon", { icon: "hy-icon-hamburger", size: 24, fill: ColorVariant.black }), this.isMenuOpen && (h(Fragment, null, h("span", null, this.menuLabelClose), h("hy-icon", { icon: "hy-icon-remove", size: 16 }))))), h("div", { class: {
+            "is-open": this.isMenuOpen,
+            "hy-site-header__panel": true,
+          }, "aria-hidden": `${!this.isMenuOpen}` }, h("slot", { name: "menu_mobile" })))));
+    }
+  }
+  get el() { return this; }
+  static get style() { return siteHeaderCss; }
+}, [4, "hy-site-header", {
+    "isGroup": [4, "is-group"],
+    "isLuomusGroup": [4, "is-luomus-group"],
+    "isBetaGroup": [4, "is-beta-group"],
+    "researchGroupLabel": [1, "research-group-label"],
+    "groupType": [1, "group-type"],
+    "groupLogoUrl": [1, "group-logo-url"],
+    "dataMenuLanguage": [1, "data-menu-language"],
+    "dataMenuDonate": [1, "data-menu-donate"],
+    "dataSiteHeaderLabels": [1, "data-site-header-labels"],
+    "dataSiteSearchLabels": [1, "data-site-search-labels"],
+    "logoUrl": [1, "logo-url"],
+    "logoLabel": [1, "logo-label"],
+    "siteLabel": [1, "site-label"],
+    "siteUrl": [1, "site-url"],
+    "showSearchLabel": [4, "show-search-label"],
+    "noSearch": [4, "no-search"],
+    "menuLabel": [1, "menu-label"],
+    "menuLabelOpen": [1, "menu-label-open"],
+    "menuLabelClose": [1, "menu-label-close"],
+    "menuType": [513, "menu-type"],
+    "dataMainMenuLinks": [1, "data-main-menu-links"],
+    "dataSearchTools": [1, "data-search-tools"],
+    "isMobile": [32],
+    "isMenuOpen": [32],
+    "isDesktopMenuOpen": [32],
+    "isDesktopMenuDropdown": [32],
+    "isTopMenuOpen": [32],
+    "isBottomVisible": [32],
+    "isTopVisible": [32],
+    "lastScrollTop": [32],
+    "delta": [32],
+    "navbarHeight": [32]
+  }, [[0, "mobileMenuToggle", "mobileMenuToggle"], [0, "mobileMenuTopToggle", "mobileMenuTopToggle"], [8, "menuToggled", "mainMenuToggled"], [9, "scroll", "handleScroll"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-site-header", "hy-icon", "hy-menu-language", "hy-menu-language-item", "hy-menu-main-group", "hy-paragraph-text", "hy-search-field", "hy-site-logo", "hy-site-search"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-site-header":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SiteHeader);
+      }
+      break;
+    case "hy-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "hy-menu-language":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "hy-menu-language-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "hy-menu-main-group":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "hy-paragraph-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "hy-search-field":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "hy-site-logo":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "hy-site-search":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const HySiteHeader = SiteHeader;
+const defineCustomElement = defineCustomElement$1;
+
+export { HySiteHeader, defineCustomElement };

package/components/hy-site-logo.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface HySiteLogo extends Components.HySiteLogo, HTMLElement {}
+export const HySiteLogo: {
+  prototype: HySiteLogo;
+  new (): HySiteLogo;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/hy-site-logo.js

@@ -0,0 +1,6 @@
+import { S as SiteLogo, d as defineCustomElement$1 } from './site-logo.js';
+
+const HySiteLogo = SiteLogo;
+const defineCustomElement = defineCustomElement$1;
+
+export { HySiteLogo, defineCustomElement };

package/components/hy-site-search.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface HySiteSearch extends Components.HySiteSearch, HTMLElement {}
+export const HySiteSearch: {
+  prototype: HySiteSearch;
+  new (): HySiteSearch;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/hy-site-search.js

@@ -0,0 +1,6 @@
+import { S as SiteSearch, d as defineCustomElement$1 } from './site-search.js';
+
+const HySiteSearch = SiteSearch;
+const defineCustomElement = defineCustomElement$1;
+
+export { HySiteSearch, defineCustomElement };

package/components/hy-table-container.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface HyTableContainer extends Components.HyTableContainer, HTMLElement {}
+export const HyTableContainer: {
+  prototype: HyTableContainer;
+  new (): HyTableContainer;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/hy-table-container.js

@@ -0,0 +1,39 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './hy-box2.js';
+
+const hyTableContainerCss = ":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-table-container{font-size:0.875rem;line-height:18px;display:block;position:relative;overflow:scroll;white-space:nowrap}@media (min-width: 30rem){.hy-table-container{font-size:1rem;line-height:20px}}.hy-table-container table{border-collapse:collapse;border:1px solid var(--grayscale-dark);text-indent:initial;width:100%}.hy-table-container thead{border-bottom:1px solid var(--grayscale-dark);border-left:1px solid var(--grayscale-dark);border-right:1px solid var(--grayscale-dark)}.hy-table-container thead th{font-size:0.875rem;line-height:20px;border-left:1px solid black;background-color:var(--grayscale-light);text-transform:uppercase}@media (min-width: 30rem){.hy-table-container thead th{font-size:1rem;line-height:20px}}.hy-table-container td,.hy-table-container th{border:1px solid var(--grayscale-dark);background-clip:padding-box;color:var(--grayscale-dark);font-family:var(--main-font-family);letter-spacing:-0.5px;padding:0.7em 0.9em;text-align:left;vertical-align:top;word-wrap:break-word}.hy-table-container td a,.hy-table-container th a{text-decoration:none}.hy-table-container td a:hover,.hy-table-container th a:hover{cursor:pointer;text-decoration:underline}.hy-table-container td p,.hy-table-container th p{font-size:inherit}.hy-table-container td:first-child,.hy-table-container th:first-child{font-weight:700;border-collapse:separate;border-right:none;left:0;max-width:180px;min-width:180px;position:sticky;white-space:normal;width:180px;z-index:2}@media (min-width: 60rem){.hy-table-container td:first-child,.hy-table-container th:first-child{border-right:1px solid var(--grayscale-dark)}}.hy-table-container td:first-child::after,.hy-table-container th:first-child::after{content:\"\";display:block;position:absolute;right:-10px;bottom:0;width:10px;top:0;height:100%;background:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0)));background:linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%)}@media (min-width: 60rem){.hy-table-container td:first-child::after,.hy-table-container th:first-child::after{display:none}}.hy-table-container td:first-child::before,.hy-table-container th:first-child::before{border-left:1px solid black;content:\"\";display:block;position:absolute;left:-1px;bottom:0;width:1px;top:0;height:100%}@media (min-width: 60rem){.hy-table-container td:first-child::before,.hy-table-container th:first-child::before{display:none}}@media (min-width: 30rem){.hy-table-container td:first-child,.hy-table-container th:first-child{max-width:220px;min-width:220px;width:220px}}@media (min-width: 48rem){.hy-table-container td:first-child,.hy-table-container th:first-child{max-width:300px;min-width:300px;width:300px}}@media (min-width: 60rem){.hy-table-container td:first-child,.hy-table-container th:first-child{max-width:40%;min-width:40%;width:40%}}.hy-table-container td:first-child:only-child,.hy-table-container th:first-child:only-child{border:1px solid var(--grayscale-dark)}.hy-table-container td:first-child:only-child::after,.hy-table-container td:first-child:only-child::before,.hy-table-container th:first-child:only-child::after,.hy-table-container th:first-child:only-child::before{display:none}.hy-table-container td{background-color:var(--grayscale-white);word-wrap:break-word;white-space:normal}.hy-table-container caption{margin-bottom:1rem}";
+
+const HyTableContainer$1 = /*@__PURE__*/ proxyCustomElement(class HyTableContainer extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    const classAttributes = ["hy-table-container"].join(" ");
+    return (h(Host, { class: classAttributes }, h("slot", null), h("hy-box", { mb: "1.75, 1.75, 2, 2.5" })));
+  }
+  static get style() { return hyTableContainerCss; }
+}, [4, "hy-table-container"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-table-container", "hy-box"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-table-container":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HyTableContainer$1);
+      }
+      break;
+    case "hy-box":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const HyTableContainer = HyTableContainer$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyTableContainer, defineCustomElement };

package/components/hy-tabs-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface HyTabsItem extends Components.HyTabsItem, HTMLElement {}
+export const HyTabsItem: {
+  prototype: HyTabsItem;
+  new (): HyTabsItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/hy-tabs-item.js

@@ -0,0 +1,6 @@
+import { H as HyTabsItem$1, d as defineCustomElement$1 } from './hy-tabs-item2.js';
+
+const HyTabsItem = HyTabsItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyTabsItem, defineCustomElement };

package/components/hy-tabs-item2.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const hyTabsItemCss = ":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}";
+
+const HyTabsItem = /*@__PURE__*/ proxyCustomElement(class HyTabsItem extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.tabTitle = undefined;
+  }
+  render() {
+    const id = this.tabTitle.toLowerCase().replace(/\W/g, "-");
+    return (h("div", { tabindex: "0", role: "tabpanel", id: `${id}-tab`, "aria-labelledby": id, hidden: true }, h("slot", null)));
+  }
+  static get style() { return hyTabsItemCss; }
+}, [4, "hy-tabs-item", {
+    "tabTitle": [1, "tab-title"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-tabs-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-tabs-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HyTabsItem);
+      }
+      break;
+  } });
+}
+
+export { HyTabsItem as H, defineCustomElement as d };

package/components/hy-tabs.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface HyTabs extends Components.HyTabs, HTMLElement {}
+export const HyTabs: {
+  prototype: HyTabs;
+  new (): HyTabs;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/hy-tabs.js

@@ -0,0 +1,6 @@
+import { H as HyTabs$1, d as defineCustomElement$1 } from './hy-tabs2.js';
+
+const HyTabs = HyTabs$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyTabs, defineCustomElement };