@itcenteratunihelsinki/huds-lib 0.8.43 → 0.8.45

package/components/site-search.js

@@ -0,0 +1,249 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { e as ColorVariant } from './utils.js';
+import { j as jsonParserWorker } from './globalScript.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './paragraph-text.js';
+import { d as defineCustomElement$1 } from './hy-search-field2.js';
+
+const siteSearchCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}.button--search{font-size:0.75rem;line-height:24px;font-weight:400;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:transparent;border:0 none;color:var(--brand-main-nearly-black);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;font-family:var(--main-font-family);height:100%;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;letter-spacing:-0.5px;width:44px}@media (min-width: 75.0625rem){.button--search{display:inline-grid;grid-template-columns:repeat(2, auto);gap:4px;width:auto}}@media (min-width: 1601px){.button--search{font-size:0.875rem;line-height:24px}}.button--search:hover:not([disabled]){color:var(--brand-main);cursor:pointer}.button--search:hover:not([disabled]) svg{fill:var(--brand-main)}.button--search:focus:not([disabled]){outline:solid 2px var(--additional-yellow);outline-offset:2px}.button--search.is-active,.button--search[aria-expanded=true]{position:relative}.button--search.is-active:after,.button--search[aria-expanded=true]:after{content:\"\";position:absolute;height:4px;right:0;bottom:-1px;left:0;background-color:var(--grayscale-black)}.is-group .button--search{color:var(--grayscale-white)}.is-group .button--search:hover:not([disabled]){color:var(--grayscale-medium);cursor:pointer}.is-group .button--search:hover:not([disabled]) svg{fill:var(--grayscale-medium)}.button--search.is-open--menu{position:absolute;right:50px;top:15px;z-index:101}.button--search__label{display:none;visibility:hidden}@media (min-width: 75.0625rem){.button--search__label{display:block;visibility:visible;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}}.site-search{height:100%}.site-search__panel{display:none}.site-search__panel__is-open{background-color:#f8f8f8;border:1px solid rgba(0, 0, 0, 0.1);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;font-family:var(--main-font-family);left:0;position:absolute;width:100%;z-index:520}.site-search__panel__title__group{-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@media (min-width: 60rem){.site-search__panel__title__group{-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}}.site-search__panel__title .panel-title{font-size:2rem;line-height:32px;font-weight:700;color:var(--grayscale-black);letter-spacing:-1px;margin-bottom:12px;margin-top:20px;text-transform:uppercase}@media (min-width: 30rem){.site-search__panel__title .panel-title{font-size:2.875rem;line-height:48px;letter-spacing:-1.5px;margin-top:24px}}@media (min-width: 1601px){.site-search__panel__title .panel-title{font-size:3.25rem;line-height:54px;letter-spacing:-1.6px}}.site-search__panel__title .description{font-size:0.75rem;line-height:16px;color:var(--grayscale-black);letter-spacing:-0.2px;margin-bottom:16px;padding:0}@media (min-width: 30rem){.site-search__panel__title .description{font-size:1rem;line-height:22px;letter-spacing:-0.1px;margin-bottom:18px}}@media (min-width: 60rem){.site-search__panel__title .description{font-size:1.125rem;line-height:24px;letter-spacing:-0.1px;padding-left:8px}}@media (min-width: 1601px){.site-search__panel__title .description{font-size:1.25rem;line-height:28px;letter-spacing:-0.2px;padding-left:12px}}.site-search__panel__wrapper{margin:0 auto;max-width:100%;padding:0 1rem 2rem;width:100%}@media (min-width: 30rem){.site-search__panel__wrapper{max-width:1216px;padding:0 0 2rem}}@media (min-width: 1601px){.site-search__panel__wrapper{padding:0 0 4rem}}.site-search__panel__panel-toggle{background-color:transparent;border:none;position:absolute;right:1rem;top:25px}@media (min-width: 30rem){.site-search__panel__panel-toggle{right:2rem;top:36px}}@media (min-width: 1601px){.site-search__panel__panel-toggle{top:45px}}.site-search__panel__panel-toggle__label{font-size:0.875rem;line-height:22px;font-weight:700;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--grayscale-black);display:-webkit-box;display:-ms-flexbox;display:flex;letter-spacing:-0.44px;text-transform:uppercase}.site-search__panel__panel-toggle__label__title{padding-right:8px}@media (min-width: 1601px){.site-search__panel__panel-toggle__label{font-size:1.125rem;line-height:22px;letter-spacing:-0.56px}}.site-search__panel__panel-toggle:focus:not([disabled]),.site-search__panel__panel-toggle:hover:not([disabled]){cursor:pointer}.site-search__panel__panel-toggle:focus:not([disabled]) span,.site-search__panel__panel-toggle:hover:not([disabled]) span{color:var(--brand-main)}.site-search__panel__panel-toggle:focus:not([disabled]) svg,.site-search__panel__panel-toggle:hover:not([disabled]) svg{fill:var(--brand-main)}.site-search__panel__tools .title{font-size:1rem;line-height:20px;font-weight:700;color:var(--brand-main-nearly-black);letter-spacing:-0.5px;text-transform:uppercase}@media (min-width: 30rem){.site-search__panel__tools .title{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;margin:32px 0 16px}}.site-search__panel__tools .list a.search-special-tool{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-white);display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:8px;text-decoration:none}.site-search__panel__tools .list a.search-special-tool .label{font-size:0.875rem;line-height:16px;font-weight:700;color:var(--brand-main-nearly-black);letter-spacing:-0.44px;padding-left:8px}@media (min-width: 30rem){.site-search__panel__tools .list a.search-special-tool .label{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-left:12px}}.site-search__panel__tools .list a.search-special-tool .description{display:none}@media (min-width: 60rem){.site-search__panel__tools .list a.search-special-tool .description{font-size:0.875rem;line-height:18px;color:var(--grayscale-dark);display:-webkit-box;display:-ms-flexbox;display:flex;letter-spacing:-0.2px;padding-left:12px}}@media (min-width: 1601px){.site-search__panel__tools .list a.search-special-tool .description{font-size:1rem;line-height:24px;color:var(--grayscale-dark);display:-webkit-box;display:-ms-flexbox;display:flex;letter-spacing:0;padding-left:12px}}.site-search__panel__tools .list a.search-special-tool hy-icon{height:40px;width:40px}.site-search__panel__tools .list a.search-special-tool hy-icon svg{background-color:var(--brand-main-light);fill:var(--grayscale-white);height:40px;padding:8px;width:40px}";
+
+const SiteSearch = /*@__PURE__*/ proxyCustomElement(class SiteSearch extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.searchPanelToggled = createEvent(this, "searchPanelToggled", 7);
+    this.color = ColorVariant.black;
+    this.isAlternative = false;
+    this.isGroup = false;
+    this.isLuomusGroup = false;
+    this.isBetaGroup = false;
+    this.searchLanguage = undefined;
+    this.labels = undefined;
+    this.searchLabels = undefined;
+    this.searchTools = undefined;
+    this.showLabel = false;
+    this.size = undefined;
+    this.dataSearchSpecialTools = undefined;
+    this.isSearchPanelOpen = false;
+  }
+  async componentWillLoad() {
+    this._labels = await jsonParserWorker(this.labels);
+    // Special search tools.
+    if (this.searchTools) {
+      this._searchTools = await jsonParserWorker(this.searchTools);
+    }
+    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"];
+    }
+  }
+  // CLose the search panel if user opens the desktop menu panel.
+  desktopMenuToggled() {
+    this.closeSearchPanel();
+  }
+  // CLose the search panel if user opens the mobile menu panel.
+  mobileMenuToggled() {
+    this.closeSearchPanel();
+  }
+  // CLose the search panel if user opens the language menu.
+  menuLanguageToggled() {
+    this.closeSearchPanel();
+  }
+  // Close the search panel if user opens University main menu
+  universityMainMenuPanelToggled() {
+    this.closeSearchPanel();
+  }
+  handleWindowClick(event) {
+    // Check if event is being fired during pressing a key (event.detail==0 in this case)
+    if (event.detail == 0)
+      return;
+    if (this.isSearchPanelOpen) {
+      const path = event.path || (event.composedPath && event.composedPath());
+      if (path[0].classList.contains("hy-backdrop")) {
+        this.closeSearchPanel();
+        event.stopPropagation();
+      }
+    }
+  }
+  // Close the search panel on Scroll down.
+  // @Listen('headerScrollDown', {target: 'document'})
+  // headerScrollDown() {
+  //   this.closeSearchPanel();
+  // }
+  closeSearchPanel() {
+    this.isSearchPanelOpen = false;
+    let cludoSayt = document.querySelectorAll("stencil-cludo-sayt")[0];
+    if (cludoSayt) {
+      let CludoSayt = window.CludoSayt;
+      if (typeof CludoSayt !== "undefined") {
+        CludoSayt.hide();
+      }
+    }
+    this.showBackdropShadow();
+  }
+  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";
+      }
+      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";
+      }
+      location.href = luomus_search_url;
+    }
+    else {
+      this.isSearchPanelOpen = !this.isSearchPanelOpen;
+      if (this.isSearchPanelOpen) {
+        // Close desktop menu panel and lang menu panel if they are open.
+        this.searchPanelToggled.emit();
+        this.adjustPosition(this.el);
+        // Remove hidden class from cludo suggestions
+        let cludoSayt = document.querySelectorAll("stencil-cludo-sayt")[0];
+        if (cludoSayt) {
+          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";
+        }
+        // Without setTimeout it will not focus the input because it hasn't rendered yet.
+        setTimeout(() => {
+          const searchInput = this.el.shadowRoot.querySelector("input#search");
+          searchInput.focus();
+        });
+      }
+      else {
+        this.closeSearchPanel();
+      }
+    }
+    event.stopPropagation();
+  }
+  adjustPosition(target) {
+    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");
+      if (hyHeader) {
+        let headerHeightValue = hyHeader.offsetHeight;
+        headerHeight = `${headerHeightValue}px`;
+        let headerTop = hyHeader.offsetTop;
+        // Add shadow backdrop
+        searchPanel.style.display = "flex";
+        shadowTop = headerHeightValue + headerTop + searchPanel.offsetHeight;
+      }
+    }
+    else {
+      let hyHeader = target.closest(".hy-site-header");
+      if (hyHeader) {
+        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";
+        let searchPanelHeight = searchPanel.offsetHeight;
+        shadowTop = searchPanelHeight + headerHeightValue;
+      }
+    }
+    searchPanel.style.display = initialDisplayStyle;
+    searchPanel.style.top = headerHeight;
+    this.showBackdropShadow("open", shadowTop);
+  }
+  showBackdropShadow(state = "close", top = 0) {
+    let hyHeader = this.el.closest(".hy-site-header");
+    let hyBackdropDiv = hyHeader.children[0];
+    if (hyBackdropDiv) {
+      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");
+      }
+      else {
+        hyBackdropDiv.removeAttribute("style");
+        hyBackdropDiv.classList.remove("is-active");
+      }
+    }
+  }
+  render() {
+    const currentPageUrlPathName = window.location.pathname;
+    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)));
+    })))), 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 }))))))));
+  }
+  get el() { return this; }
+  static get style() { return siteSearchCss; }
+}, [1, "hy-site-search", {
+    "color": [1],
+    "isAlternative": [4, "is-alternative"],
+    "isGroup": [4, "is-group"],
+    "isLuomusGroup": [4, "is-luomus-group"],
+    "isBetaGroup": [4, "is-beta-group"],
+    "searchLanguage": [1, "search-language"],
+    "labels": [1],
+    "searchLabels": [1, "search-labels"],
+    "searchTools": [1, "search-tools"],
+    "showLabel": [4, "show-label"],
+    "size": [2],
+    "dataSearchSpecialTools": [1, "data-search-special-tools"],
+    "isSearchPanelOpen": [32]
+  }, [[4, "menuDesktopToggled", "desktopMenuToggled"], [4, "menuMobileToggled", "mobileMenuToggled"], [4, "menuLanguageToggled", "menuLanguageToggled"], [4, "universityMainMenuToggled", "universityMainMenuPanelToggled"], [8, "click", "handleWindowClick"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-site-search", "hy-icon", "hy-paragraph-text", "hy-search-field"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-site-search":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SiteSearch);
+      }
+      break;
+    case "hy-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "hy-paragraph-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "hy-search-field":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { SiteSearch as S, defineCustomElement as d };

package/{dist/esm/utils-43c56d92.js → components/utils.js}

@@ -236,4 +236,4 @@ var GeneralListTypes;
   GeneralListTypes["grid"] = "grid";
 })(GeneralListTypes || (GeneralListTypes = {}));
 
