@itcenteratunihelsinki/huds-lib 0.8.43 → 0.8.45

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"; }

package/dist/collection/global/colors.js

@@ -1,23 +1,23 @@
 export default {
-  brandMain: '#0e688b',
-  brandMainLight: '#107eab',
-  brandMainActive: '#005379',
-  brandMainDark: '#003146',
-  brandMainNearlyBlack: '#000222',
-  grayscaleWhite: '#fff',
-  grayscaleLight: '#f8f8f8',
-  grayscaleMedium: '#d2d2d2',
-  grayscaleBackgroundBox: '#f5f5f5',
-  grayscaleBackgroundArrow: '#dfdfdf',
-  grayscaleMediumDark: '#979797',
-  grayscaleDark: '#555555',
-  grayscaleBlack: '#000000',
-  additionalRedLight: '#E5053A',
-  additionalRedDark: '#A31621',
-  additionalPurpleLight: '#420039',
-  additionalYellow: '#F9A21A',
-  additionalSkyblue: '#48C5F8',
-  additionalOrange: '#D14600',
-  additionalGreenLight: '#96BA3C',
-  additionalGreenDark: '#006400'
+  brandMain: "#0e688b",
+  brandMainLight: "#107eab",
+  brandMainActive: "#005379",
+  brandMainDark: "#003146",
+  brandMainNearlyBlack: "#000222",
+  grayscaleWhite: "#fff",
+  grayscaleLight: "#f8f8f8",
+  grayscaleMedium: "#d2d2d2",
+  grayscaleBackgroundBox: "#f5f5f5",
+  grayscaleBackgroundArrow: "#dfdfdf",
+  grayscaleMediumDark: "#979797",
+  grayscaleDark: "#555555",
+  grayscaleBlack: "#000000",
+  additionalRedLight: "#E5053A",
+  additionalRedDark: "#A31621",
+  additionalPurpleLight: "#420039",
+  additionalYellow: "#F9A21A",
+  additionalSkyblue: "#48C5F8",
+  additionalOrange: "#D14600",
+  additionalGreenLight: "#96BA3C",
+  additionalGreenDark: "#006400",
 };

package/dist/collection/global/globalScript.js

@@ -1,17 +1,17 @@
-import { setMode } from '@stencil/core';
+import { setMode } from "@stencil/core";
 /**
  * This is a demo on how to initialize different themes with a class name from body element.
  * You can basically get it how you want, this is not necessarily the best way!
  */
 setMode((elm) => {
-  const el = document.querySelector('body');
-  const bodyclasses = el.className.split(' ');
+  const el = document.querySelector("body");
+  const bodyclasses = el.className.split(" ");
   if (elm.mode)
     return elm.mode;
-  else if (elm.getAttribute('mode'))
-    return elm.getAttribute('mode');
+  else if (elm.getAttribute("mode"))
+    return elm.getAttribute("mode");
   else
-    return bodyclasses.includes('full-width') ? 'wide' : 'default';
+    return bodyclasses.includes("full-width") ? "wide" : "default";
 });
 /**
  * Moved jsonParserWorker function to global scripts until stenciljs issue is resolved.
@@ -19,5 +19,5 @@ setMode((elm) => {
  * Prevented web worker from working with webpack. Do not use web worker for now.
  */
 export const jsonParserWorker = async (data) => {
-  return typeof data === 'string' && data.length > 0 ? JSON.parse(data) : data;
+  return typeof data === "string" && data.length > 0 ? JSON.parse(data) : data;
 };

package/dist/collection/index.js

@@ -1 +1 @@
-export * from './components';
+export * from "./components";