@itcenteratunihelsinki/huds-lib 0.8.73 → 0.8.74

package/dist/collection/components/hy-site-header/site-header.js

@@ -5,776 +5,778 @@ import { MenuType, ColorVariant, SiteLogoSize } from "../../utils/utils";
 import { jsonParserWorker } from "../../global/globalScript";
 let clickTimeout = null;
 export class SiteHeader {
-  constructor() {
-    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";
+    constructor() {
+        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;
     }
-    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;
+    // 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";
+        }
     }
-    if (topOffset > this.lastScrollTop && !this.isTopVisible) {
-      this.toggleStickyness(false);
-      this.headerScrollDown.emit();
+    // Listener for toggling mobile menu top panel on or off.
+    mobileMenuTopToggle() {
+        this.isTopMenuOpen = !this.isTopMenuOpen;
+        this.menuMobileTopToggled.emit();
     }
-    // Scrolling up
-    if (topOffset < this.lastScrollTop && !this.isTopVisible) {
-      this.toggleStickyness();
-      this.headerScrollUp.emit();
+    mainMenuToggled() {
+        this.isDesktopMenuOpen = !this.isDesktopMenuOpen;
     }
-    // At the top of the page
-    if (this.isTopVisible) {
-      this.toggleStickyness(false);
+    handleScroll() {
+        this.headerScrollHandler();
     }
-    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");
+    headerScrollHandler() {
+        let topOffset = window.pageYOffset;
+        if (Math.abs(this.lastScrollTop - topOffset) <= this.delta) {
+            return;
         }
-      }
-    }
-    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;
+        if (topOffset > this.lastScrollTop && !this.isTopVisible) {
+            this.toggleStickyness(false);
+            this.headerScrollDown.emit();
         }
-      });
-    }, 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;
+        // Scrolling up
+        if (topOffset < this.lastScrollTop && !this.isTopVisible) {
+            this.toggleStickyness();
+            this.headerScrollUp.emit();
         }
-      });
-    }, bottomOptions);
-    const footer = document.querySelector("hy-footer");
-    if (footer) {
-      this.bottomObserver.observe(footer);
+        // At the top of the page
+        if (this.isTopVisible) {
+            this.toggleStickyness(false);
+        }
+        this.lastScrollTop = topOffset;
     }
-    // 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);
+    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");
+        }
     }