-export { AccordionVariants as A, BreadcrumbVariants as B, CtaLinkButtonVariants as C, FooterLinkItemColor as F, GridColumns as G, HeadingVarians as H, KeyHighlightVariants as K, ListStyleVariants as L, MenuType as M, PaginationItemVariants as P, SiteLogoSize as S, GridColumnsSm as a, GridColumnsLg as b, GridAlignVariants as c, CheckboxVariants as d, CourseVariants as e, CourseStateVariants as f, CtaLinkVariants as g, ColorVariant as h, FooterVariant as i, FooterLinkVariants as j, HeadingSectionVariants as k, GeneralListTypes as l, HeroTypeVariant as m, HeroGroupTypeVariant as n, HeroColorVariant as o, HeroSizeVariant as p, LinkVariants as q, LinkBoxVariants as r, ListItemVariants as s, PersonCardVariants as t, ProcessFlowBoxVariants as u };
+export { AccordionVariants as A, BreadcrumbVariants as B, CtaLinkVariants as C, FooterLinkItemColor as F, GeneralListTypes as G, HeadingVarians as H, KeyHighlightVariants as K, ListStyleVariants as L, MenuType as M, PaginationItemVariants as P, SiteLogoSize as S, CtaLinkButtonVariants as a, CheckboxVariants as b, CourseVariants as c, CourseStateVariants as d, ColorVariant as e, FooterVariant as f, FooterLinkVariants as g, HeadingSectionVariants as h, GridColumns as i, GridColumnsSm as j, GridColumnsLg as k, GridAlignVariants as l, HeroTypeVariant as m, HeroGroupTypeVariant as n, HeroColorVariant as o, HeroSizeVariant as p, LinkVariants as q, LinkBoxVariants as r, ListItemVariants as s, PersonCardVariants as t, ProcessFlowBoxVariants as u };