@itcenteratunihelsinki/huds-lib 0.8.42 → 0.8.44

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

@@ -1,17 +1,17 @@
 let clickTimer = null;
-import { Fragment, h } from '@stencil/core';
-import ResizeObserver from 'resize-observer-polyfill';
-import { MenuType, ColorVariant, SiteLogoSize } from '../../utils/utils';
-import { jsonParserWorker } from '../../global/globalScript';
+import { Fragment, h } from "@stencil/core";
+import ResizeObserver from "resize-observer-polyfill";
+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.researchGroupLabel = "";
+    this.groupType = "";
+    this.groupLogoUrl = "";
     this.dataMenuLanguage = undefined;
     this.dataMenuDonate = undefined;
     this.dataSiteHeaderLabels = undefined;
@@ -22,7 +22,7 @@ export class SiteHeader {
     this.siteUrl = undefined;
     this.showSearchLabel = true;
     this.noSearch = false;
-    this.menuLabel = 'Menu';
+    this.menuLabel = "Menu";
     this.menuLabelOpen = undefined;
     this.menuLabelClose = undefined;
     this.menuType = null;
@@ -43,12 +43,12 @@ export class SiteHeader {
   mobileMenuToggle() {
     this.isMenuOpen = !this.isMenuOpen;
     this.menuMobileToggled.emit();
-    let bodyElement = document.getElementsByTagName('body')[0];
+    let bodyElement = document.getElementsByTagName("body")[0];
     if (this.isMenuOpen) {
-      bodyElement.style.overflow = 'hidden';
+      bodyElement.style.overflow = "hidden";
     }
     else {
-      bodyElement.style.overflow = 'initial';
+      bodyElement.style.overflow = "initial";
     }
   }
   // Listener for toggling mobile menu top panel on or off.
@@ -83,25 +83,25 @@ export class SiteHeader {
     this.lastScrollTop = topOffset;
   }
   toggleStickyness(toggleOn = true) {
-    const bodyElementClasses = document.querySelector('body').classList;
-    let hySiteHeader = this.el.querySelector('.hy-site-header');
+    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');
+    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');
+      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');
+      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() {
@@ -114,41 +114,41 @@ export class SiteHeader {
     this.ro.observe(document.body);
     const topOptions = {
       root: null,
-      rootMargin: '250px',
+      rootMargin: "250px",
       threshold: [0.0, 1.0],
     };
     this.topObserver = new IntersectionObserver((entries) => {
       entries.forEach((entry) => {
-        if (entry.target.nodeName === 'HEADER') {
+        if (entry.target.nodeName === "HEADER") {
           this.isTopVisible = entry.isIntersecting;
         }
       });
     }, topOptions);
-    const header = document.querySelector('header');
+    const header = document.querySelector("header");
     if (header) {
       this.topObserver.observe(header);
     }
     const bottomOptions = {
       root: null,
-      rootMargin: '0px',
+      rootMargin: "0px",
       threshold: [0.0, 1.0],
     };
     this.bottomObserver = new IntersectionObserver((entries) => {
       entries.forEach((entry) => {
-        if (entry.target.nodeName === 'HEADER') {
+        if (entry.target.nodeName === "HEADER") {
           this.isTopVisible = entry.isIntersecting;
         }
       });
     }, bottomOptions);
-    const footer = document.querySelector('hy-footer');
+    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.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`);
+    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.
@@ -158,26 +158,26 @@ export class SiteHeader {
       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);
+      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);
+      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.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;
     }
   }
@@ -194,7 +194,7 @@ export class SiteHeader {
     // 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);
+    this.el.children[0].setAttribute("menu-type", menuAttribute);
   }
   render() {
     var _a;
@@ -205,30 +205,30 @@ export class SiteHeader {
     const logoColor = ColorVariant.black;
     const logoColorGroup = ColorVariant.white;
     let classAttributes = [
-      'hy-site-header',
+      "hy-site-header",
       `hy-site-header--${this.menuType}`,
-      this.isGroup ? 'is-group' : '',
-      'is-at-top',
+      this.isGroup ? "is-group" : "",
+      "is-at-top",
     ];
     const toggleMenuMobileAndRemoveListener = () => {
-      window.removeEventListener('click', handleClickOutside);
+      window.removeEventListener("click", handleClickOutside);
       this.mobileMenuToggle();
     };
     const handleClickOutside = (event) => {
       const [targetElement] = event.composedPath();
-      if (targetElement.classList.contains('hy-backdrop')) {
+      if (targetElement.classList.contains("hy-backdrop")) {
         toggleMenuMobileAndRemoveListener();
       }
     };
     if (this.isMenuOpen) {
-      window.addEventListener('click', () => {
+      window.addEventListener("click", () => {
         clearTimeout(clickTimeout);
         clickTimeout = setTimeout(() => {
           handleClickOutside;
         }, 250);
       });
     }
-    let activeLang = 'en';
+    let activeLang = "en";
     let dataMenuLanguageArray = JSON.parse(this.dataMenuLanguage);
     dataMenuLanguageArray.forEach((lang) => {
       if (lang.isActive) {
@@ -239,22 +239,22 @@ export class SiteHeader {
       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) ||
+          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)));
+            } }), 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' })))));
+        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 is() { return "hy-site-header"; }
@@ -340,7 +340,7 @@ export class SiteHeader {
         },
         "attribute": "research-group-label",
         "reflect": false,
-        "defaultValue": "''"
+        "defaultValue": "\"\""
       },
       "groupType": {
         "type": "string",
@@ -358,7 +358,7 @@ export class SiteHeader {
         },
         "attribute": "group-type",
         "reflect": false,
-        "defaultValue": "''"
+        "defaultValue": "\"\""
       },
       "groupLogoUrl": {
         "type": "string",
@@ -376,7 +376,7 @@ export class SiteHeader {
         },
         "attribute": "group-logo-url",
         "reflect": false,
-        "defaultValue": "''"
+        "defaultValue": "\"\""
       },
       "dataMenuLanguage": {
         "type": "string",
@@ -566,7 +566,7 @@ export class SiteHeader {
         },
         "attribute": "menu-label",
         "reflect": false,
-        "defaultValue": "'Menu'"
+        "defaultValue": "\"Menu\""
       },
       "menuLabelOpen": {
         "type": "string",
@@ -634,7 +634,7 @@ export class SiteHeader {
           "references": {
             "DesktopLinks": {
               "location": "local",
-              "path": "/builds/julkiset-sivut/design-system-lib/src/components/site-header/site-header.tsx"
+              "path": "/Users/tuukkaturu/hy/hy-ds/design-system-lib/core/src/components/site-header/site-header.tsx"
             }
           }
         },
@@ -656,7 +656,7 @@ export class SiteHeader {
           "references": {
             "DesktopLinks": {
               "location": "local",
-              "path": "/builds/julkiset-sivut/design-system-lib/src/components/site-header/site-header.tsx"
+              "path": "/Users/tuukkaturu/hy/hy-ds/design-system-lib/core/src/components/site-header/site-header.tsx"
             }
           }
         },
@@ -777,4 +777,3 @@ export class SiteHeader {
       }];
   }
 }
-//# sourceMappingURL=site-header.js.map

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

@@ -1,5 +1,5 @@
-import { h, Host } from '@stencil/core';
-import { ColorVariant, FooterVariant, SiteLogoSize } from '../../../utils/utils';
+import { h, Host } from "@stencil/core";
+import { ColorVariant, FooterVariant, SiteLogoSize } from "../../../utils/utils";
 export class SiteLogo {
   constructor() {
     this.type = FooterVariant.header;
@@ -11,15 +11,15 @@ export class SiteLogo {
     this.url = undefined;
   }
   render() {
-    const isGroupClass = this.isGroup ? 'group' : 'page';
+    const isGroupClass = this.isGroup ? "group" : "page";
     // const isLuomusGroupClass = this.isLuomusGroup ? 'luomus' : 'regular';
     const classAttributes = [
-      'hy-site-logo',
+      "hy-site-logo",
       `hy-site-logo__${this.type}__${isGroupClass}`,
       `hy-site-logo__${this.type}`,
-      'luomus',
-    ].join(' ');
-    return this.url ? (h(Host, { class: classAttributes }, !this.isLuomusGroup && (h("a", { href: this.url }, h("hy-icon", { class: { 'hy-site-logo__icon': true, group: this.isGroup }, icon: 'hy-icon-hy-logo', size: this.size, fill: this.color }), h("span", { class: { 'hy-site-logo__label': true, group: this.isGroup }, style: { color: this.color } }, this.label))), this.isLuomusGroup && (h("div", { class: "luomus-group" }, h("hy-icon", { class: { 'hy-site-logo__icon': true, group: this.isGroup }, icon: 'hy-icon-hy-logo', size: this.size, fill: this.color }), h("span", { class: { 'hy-site-logo__label': true, group: this.isGroup }, style: { color: this.color } }, this.label))))) : this.label ? (h(Host, { class: classAttributes }, h("hy-icon", { class: { 'hy-site-logo__icon': true, group: this.isGroup }, icon: 'hy-icon-hy-logo', size: this.size, fill: this.color }), h("span", { class: { 'hy-site-logo__label': true, group: this.isGroup }, style: { color: this.color } }, this.label))) : ('');
+      "luomus",
+    ].join(" ");
+    return this.url ? (h(Host, { class: classAttributes }, !this.isLuomusGroup && (h("a", { href: this.url }, h("hy-icon", { class: { "hy-site-logo__icon": true, group: this.isGroup }, icon: "hy-icon-hy-logo", size: this.size, fill: this.color }), h("span", { class: { "hy-site-logo__label": true, group: this.isGroup }, style: { color: this.color } }, this.label))), this.isLuomusGroup && (h("div", { class: "luomus-group" }, h("hy-icon", { class: { "hy-site-logo__icon": true, group: this.isGroup }, icon: "hy-icon-hy-logo", size: this.size, fill: this.color }), h("span", { class: { "hy-site-logo__label": true, group: this.isGroup }, style: { color: this.color } }, this.label))))) : this.label ? (h(Host, { class: classAttributes }, h("hy-icon", { class: { "hy-site-logo__icon": true, group: this.isGroup }, icon: "hy-icon-hy-logo", size: this.size, fill: this.color }), h("span", { class: { "hy-site-logo__label": true, group: this.isGroup }, style: { color: this.color } }, this.label))) : ("");
   }
   static get is() { return "hy-site-logo"; }
   static get originalStyleUrls() {
@@ -176,4 +176,3 @@ export class SiteLogo {
     };
   }
 }
-//# sourceMappingURL=site-logo.js.map

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

@@ -1,6 +1,6 @@
-import { h } from '@stencil/core';
-import { ColorVariant } from '../../../utils/utils';
-import { jsonParserWorker } from '../../../global/globalScript';
+import { h } from "@stencil/core";
+import { ColorVariant } from "../../../utils/utils";
+import { jsonParserWorker } from "../../../global/globalScript";
 export class SiteSearch {
   constructor() {
     this.color = ColorVariant.black;
@@ -25,10 +25,10 @@ export class SiteSearch {
     }
     if (this.searchLabels) {
       this._searchLabels = await jsonParserWorker(this.searchLabels);
-      this.searchTitleLabel = this._searchLabels['search_label'];
-      this.searchCloseLabel = this._searchLabels['search_close_label'];
-      this.searchToolsLabel = this._searchLabels['search_tools_label'];
-      this.searchDescriptionLabel = this._searchLabels['search_description'];
+      this.searchTitleLabel = this._searchLabels["search_label"];
+      this.searchCloseLabel = this._searchLabels["search_close_label"];
+      this.searchToolsLabel = this._searchLabels["search_tools_label"];
+      this.searchDescriptionLabel = this._searchLabels["search_description"];
     }
   }
   // CLose the search panel if user opens the desktop menu panel.
@@ -53,7 +53,7 @@ export class SiteSearch {
       return;
     if (this.isSearchPanelOpen) {
       const path = event.path || (event.composedPath && event.composedPath());
-      if (path[0].classList.contains('hy-backdrop')) {
+      if (path[0].classList.contains("hy-backdrop")) {
         this.closeSearchPanel();
         event.stopPropagation();
       }
@@ -66,10 +66,10 @@ export class SiteSearch {
   // }
   closeSearchPanel() {
     this.isSearchPanelOpen = false;
-    let cludoSayt = document.querySelectorAll('stencil-cludo-sayt')[0];
+    let cludoSayt = document.querySelectorAll("stencil-cludo-sayt")[0];
     if (cludoSayt) {
       let CludoSayt = window.CludoSayt;
-      if (typeof CludoSayt !== 'undefined') {
+      if (typeof CludoSayt !== "undefined") {
         CludoSayt.hide();
       }
     }
@@ -77,16 +77,16 @@ export class SiteSearch {
   }
   handleSearchPanelToggle(event) {
     if (this.isLuomusGroup) {
-      let beta = this.isBetaGroup ? '/beta' : '';
-      let luomus_search_url = '/' + this.searchLanguage + beta + '/luomus/search-results';
-      if (this.searchLanguage == 'fi') {
-        luomus_search_url = '/' + this.searchLanguage + beta + '/luomus/hakutulokset';
+      let beta = this.isBetaGroup ? "/beta" : "";
+      let luomus_search_url = "/" + this.searchLanguage + beta + "/luomus/search-results";
+      if (this.searchLanguage == "fi") {
+        luomus_search_url = "/" + this.searchLanguage + beta + "/luomus/hakutulokset";
       }
-      else if (this.searchLanguage == 'sv') {
-        luomus_search_url = '/' + this.searchLanguage + beta + '/luomus/sokresultat';
+      else if (this.searchLanguage == "sv") {
+        luomus_search_url = "/" + this.searchLanguage + beta + "/luomus/sokresultat";
       }
-      else if (this.searchLanguage == 'ru') {
-        luomus_search_url = '/' + this.searchLanguage + beta + '/luomus/rezultaty-poiska';
+      else if (this.searchLanguage == "ru") {
+        luomus_search_url = "/" + this.searchLanguage + beta + "/luomus/rezultaty-poiska";
       }
       location.href = luomus_search_url;
     }
@@ -97,18 +97,18 @@ export class SiteSearch {
         this.searchPanelToggled.emit();
         this.adjustPosition(this.el);
         // Remove hidden class from cludo suggestions
-        let cludoSayt = document.querySelectorAll('stencil-cludo-sayt')[0];
+        let cludoSayt = document.querySelectorAll("stencil-cludo-sayt")[0];
         if (cludoSayt) {
-          const cludoSearchContentFormElement = this.el.shadowRoot.querySelector('#cludo-search-content-form');
-          cludoSayt.classList.remove('hidden');
+          const cludoSearchContentFormElement = this.el.shadowRoot.querySelector("#cludo-search-content-form");
+          cludoSayt.classList.remove("hidden");
           cludoSearchContentFormElement.append(cludoSayt);
-          cludoSayt.shadowRoot.querySelector('#cludo-reli-flexi-wrapper').style.position = 'relative';
-          cludoSayt.shadowRoot.querySelector('#cludo-reli-flexi').style.position = 'relative';
-          cludoSayt.shadowRoot.querySelector('#cludo-reli-flexi').style.maxWidth = 'none';
+          cludoSayt.shadowRoot.querySelector("#cludo-reli-flexi-wrapper").style.position = "relative";
+          cludoSayt.shadowRoot.querySelector("#cludo-reli-flexi").style.position = "relative";
+          cludoSayt.shadowRoot.querySelector("#cludo-reli-flexi").style.maxWidth = "none";
         }
         // Without setTimeout it will not focus the input because it hasn't rendered yet.
         setTimeout(() => {
-          const searchInput = this.el.shadowRoot.querySelector('input#search');
+          const searchInput = this.el.shadowRoot.querySelector("input#search");
           searchInput.focus();
         });
       }
@@ -119,76 +119,76 @@ export class SiteSearch {
     event.stopPropagation();
   }
   adjustPosition(target) {
-    let headerHeight = '0';
+    let headerHeight = "0";
     let shadowTop = 0;
     const searchPanel = target.shadowRoot.querySelectorAll(`.site-search__panel`)[0];
     let initialDisplayStyle = searchPanel.style.display;
     if (this.isGroup) {
-      let hyHeader = target.closest('.hy-site-header__content-top');
+      let hyHeader = target.closest(".hy-site-header__content-top");
       if (hyHeader) {
         let headerHeightValue = hyHeader.offsetHeight;
         headerHeight = `${headerHeightValue}px`;
         let headerTop = hyHeader.offsetTop;
         // Add shadow backdrop
-        searchPanel.style.display = 'flex';
+        searchPanel.style.display = "flex";
         shadowTop = headerHeightValue + headerTop + searchPanel.offsetHeight;
       }
     }
     else {
-      let hyHeader = target.closest('.hy-site-header');
+      let hyHeader = target.closest(".hy-site-header");
       if (hyHeader) {
-        let headerHeightValue = hyHeader.classList.contains('hy-site-header--sticky-active')
+        let headerHeightValue = hyHeader.classList.contains("hy-site-header--sticky-active")
           ? hyHeader.offsetHeight
           : hyHeader.offsetTop + hyHeader.offsetHeight;
         headerHeight = `${headerHeightValue}px`;
         // Add shadow backdrop
-        searchPanel.style.display = 'flex';
+        searchPanel.style.display = "flex";
         let searchPanelHeight = searchPanel.offsetHeight;
         shadowTop = searchPanelHeight + headerHeightValue;
       }
     }
     searchPanel.style.display = initialDisplayStyle;
     searchPanel.style.top = headerHeight;
-    this.showBackdropShadow('open', shadowTop);
+    this.showBackdropShadow("open", shadowTop);
   }
-  showBackdropShadow(state = 'close', top = 0) {
-    let hyHeader = this.el.closest('.hy-site-header');
+  showBackdropShadow(state = "close", top = 0) {
+    let hyHeader = this.el.closest(".hy-site-header");
     let hyBackdropDiv = hyHeader.children[0];
     if (hyBackdropDiv) {
-      if (state === 'open') {
+      if (state === "open") {
         let me = window.outerHeight - top;
         hyBackdropDiv.style.height = `${me}px`;
         hyBackdropDiv.style.top = `${top}px`;
-        hyBackdropDiv.style.position = 'absolute';
-        hyBackdropDiv.classList.add('is-active');
+        hyBackdropDiv.style.position = "absolute";
+        hyBackdropDiv.classList.add("is-active");
       }
       else {
-        hyBackdropDiv.removeAttribute('style');
-        hyBackdropDiv.classList.remove('is-active');
+        hyBackdropDiv.removeAttribute("style");
+        hyBackdropDiv.classList.remove("is-active");
       }
     }
   }
   render() {
     const currentPageUrlPathName = window.location.pathname;
-    const searchPagePathNames = ['/fi/haku', '/en/search', '/sv/sök'];
+    const searchPagePathNames = ["/fi/haku", "/en/search", "/sv/sök"];
     return (h("div", { class: {
-        'site-search': true,
-        'site-search__is-open': this.isSearchPanelOpen,
-        'is-group': this.isGroup,
-      } }, h("button", { "aria-label": this.showLabel ? this._labels['open'] : '', "aria-expanded": `${this.isSearchPanelOpen}`, class: {
-        'button--search': true,
-        'is-open--menu': this.isAlternative,
-        'is-open': this.isSearchPanelOpen,
-        'is-active': searchPagePathNames.some((item) => item === currentPageUrlPathName),
-      }, onClick: (e) => this.handleSearchPanelToggle(e), disabled: searchPagePathNames.some((item) => item === currentPageUrlPathName) ? true : false }, this.showLabel ? (h("span", { class: { 'button--search__label': true, 'button--search__label__group': this.isGroup } }, this._labels['label'])) : (''), h("hy-icon", { icon: 'hy-icon-search', size: this.size, fill: this.color })), !this.isLuomusGroup && (h("div", { class: {
-        'site-search__panel': true,
-        'site-search__panel__is-open': this.isSearchPanelOpen,
-      }, "aria-hidden": `${!this.isSearchPanelOpen}` }, h("div", { class: "site-search__panel__wrapper" }, h("div", { class: "site-search__panel__title" }, h("div", { class: "site-search__panel__title__group" }, h("span", { class: "panel-title" }, this.searchTitleLabel), h("div", { class: "description" }, this.searchDescriptionLabel))), h("div", { id: "cludo-search-results", class: "container_12" }, h("div", { class: "search-banner" }), h("div", { class: "search-filters search-filters-mobile" }), h("div", { class: "col-md-12" }, h("div", { style: { margin: '20px 0 32px' }, id: "cludo-search-content-form" }, h("hy-search-field", { "input-id": "search", label: "" }))), h("div", { class: "col-md-3" }, h("div", { class: "search-filters", "aria-controls": "search-results" })), h("div", { class: "col-md-9" }, h("div", { class: "search-results-container" }, h("hy-paragraph-text", null, h("div", { class: "search-result-count" })), h("div", { class: "search-did-you-mean", role: "Complementary" }), h("div", { class: "search-results", role: "region", id: "search-results", "aria-live": "polite" })))), this._searchTools && this._searchTools.length > 0 && (h("div", { class: "site-search__panel__tools" }, h("div", { class: "title" }, this.searchToolsLabel), h("div", { class: "list" }, this._searchTools.map((i) => {
-      let searchToolTarget = i.isExternal ? '_blank' : '_self';
-      return (h("a", { class: "search-special-tool", href: i.url, target: searchToolTarget }, h("hy-icon", { icon: 'hy-icon-arrow-to-right', size: 14, fill: ColorVariant.black }), h("span", { class: "label" }, i.label), h("span", { class: "description" }, i.description)));
+        "site-search": true,
+        "site-search__is-open": this.isSearchPanelOpen,
+        "is-group": this.isGroup,
+      } }, h("button", { "aria-label": this.showLabel ? this._labels["open"] : "", "aria-expanded": `${this.isSearchPanelOpen}`, class: {
+        "button--search": true,
+        "is-open--menu": this.isAlternative,
+        "is-open": this.isSearchPanelOpen,
+        "is-active": searchPagePathNames.some((item) => item === currentPageUrlPathName),
+      }, onClick: (e) => this.handleSearchPanelToggle(e), disabled: searchPagePathNames.some((item) => item === currentPageUrlPathName) ? true : false }, this.showLabel ? (h("span", { class: { "button--search__label": true, "button--search__label__group": this.isGroup } }, this._labels["label"])) : (""), h("hy-icon", { icon: "hy-icon-search", size: this.size, fill: this.color })), !this.isLuomusGroup && (h("div", { class: {
+        "site-search__panel": true,
+        "site-search__panel__is-open": this.isSearchPanelOpen,
+      }, "aria-hidden": `${!this.isSearchPanelOpen}` }, h("div", { class: "site-search__panel__wrapper" }, h("div", { class: "site-search__panel__title" }, h("div", { class: "site-search__panel__title__group" }, h("span", { class: "panel-title" }, this.searchTitleLabel), h("div", { class: "description" }, this.searchDescriptionLabel))), h("div", { id: "cludo-search-results", class: "container_12" }, h("div", { class: "search-banner" }), h("div", { class: "search-filters search-filters-mobile" }), h("div", { class: "col-md-12" }, h("div", { style: { margin: "20px 0 32px" }, id: "cludo-search-content-form" }, h("hy-search-field", { "input-id": "search", label: "" }))), h("div", { class: "col-md-3" }, h("div", { class: "search-filters", "aria-controls": "search-results" })), h("div", { class: "col-md-9" }, h("div", { class: "search-results-container" }, h("hy-paragraph-text", null, h("div", { class: "search-result-count" })), h("div", { class: "search-did-you-mean", role: "Complementary" }), h("div", { class: "search-results", role: "region", id: "search-results", "aria-live": "polite" })))), this._searchTools && this._searchTools.length > 0 && (h("div", { class: "site-search__panel__tools" }, h("div", { class: "title" }, this.searchToolsLabel), h("div", { class: "list" }, this._searchTools.map((i) => {
+      let searchToolTarget = i.isExternal ? "_blank" : "_self";
+      return (h("a", { class: "search-special-tool", href: i.url, target: searchToolTarget }, h("hy-icon", { icon: "hy-icon-arrow-to-right", size: 14, fill: ColorVariant.black }), h("span", { class: "label" }, i.label), h("span", { class: "description" }, i.description)));
     })))), h("button", { onClick: () => this.closeSearchPanel(), class: {
-        'site-search__panel__panel-toggle': true,
-      }, "aria-label": this.searchCloseLabel, "aria-expanded": `${this.isSearchPanelOpen}` }, h("span", { class: "site-search__panel__panel-toggle__label" }, h("span", { class: "site-search__panel__panel-toggle__label__title", tabindex: "0" }, this.searchCloseLabel), h("hy-icon", { icon: 'hy-icon-remove', size: 16, fill: ColorVariant.black }))))))));
+        "site-search__panel__panel-toggle": true,
+      }, "aria-label": this.searchCloseLabel, "aria-expanded": `${this.isSearchPanelOpen}` }, h("span", { class: "site-search__panel__panel-toggle__label" }, h("span", { class: "site-search__panel__panel-toggle__label__title", tabindex: "0" }, this.searchCloseLabel), h("hy-icon", { icon: "hy-icon-remove", size: 16, fill: ColorVariant.black }))))))));
   }
   static get is() { return "hy-site-search"; }
   static get encapsulation() { return "shadow"; }
@@ -484,4 +484,3 @@ export class SiteSearch {
       }];
   }
 }
-//# sourceMappingURL=site-search.js.map

package/dist/collection/components/tiny-text/tiny-text.js

@@ -17,4 +17,3 @@ export class TinyText {
     };
   }
 }
-//# sourceMappingURL=tiny-text.js.map