@itcenteratunihelsinki/huds-lib 0.8.73 → 0.8.75

package/components/site-search.js

@@ -1,4 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { p as proxyCustomElement, H, d as createEvent, h } from './index3.js';
 import { e as ColorVariant } from './utils.js';
 import { j as jsonParserWorker } from './globalScript.js';
 import { d as defineCustomElement$3 } from './icon.js';
@@ -6,182 +6,181 @@ 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:rgba(0, 0, 0, 0.5);border-top: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;height:100vh;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__content{background-color:#f8f8f8;width:100%}.site-search__panel__space-box{height:100%;width:100%}.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 HySiteSearchStyle0 = siteSearchCss;
 
-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);
+const SiteSearch = /*@__PURE__*/ proxyCustomElement(class SiteSearch extends H {
+    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;
     }
-    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"];
+    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 any other dropdown in header.
-  // Do same if user scrolls up or down;
-  closePanelWhenOtherDropdownsTriggered() {
-    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")) {
+    // CLose the search panel if user opens the any other dropdown in header.
+    // Do same if user scrolls up or down;
+    closePanelWhenOtherDropdownsTriggered() {
         this.closeSearchPanel();
-        event.stopPropagation();
-      }
-    }
-  }
-  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) {
-    // What is this??
-    // TODO: Cleanup
-    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;
+    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();
+            }
+        }
     }
-    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
+    closeSearchPanel() {
+        this.isSearchPanelOpen = false;
         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 === null || cludoSearchContentFormElement === void 0 ? void 0 : 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";
+            let CludoSayt = window.CludoSayt;
+            if (typeof CludoSayt !== "undefined") {
+                CludoSayt.hide();
+            }
         }
-        // Without setTimeout it will not focus the input because it hasn't rendered yet.
-        setTimeout(() => {
-          const searchInput = this.el.shadowRoot.querySelector("input#search");
-          searchInput === null || searchInput === void 0 ? void 0 : searchInput.focus();
-        });
-      }
-      else {
-        this.closeSearchPanel();
-      }
+        //this.showBackdropShadow();
     }