-    // 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);
+    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`);
     }
-    // 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;
+    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", () => {
+    disconnectedCallback() {
+        clearTimeout(clickTimer);
+        this.ro.disconnect();
+        this.topObserver.disconnect();
+        this.bottomObserver.disconnect();
         clearTimeout(clickTimeout);
-        clickTimeout = setTimeout(() => {
-          handleClickOutside;
-        }, 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" })))));
+    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);
     }
-  }
-  static get is() { return "hy-site-header"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["site-header.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["site-header.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "isGroup": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "is-group",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "isLuomusGroup": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "is-luomus-group",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "isBetaGroup": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "is-beta-group",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "researchGroupLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "research-group-label",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "groupType": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "group-type",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "groupLogoUrl": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "group-logo-url",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "dataMenuLanguage": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "data-menu-language",
-        "reflect": false
-      },
-      "dataMenuDonate": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "data-menu-donate",
-        "reflect": false
-      },
-      "dataSiteHeaderLabels": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "data-site-header-labels",
-        "reflect": false
-      },
-      "dataSiteSearchLabels": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "data-site-search-labels",
-        "reflect": false
-      },
-      "logoUrl": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "logo-url",
-        "reflect": false
-      },
-      "logoLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "logo-label",
-        "reflect": false
-      },
-      "siteLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "site-label",
-        "reflect": false
-      },
-      "siteUrl": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "site-url",
-        "reflect": false
-      },
-      "showSearchLabel": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "show-search-label",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "noSearch": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "no-search",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "menuLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "menu-label",
-        "reflect": false,
-        "defaultValue": "\"Menu\""
-      },
-      "menuLabelOpen": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "menu-label-open",
-        "reflect": false
-      },
-      "menuLabelClose": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "menu-label-close",
-        "reflect": false
-      },
-      "menuType": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "MenuType",
-          "resolved": "MenuType.desktop | MenuType.mobile | MenuType.tablet",
-          "references": {
-            "MenuType": {
-              "location": "import",
-              "path": "../../utils/utils"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "menu-type",
-        "reflect": true,
-        "defaultValue": "null"
-      },
-      "dataMainMenuLinks": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DesktopLinks[] | string",
-          "resolved": "DesktopLinks[] | string",
-          "references": {
-            "DesktopLinks": {
-              "location": "local",
-              "path": "/Users/tuukkaturu/hy/hy-ds/design-system-lib/core/src/components/hy-site-header/site-header.tsx"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "data-main-menu-links",
-        "reflect": false
-      },
-      "dataSearchTools": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DesktopLinks[] | string",
-          "resolved": "DesktopLinks[] | string",
-          "references": {
-            "DesktopLinks": {
-              "location": "local",
-              "path": "/Users/tuukkaturu/hy/hy-ds/design-system-lib/core/src/components/hy-site-header/site-header.tsx"
+    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();
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "data-search-tools",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isMobile": {},
-      "isMenuOpen": {},
-      "isDesktopMenuOpen": {},
-      "isDesktopMenuDropdown": {},
-      "isTopMenuOpen": {},
-      "isBottomVisible": {},
-      "isTopVisible": {},
-      "lastScrollTop": {},
-      "delta": {},
-      "navbarHeight": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "headerScrollUp",
-        "name": "headerScrollUp",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+        };
+        if (this.isMenuOpen) {
+            window.addEventListener("click", () => {
+                clearTimeout(clickTimeout);
+                clickTimeout = setTimeout(() => {
+                    handleClickOutside;
+                }, 250);
+            });
         }
-      }, {
-        "method": "headerScrollDown",
-        "name": "headerScrollDown",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "menuMobileToggled",
-        "name": "menuMobileToggled",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "menuMobileTopToggled",
-        "name": "menuMobileTopToggled",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+        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" })))));
         }
-      }];
-  }
-  static get elementRef() { return "el"; }
-  static get listeners() {
-    return [{
-        "name": "mobileMenuToggle",
-        "method": "mobileMenuToggle",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "mobileMenuTopToggle",
-        "method": "mobileMenuTopToggle",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "menuToggled",
-        "method": "mainMenuToggled",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "scroll",
-        "method": "handleScroll",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
+    }
+    static get is() { return "hy-site-header"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["site-header.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["site-header.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "isGroup": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-group",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "isLuomusGroup": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-luomus-group",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "isBetaGroup": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-beta-group",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "researchGroupLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "research-group-label",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "groupType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "group-type",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "groupLogoUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "group-logo-url",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "dataMenuLanguage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "data-menu-language",
+                "reflect": false
+            },
+            "dataMenuDonate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "data-menu-donate",
+                "reflect": false
+            },
+            "dataSiteHeaderLabels": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "data-site-header-labels",
+                "reflect": false
+            },
+            "dataSiteSearchLabels": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "data-site-search-labels",
+                "reflect": false
+            },
+            "logoUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "logo-url",
+                "reflect": false
+            },
+            "logoLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "logo-label",
+                "reflect": false
+            },
+            "siteLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "site-label",
+                "reflect": false
+            },
+            "siteUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "site-url",
+                "reflect": false
+            },
+            "showSearchLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-search-label",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "noSearch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "no-search",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "menuLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "menu-label",
+                "reflect": false,
+                "defaultValue": "\"Menu\""
+            },
+            "menuLabelOpen": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "menu-label-open",
+                "reflect": false
+            },
+            "menuLabelClose": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "menu-label-close",
+                "reflect": false
+            },
+            "menuType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "MenuType",
+                    "resolved": "MenuType.desktop | MenuType.mobile | MenuType.tablet",
+                    "references": {
+                        "MenuType": {
+                            "location": "import",
+                            "path": "../../utils/utils",
+                            "id": "src/utils/utils.ts::MenuType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "menu-type",
+                "reflect": true,
+                "defaultValue": "null"
+            },
+            "dataMainMenuLinks": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DesktopLinks[] | string",
+                    "resolved": "DesktopLinks[] | string",
+                    "references": {
+                        "DesktopLinks": {
+                            "location": "local",
+                            "path": "/Users/tuukkaturu/hy/hy-ds/design-system-lib/core/src/components/hy-site-header/site-header.tsx",
+                            "id": "src/components/hy-site-header/site-header.tsx::DesktopLinks"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "data-main-menu-links",
+                "reflect": false
+            },
+            "dataSearchTools": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DesktopLinks[] | string",
+                    "resolved": "DesktopLinks[] | string",
+                    "references": {
+                        "DesktopLinks": {
+                            "location": "local",
+                            "path": "/Users/tuukkaturu/hy/hy-ds/design-system-lib/core/src/components/hy-site-header/site-header.tsx",
+                            "id": "src/components/hy-site-header/site-header.tsx::DesktopLinks"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "data-search-tools",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isMobile": {},
+            "isMenuOpen": {},
+            "isDesktopMenuOpen": {},
+            "isDesktopMenuDropdown": {},
+            "isTopMenuOpen": {},
+            "isBottomVisible": {},
+            "isTopVisible": {},
+            "lastScrollTop": {},
+            "delta": {},
+            "navbarHeight": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "headerScrollUp",
+                "name": "headerScrollUp",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "headerScrollDown",
+                "name": "headerScrollDown",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "menuMobileToggled",
+                "name": "menuMobileToggled",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "menuMobileTopToggled",
+                "name": "menuMobileTopToggled",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "mobileMenuToggle",
+                "method": "mobileMenuToggle",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "mobileMenuTopToggle",
+                "method": "mobileMenuTopToggle",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "menuToggled",
+                "method": "mainMenuToggled",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "scroll",
+                "method": "handleScroll",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
 }
-//# sourceMappingURL=site-header.js.map