-    event.stopPropagation();
-  }
-  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 && this.isSearchPanelOpen) && (h("div", { class: {
-        "site-search__panel": true,
-        "site-search__panel__is-open": this.isSearchPanelOpen,
-      }, "aria-hidden": `${!this.isSearchPanelOpen}` }, h("div", { class: "site-search__panel__content" }, 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 })))), h("div", { class: "site-search__panel__space-box", onClick: () => this.closeSearchPanel() }))))));
-  }
-  get el() { return this; }
-  static get style() { return siteSearchCss; }
+    handleSearchPanelToggle(event) {
+        // What is this??
+        // TODO: Cleanup
+        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 === null || cludoSearchContentFormElement === void 0 ? void 0 : 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 === null || searchInput === void 0 ? void 0 : searchInput.focus();
+                });
+            }
+            else {
+                this.closeSearchPanel();
+            }
+        }
+        event.stopPropagation();
+    }
+    render() {
+        const currentPageUrlPathName = window.location.pathname;
+        const searchPagePathNames = ["/fi/haku", "/en/search", "/sv/sök"];
+        return (h("div", { key: '9f437c37797c7e5bd5854734877af5f5ebf27379', class: {
+                "site-search": true,
+                "site-search__is-open": this.isSearchPanelOpen,
+                "is-group": this.isGroup,
+            } }, h("button", { key: '0711bef406e2961d25b5db2b13168da7ff17e69e', "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", { key: '92daa35b3d0e58eaffc80affcddfbfa257b1cc36', icon: "hy-icon-search", size: this.size, fill: this.color })), (!this.isLuomusGroup && this.isSearchPanelOpen) && (h("div", { key: 'af7013ad82abe5f83a1efabb14c2f441de81c419', class: {
+                "site-search__panel": true,
+                "site-search__panel__is-open": this.isSearchPanelOpen,
+            }, "aria-hidden": `${!this.isSearchPanelOpen}` }, h("div", { key: '6ed52de939989022bf7b75989d26f5513fe2e2b2', class: "site-search__panel__content" }, h("div", { key: '73d114aacb85183187ab53abea184f911cf35345', class: "site-search__panel__wrapper" }, h("div", { key: 'e3404b8aa3910b5e4f79878f5dd042da1ef66dfa', class: "site-search__panel__title" }, h("div", { key: 'aaf3c4cb2c1bb44f7b7c44db208d7c242bbf8db0', class: "site-search__panel__title__group" }, h("span", { key: 'c2301ba1440dd4291591f28d9fa6653b2116a6cc', class: "panel-title" }, this.searchTitleLabel), h("div", { key: 'e289c8398b713fdda0c77278dc300530a9abc16a', class: "description" }, this.searchDescriptionLabel))), h("div", { key: '34bcd7ac864fd13988d31ef2dcde7fe240482757', id: "cludo-search-results", class: "container_12" }, h("div", { key: 'd3a23a35379be079b4842e8be0389521a994a2bc', class: "search-banner" }), h("div", { key: 'c901c907fe8d99e74feef6a0aafa5187361b4832', class: "search-filters search-filters-mobile" }), h("div", { key: '3ffd97dd72c268285875afdda497db6ac88c7677', class: "col-md-12" }, h("div", { key: 'da1ce482ea6f6a3bfa6c86e735a8b1c7a70dd146', style: { margin: "20px 0 32px" }, id: "cludo-search-content-form" }, h("hy-search-field", { key: 'd342ede5f9c546d04ca4734a24cad6a07e7a391b', "input-id": "search", label: "" }))), h("div", { key: 'd685c958c2929351730465e708339faddb4b1864', class: "col-md-3" }, h("div", { key: 'c48085307368025d5769c4fafb1cf2c06ed728e3', class: "search-filters", "aria-controls": "search-results" })), h("div", { key: 'f9d93ef835ea12c5cad682447ee4c8bc75c475c0', class: "col-md-9" }, h("div", { key: 'fd04d8274e9a0b2f7e23cdf37d696bc889fd74bc', class: "search-results-container" }, h("hy-paragraph-text", { key: '38e86a92828084826ae50f77428f064634bd342f' }, h("div", { key: 'f68102417dee83ad19c3539ae5b76cfeb8da26a2', class: "search-result-count" })), h("div", { key: '4c13e758cef6c77ae4aae2f8d6059461cadbd640', class: "search-did-you-mean", role: "Complementary" }), h("div", { key: 'aca5ed57e5051c1b6d7c894c72ea63e7905b7f5b', class: "search-results", role: "region", id: "search-results", "aria-live": "polite" })))), this._searchTools && this._searchTools.length > 0 && (h("div", { key: 'e38b26dadcac5fa6e6a630bf031b9ed0510980a4', class: "site-search__panel__tools" }, h("div", { key: '3f285cc5ba6439f80d27707a44f37c697560b09d', class: "title" }, this.searchToolsLabel), h("div", { key: 'a73845acae85f2ced5d0bf2d2a098603d134b3ee', 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", { key: '53010753be2d1bf888806172866cfab1651954fe', onClick: () => this.closeSearchPanel(), class: {
+                "site-search__panel__panel-toggle": true,
+            }, "aria-label": this.searchCloseLabel, "aria-expanded": `${this.isSearchPanelOpen}` }, h("span", { key: '4f0aa66d5136788dca11bddf47c569651db43f46', class: "site-search__panel__panel-toggle__label" }, h("span", { key: 'b9e7af6ad56dd5bccca194ab906b7337b5aad0b0', class: "site-search__panel__panel-toggle__label__title", tabindex: "0" }, this.searchCloseLabel), h("hy-icon", { key: 'd8baf375ca28cf9126c5a69b1c0b9a47b07e4522', icon: "hy-icon-remove", size: 16, fill: ColorVariant.black })))), h("div", { key: 'f580d8f64b162aa847c4de699257a11b21debf53', class: "site-search__panel__space-box", onClick: () => this.closeSearchPanel() }))))));
+    }
+    get el() { return this; }
+    static get style() { return HySiteSearchStyle0; }
 }, [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, "menuMobileToggled", "closePanelWhenOtherDropdownsTriggered"], [4, "menuDesktopToggled", "closePanelWhenOtherDropdownsTriggered"], [4, "menuLanguageToggled", "closePanelWhenOtherDropdownsTriggered"], [4, "universityMainMenuToggled", "closePanelWhenOtherDropdownsTriggered"], [8, "menuToggled", "closePanelWhenOtherDropdownsTriggered"], [4, "headerScrollUp", "closePanelWhenOtherDropdownsTriggered"], [4, "headerScrollDown", "closePanelWhenOtherDropdownsTriggered"], [8, "click", "handleWindowClick"]]]);
+        "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, "menuMobileToggled", "closePanelWhenOtherDropdownsTriggered"], [4, "menuDesktopToggled", "closePanelWhenOtherDropdownsTriggered"], [4, "menuLanguageToggled", "closePanelWhenOtherDropdownsTriggered"], [4, "universityMainMenuToggled", "closePanelWhenOtherDropdownsTriggered"], [8, "menuToggled", "closePanelWhenOtherDropdownsTriggered"], [4, "headerScrollUp", "closePanelWhenOtherDropdownsTriggered"], [4, "headerScrollDown", "closePanelWhenOtherDropdownsTriggered"], [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;
-  } });
+    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 };
-
-//# sourceMappingURL=site-search.js.map