@telia-ace/knowledge-widget-components-search 1.1.8 → 1.2.2

package/search-9b2fdf13.mjs

@@ -0,0 +1,987 @@
+import { jsxs as F, jsx as y, Fragment as xe } from "react/jsx-runtime";
+import { css as j } from "@emotion/react";
+import z from "@emotion/styled";
+import { borderTabStyle as J, Text as se, Link as ie, SymbolBadge as X, useProperties as K, useDispatch as M, useRouteData as ae, useEventListener as U, useKeyPress as Q, Tooltip as $e, ItemTree as we, contentBox as ce, useScroll as Ce, useContainer as le, Loader as Ae, useDebounce as Se, usePrevious as ee, useChildren as ve, useWidgetEvent as Ie, useTransitionEnd as Ee, convertToStringAttributes as qe, Input as ze, Button as de } from "@telia-ace/knowledge-widget-ui";
+import { Component as Le } from "@telia-ace/widget-types-grid";
+import { appendClassNames as Y, deepClone as De, categoryTrail as Fe } from "@telia-ace/widget-utilities";
+import { useRef as Z, useState as B, useCallback as I, useEffect as O, useMemo as Be } from "react";
+const Ne = ({
+  text: e,
+  className: t,
+  filterType: n,
+  handleClick: a,
+  deleteAriaLabel: u = "",
+  ...c
+}) => {
+  const r = Z(), [$, k] = B(
+    document.activeElement === r.current
+  );
+  return /* @__PURE__ */ F(
+    se,
+    {
+      className: Y(
+        t,
+        "humany-filter-badge",
+        $ ? "humany-filter-badge-focused" : ""
+      ),
+      onKeyDown: (p) => {
+        p.key === "Enter" && a(p, n);
+      },
+      children: [
+        e,
+        /* @__PURE__ */ y(
+          ie,
+          {
+            ...c,
+            ref: r,
+            tabIndex: 0,
+            onFocus: () => {
+              k(!0);
+            },
+            onBlur: () => {
+              k(!1);
+            },
+            role: "button",
+            "aria-label": u.replace("{{item}}", e),
+            onClick: (p) => a(p, n),
+            children: /* @__PURE__ */ y(X, { size: 13, symbol: { type: "Svg", content: "close" } })
+          }
+        )
+      ]
+    }
+  );
+}, Te = ({
+  inputHasFocus: e,
+  searchContainerRef: t,
+  showTag: n,
+  showGuideCategory: a,
+  position: u
+}) => {
+  const { activeFilterBadges: c, deleteFilterBadgeAriaLabel: r = "" } = K(), $ = M(), { name: k, params: p } = ae(), [E, m] = B(!1), C = I((s) => {
+    const { key: d } = s;
+    ["ArrowLeft", "ArrowRight"].indexOf(d) === -1 && m(!1);
+  }, []);
+  U("keydown", C, window), U("click", C, window);
+  const { guideCategory: A, tag: h, tooltip: q } = c || {}, l = (s) => {
+    const d = s.querySelectorAll(
+      ".humany-filter-badge > a"
+    );
+    return {
+      badges: d,
+      index: Array.from(d).findIndex((g) => document.activeElement === g)
+    };
+  }, o = I(
+    (s, d, g) => {
+      s.preventDefault(), $("quick-filter:remove", { types: [d], ids: [g] });
+    },
+    [$]
+  ), i = (s, d) => {
+    if (!t)
+      return;
+    const { badges: g, index: b } = l(t);
+    if (g.length) {
+      let v = null;
+      s === "left" ? b === -1 ? v = g.item(g.length - 1) : b > 0 && (v = g.item(b - 1)) : s === "right" && (b === g.length - 1 ? d && d.focus() : g.item(b + 1) && (v = g.item(b + 1))), v && (v.focus(), m(!0));
+    }
+  };
+  Q(
+    "ArrowLeft",
+    I(() => {
+      if (!t)
+        return;
+      const { index: s } = l(t);
+      if (e || s > -1) {
+        const d = t.querySelector('[data-type="search"]'), g = d && d.selectionStart !== null && d.selectionStart <= 0, b = s > -1;
+        (g || b) && i("left", d);
+      }
+    }, [e, t])
+  ), Q(
+    "ArrowRight",
+    I(() => {
+      if (!t)
+        return;
+      const { index: s } = l(t);
+      if (s > -1) {
+        const d = t.querySelector('[data-type="search"]');
+        s > -1 && i("right", d);
+      }
+    }, [t])
+  ), Q(
+    "Backspace",
+    I(
+      (s) => {
+        if (!t)
+          return;
+        let d = [];
+        const { index: g } = l(t), b = t.querySelector('[data-type="search"]');
+        if (g > -1)
+          g === 0 ? a ? d = ["guideCategory"] : n && (d = ["tag"]) : g === 1 && (d = ["tag"]);
+        else {
+          const x = document.activeElement === b;
+          b && b.selectionStart !== null && b.selectionStart <= 0 && x && (c != null && c.tag.length ? d = ["tag"] : c != null && c.guideCategory && (d = ["guideCategory"]));
+        }
+        if (d.length > 0) {
+          s.preventDefault();
+          let x;
+          if (d.includes("tag")) {
+            const L = c == null ? void 0 : c.tag.at(-1);
+            x = L == null ? void 0 : L.id;
+          }
+          $("quick-filter:remove", {
+            types: d,
+            ids: [x]
+          });
+        }
+      },
+      [
+        t,
+        c,
+        n,
+        a,
+        $
+      ]
+    )
+  );
+  const f = I(
+    (s) => s === "guideCategory" && A && a ? /* @__PURE__ */ y(
+      te,
+      {
+        text: `@${A.title}`,
+        routeName: k,
+        filterType: "guideCategory",
+        handleClick: o,
+        deleteAriaLabel: r,
+        params: {
+          ...p,
+          guideCategory: void 0
+        }
+      }
+    ) : s === "tag" && (h != null && h.length) && n ? h.map((d) => {
+      const g = h.reduce((b, v) => (v.id !== d.id && b.push(v.id), b), []);
+      return /* @__PURE__ */ y(
+        te,
+        {
+          className: "humany-filter-badge",
+          text: `#${d.title}`,
+          routeName: k,
+          filterType: "tag",
+          handleClick: (b) => o(b, "tag", d.id),
+          deleteAriaLabel: r,
+          params: {
+            ...p,
+            tag: g
+          }
+        },
+        d.id
+      );
+    }) : null,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      A,
+      h,
+      k,
+      p,
+      a,
+      n,
+      E,
+      o
+    ]
+  );
+  return !A && !h ? null : /* @__PURE__ */ F(Oe, { className: "humany-filter-badges", position: u, children: [
+    A && q ? (
+      // eslint-disable-next-line react/jsx-no-useless-fragment
+      /* @__PURE__ */ y($e, { content: /* @__PURE__ */ y(xe, { children: q }), sticky: !1, children: f("guideCategory") })
+    ) : f("guideCategory"),
+    h && f("tag")
+  ] });
+}, Oe = z.div`
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+
+  ${(e) => {
+  var t, n;
+  return e.position === "inside" ? j`
+          &:not(:first-child) {
+            margin: 0 0 0 ${(t = e.theme.sizes) == null ? void 0 : t.normal};
+          }
+        ` : j`
+          margin: ${(n = e.theme.sizes) == null ? void 0 : n.small} 0 0 0;
+          span:first-child {
+            margin-left: 0;
+          }
+        `;
+}}
+`, te = z(Ne)`
+  display: flex;
+  align-items: center;
+  padding: ${(e) => {
+  var t, n;
+  return `${(t = e.theme.sizes) == null ? void 0 : t.small} calc(${(n = e.theme.sizes) == null ? void 0 : n.normal}/2) `;
+}};
+  background-color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.primary;
+}};
+  border-radius: ${(e) => e.theme.borderRadius};
+  font-weight: 300;
+  font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.normal;
+}};
+  font-style: italic;
+  color: #ffffff;
+  text-decoration: none;
+  white-space: nowrap;
+
+  margin: calc(${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.small;
+}} / 2);
+
+  &.humany-filter-badge-focused:focus-within {
+    ${J}
+    background-color: transparent;
+
+    svg {
+      path {
+        stroke: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.primary;
+}};
+      }
+    }
+    a {
+      outline: none;
+    }
+  }
+
+  svg {
+    width: 17px;
+    height: 11px;
+    margin: 1px 0 0 ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.small;
+}};
+    path {
+      stroke: #ffffff;
+      stroke-width: 2px;
+    }
+    order: 1;
+  }
+`, T = (e, t) => !t || !e ? !0 : e.toLowerCase().indexOf(t.toLowerCase()) > -1, je = (e = [], t, n) => {
+  if (!n)
+    return e;
+  const a = De(e);
+  if (t === "tag")
+    return a.filter((r) => T(r.title, n));
+  const u = Ke(a, n);
+  return ue(
+    a,
+    (r) => u.indexOf(r.id) > -1
+  );
+}, ue = (e, t) => e.filter((n) => (n.items && n.items.length && (n.items = ue(n.items, t)), t(n))), Ke = (e, t) => {
+  const a = fe(e).filter((c) => T(c.title, t)).map((c) => c.id);
+  let u = [];
+  return a.forEach((c) => {
+    const r = Fe(c, e);
+    u = u.concat(r);
+  }), u;
+}, fe = (e) => {
+  let t = [];
+  return e.forEach((n) => {
+    t.push(n), Array.isArray(n.items) && (t = t.concat(fe(n.items)));
+  }), t;
+}, G = (e) => {
+  const t = Array.from((e == null ? void 0 : e.getElementsByTagName("A")) || []).filter(
+    (n) => n.getAttribute("disabled") === null
+  );
+  return {
+    anchors: t,
+    focusedIndex: t.findIndex((n) => document.activeElement === n)
+  };
+}, Pe = (e) => e ? e.querySelector(
+  '[data-type="search"], input[type="search"]'
+) : null, H = (e) => {
+  if (!e)
+    return;
+  const t = Pe(e);
+  t && t.focus();
+}, We = ({
+  filterPhrase: e,
+  items: t,
+  filterType: n,
+  filterContainer: a,
+  searchContainer: u,
+  inputHasFocus: c
+}) => {
+  const [r, $] = B(t || []), [k, p] = B(null), E = M(), { activeFilterBadges: m, quickFilters: C } = K(), A = typeof C == "object" && !!C.autoSelect || typeof C == "boolean" && !!C;
+  O(() => {
+    $(je(t, n, e));
+  }, [e, n, t]), O(() => {
+    var l;
+    if (a) {
+      const { anchors: o } = G(a), i = (l = o[0]) == null ? void 0 : l.getAttribute("data-id");
+      i && p(i);
+    }
+  }, [r, a]);
+  const h = I(
+    (l, o) => {
+      let i = ((m == null ? void 0 : m.tag) || []).map((s) => s.id);
+      o === "tag" && l.id && (i = i.includes(l.id) ? i.filter((s) => s !== l.id) : [...i, l.id]);
+      const f = {
+        category: m != null && m.guideCategory ? m.guideCategory.id : void 0,
+        tagIds: i
+      };
+      o === "guideCategory" && (f.category = l.id), E("quick-filter:add", f);
+    },
+    [m, E]
+  ), q = (l) => l === "guideCategory" ? {
+    renderItem: (o, i) => /* @__PURE__ */ y(
+      re,
+      {
+        autoSelect: A && c && o.id === k,
+        disabled: !T(o.title, e),
+        tabIndex: T(o.title, e) ? 0 : -1,
+        onKeyDown: (f) => {
+          f.key === "Enter" && h(o, l);
+        },
+        "data-level": i,
+        onClick: () => {
+          h(o, l);
+        },
+        "data-id": o.id,
+        children: /* @__PURE__ */ y(
+          ne,
+          {
+            title: o.title,
+            phrase: e,
+            matches: T(o.title, e)
+          }
+        )
+      }
+    )
+  } : {
+    renderLi: !0,
+    renderItem: (o) => /* @__PURE__ */ y(
+      re,
+      {
+        autoSelect: A && c && o.id === k,
+        onKeyDown: (i) => {
+          i.key === "Enter" && h(o, l);
+        },
+        onClick: () => {
+          h(o, l);
+        },
+        "data-id": o.id,
+        children: /* @__PURE__ */ y(
+          ne,
+          {
+            symbol: "#",
+            title: o.title,
+            phrase: e,
+            matches: T(o.title, e)
+          }
+        )
+      }
+    )
+  };
+  return U(
+    "keydown",
+    (l) => {
+      var v;
+      const { key: o } = l;
+      if (!a || !(o === "ArrowDown" || o === "ArrowUp" || o === "Enter"))
+        return;
+      const { anchors: i, focusedIndex: f } = G(a);
+      if (o === "Enter") {
+        if (c && A) {
+          const x = (v = i[0]) == null ? void 0 : v.getAttribute("data-id");
+          x && h({ id: x }, n);
+        }
+        return;
+      }
+      const s = () => {
+        var x;
+        return (x = i[0]) == null ? void 0 : x.focus();
+      }, d = () => {
+        var x;
+        return (x = i[i.length - 1]) == null ? void 0 : x.focus();
+      }, g = () => {
+        var x;
+        return (x = i[f + 1]) == null ? void 0 : x.focus();
+      }, b = () => {
+        var x;
+        return (x = i[f - 1]) == null ? void 0 : x.focus();
+      };
+      c ? (l.preventDefault(), o === "ArrowDown" ? s() : d()) : f > -1 && (l.preventDefault(), o === "ArrowDown" ? i.length > f + 1 ? g() : H(u) : f - 1 < 0 ? H(u) : b());
+    },
+    window
+  ), /* @__PURE__ */ y(
+    we,
+    {
+      tree: r,
+      renderEmpty: !1,
+      ulProps: { role: "listbox" },
+      liProps: { role: "option" },
+      ...q(n)
+    }
+  );
+}, ne = ({
+  title: e,
+  phrase: t,
+  matches: n,
+  symbol: a = ""
+}) => {
+  const u = () => {
+    if (!n || !t)
+      return [e];
+    const k = e.toLowerCase().indexOf(t.toLowerCase()), p = e.substr(0, k), E = e.slice(k, k + t.length), m = e.substr(k + t.length);
+    return [p, E, m];
+  }, [c, r, $] = u();
+  return /* @__PURE__ */ F(se, { children: [
+    a,
+    c,
+    r ? /* @__PURE__ */ y("strong", { children: r }) : null,
+    $ || null
+  ] });
+}, Me = j`
+  opacity: 0.5;
+  pointer-events: none;
+`, oe = (e) => {
+  var t, n;
+  return j`
+  background-color: ${(t = e.theme.colors) == null ? void 0 : t.text};
+  color: #ffffff;
+  outline: none;
+
+  span:first-child {
+    border-color: ${(n = e.theme.colors) == null ? void 0 : n.text};
+  }
+`;
+}, re = z(ie)`
+  display: block;
+  text-decoration: none;
+  font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.normal;
+}};
+
+  ${(e) => e.disabled && Me}
+  color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+  background-color: transparent;
+
+  span {
+    display: block;
+    ${(e) => {
+  var t, n, a, u;
+  return e["data-level"] ? `padding: calc(${(t = e.theme.sizes) == null ? void 0 : t.normal} / 2) ${(n = e.theme.sizes) == null ? void 0 : n.normal};` : `padding: calc(${(a = e.theme.sizes) == null ? void 0 : a.normal} / 2) ${(u = e.theme.sizes) == null ? void 0 : u.medium};  `;
+}}
+    ${(e) => e["data-level"] && "border-left: 2px solid"}
+  }
+
+  span:first-child {
+    border-color: #e7e7e7;
+  }
+
+  ${(e) => {
+  var t;
+  return e["data-level"] && `padding: 0 calc(${(t = e.theme.sizes) == null ? void 0 : t.medium} * ${e["data-level"]});`;
+}}
+
+  ${(e) => e.autoSelect && oe}
+
+  &:hover,
+  &:focus {
+    ${oe}
+  }
+`, Qe = ({ phrase: e = "", inputHasFocus: t, searchContainerRef: n }) => {
+  const {
+    quickFilter: a = {
+      open: !1,
+      loading: !1,
+      symbol: "",
+      type: "",
+      items: []
+    },
+    activeFilterBadges: u,
+    noMatchesLabel: c = "No matching items"
+  } = K(), [r, $] = Ce(!0), k = le(), { events: p } = k.get("$widget"), E = Z(), m = I(
+    (f) => (f && f.addEventListener(
+      "keydown",
+      () => {
+        G(f).focusedIndex > -1 && p.subscribeOnce("router:changed", () => {
+          H(n);
+        });
+      },
+      !0
+    ), E.current = f, f),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [n]
+  ), { items: C = [], symbol: A, type: h, open: q, loading: l } = a, o = Be(() => {
+    const f = ((u == null ? void 0 : u.tag) || []).map((s) => s.id);
+    return C.filter((s) => !f.includes(s.id));
+  }, [C, u]);
+  if (!q || !A)
+    return null;
+  const i = e.slice(e.indexOf(A) + 1);
+  return /* @__PURE__ */ F(
+    Xe,
+    {
+      ref: m,
+      "data-loading": l,
+      className: Y(
+        "humany-quick-filter-dropdown",
+        [h === "guideCategory", "humany-quick-filter-guide-categories"],
+        [h === "tag", "humany-quick-filter-tags"]
+      ),
+      children: [
+        /* @__PURE__ */ y(Ue, { className: "humany-quick-filter-dropdown-inner", css: r, ref: $, children: o.length > 0 ? /* @__PURE__ */ y(
+          We,
+          {
+            filterType: h,
+            items: o,
+            filterPhrase: i,
+            filterContainer: $.current,
+            searchContainer: n,
+            inputHasFocus: t
+          }
+        ) : /* @__PURE__ */ y(Ge, { children: c }) }),
+        /* @__PURE__ */ y(Ae, { loading: l })
+      ]
+    }
+  );
+}, Xe = z.div`
+  ${(e) => ce(e)};
+  position: absolute;
+  top: calc(100% + ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}});
+  left: 0;
+  right: 0;
+  z-index: 1;
+  overflow: hidden;
+`, Ue = z.div`
+  max-height: 300px;
+  overflow: auto;
+  padding: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.medium;
+}} 0;
+  ${(e) => e.css}
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+  li div {
+    ${(e) => {
+  var t;
+  return `margin: ${(t = e.theme.sizes) == null ? void 0 : t.normal} 0;`;
+}}
+  }
+`, Ge = z.p`
+  margin: 0 ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+  color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+`, W = (e, t) => {
+  if (e && !t || !e && t)
+    return !0;
+  if (e && t) {
+    if (!Array.isArray(e) && !Array.isArray(t)) {
+      if (e.id !== t.id)
+        return !0;
+    } else if (!((a, u) => a.length === u.length ? a.every((c, r) => c === u[r]) : !1)(e, t))
+      return !0;
+  }
+  return !1;
+}, He = (e, t = {}, n = !0) => {
+  const a = M(), {
+    quickFilters: u = !1,
+    quickFilter: c = { open: !1 },
+    activeFilterBadges: r,
+    filterBadges: $ = !1,
+    incremental: k = 600
+  } = K(), p = Se(
+    e,
+    typeof k == "boolean" ? 600 : k
+  ), E = ee(p), m = ee(r), C = Z(null), A = I(
+    (o = "") => {
+      var i;
+      if ($) {
+        const f = W(
+          r == null ? void 0 : r.guideCategory,
+          m == null ? void 0 : m.guideCategory
+        ) || W(r == null ? void 0 : r.tag, m == null ? void 0 : m.tag);
+        return a("search", {
+          value: o,
+          filtersChanged: f,
+          filters: {
+            tagIds: ((r == null ? void 0 : r.tag) || []).map((s) => s.id),
+            guideCategoryId: ((i = r == null ? void 0 : r.guideCategory) == null ? void 0 : i.id) || null
+          }
+        });
+      }
+      return a("search", { value: o });
+    },
+    [a, r]
+  ), h = I(
+    (o) => {
+      a("clear", { navigateToHome: o });
+    },
+    [a]
+  ), q = (o) => u ? o.replace(/([@#].*)/g, "") : o, l = I(
+    (o) => {
+      if (c.open && o.preventDefault) {
+        o.preventDefault();
+        return;
+      }
+      const i = document.activeElement, f = C.current && typeof C.current.contains == "function" ? C.current.contains(i) : !1, s = q(e);
+      typeof o == "boolean" && o || s.length && f || r != null && r.guideCategory || r != null && r.tag.length && f ? A(s) : h(f);
+    },
+    [
+      C,
+      e,
+      c,
+      h,
+      r,
+      A
+    ]
+  );
+  return O(() => {
+    const o = W(
+      r == null ? void 0 : r.guideCategory,
+      m == null ? void 0 : m.guideCategory
+    ) || W(r == null ? void 0 : r.tag, m == null ? void 0 : m.tag), i = p && q(p), f = E && q(E);
+    typeof f < "u" && f !== i && i !== t.phrase && n && !c.open && l(o);
+  }, [p, c.open, r, l]), O(() => {
+    if (e && u) {
+      const o = typeof u == "boolean" && !!u || typeof u == "object" && !!u.guideCategory, i = typeof u == "boolean" && !!u || typeof u == "object" && !!u.tag;
+      o && e.indexOf("@") === e.length - 1 && a("quick-filter:open", { type: "guideCategory", symbol: "@" }), i && e.indexOf("#") === e.length - 1 && a("quick-filter:open", { type: "tag", symbol: "#" });
+    }
+    c.open && e.indexOf("@") === -1 && e.indexOf("#") === -1 && a("quick-filter:close");
+  }, [e]), [l, h, C];
+}, st = ({ className: e, ...t }) => {
+  const {
+    showSearchButton: n,
+    showClearButton: a,
+    role: u = "search",
+    autoFocus: c,
+    placeholder: r,
+    searchButtonLabel: $,
+    searchButtonText: k,
+    clearButtonLabel: p,
+    ariaLabel: E,
+    route: m = "search",
+    incremental: C = !0,
+    showChildren: A = !1,
+    quickFilter: h,
+    quickFilters: q,
+    filterBadges: l
+  } = K(), { params: o } = ae(), [i, f] = B(!1), [s, d] = B(o.phrase || ""), [g, b] = B({
+    guideCategory: !1,
+    tag: !1
+  }), v = le(), x = ve(), L = M(), { position: ge = "inside" } = typeof l == "object" ? l : {};
+  O(() => {
+    const { guideCategory: w, tag: S } = o, D = typeof l == "object" ? !!l.guideCategory : !!l, ke = typeof l == "object" ? !!l.tag : !!l;
+    b({
+      guideCategory: D && !!w,
+      tag: ke && !!S
+    });
+  }, [l, o]), Ie(
+    "router:changed",
+    () => {
+      if (h) {
+        const { open: w, symbol: S } = h;
+        if (w) {
+          if (S) {
+            const D = s.replace(
+              s.slice(s.indexOf(S)),
+              ""
+            );
+            d(D);
+          }
+          L("quick-filter:close");
+        }
+      }
+    },
+    [h, s, d, L]
+  );
+  const [_, P, N] = He(s, o, !!C);
+  O(() => {
+    d(o.phrase || "");
+  }, [o.phrase]);
+  const me = I(
+    (w) => {
+      d(w);
+    },
+    [d]
+  ), he = I(() => {
+    L("quick-filter:close").then(() => P(!0));
+  }, [L, P]), pe = I(() => {
+    var w, S;
+    c && !i && ((S = (w = N.current) == null ? void 0 : w.getElementsByTagName("input")[0]) == null || S.focus());
+  }, [c, i, N]), ye = I(() => {
+    v.getAsync("router").then((w) => {
+      const S = w.getInitialRoute(), D = w.getRouteData();
+      (S == null ? void 0 : S.name) === D.name && (S == null ? void 0 : S.name) !== m ? d("") : P(!0);
+    });
+  }, [v, d, P]), R = (w) => {
+    if (w !== ge)
+      return null;
+    if (g.guideCategory || g.tag)
+      return /* @__PURE__ */ y(
+        Te,
+        {
+          position: w,
+          inputHasFocus: i,
+          showGuideCategory: g.guideCategory,
+          showTag: g.tag,
+          searchContainerRef: N.current
+        }
+      );
+  };
+  Ee(pe);
+  const V = a && (g.guideCategory || g.tag || s), be = q ? qe({
+    role: "combobox",
+    "aria-autocomplete": "list",
+    autoComplete: "off",
+    "aria-haspopup": "listbox"
+  }) : {};
+  return /* @__PURE__ */ F(
+    Je,
+    {
+      ...t,
+      ref: N,
+      role: u,
+      className: Y(e, "humany-search"),
+      "data-has-phrase": !!s,
+      "data-has-focus": i,
+      "data-has-search-symbol": n ? "true" : "false",
+      children: [
+        /* @__PURE__ */ F(
+          Ye,
+          {
+            action: ".",
+            onSubmit: (w) => {
+              var S, D;
+              w.preventDefault(), (D = (S = N.current) == null ? void 0 : S.getElementsByTagName("input")[0]) == null || D.blur();
+            },
+            "data-has-focus": i,
+            children: [
+              n && /* @__PURE__ */ F(
+                Ze,
+                {
+                  "aria-label": $,
+                  type: "submit",
+                  title: $,
+                  disabled: !s,
+                  onClick: _,
+                  "data-has-phrase": !!s,
+                  "data-has-focus": i,
+                  children: [
+                    /* @__PURE__ */ y(
+                      X,
+                      {
+                        size: 32,
+                        symbol: { type: "Svg", content: "search" }
+                      }
+                    ),
+                    k
+                  ]
+                }
+              ),
+              R("inside"),
+              /* @__PURE__ */ y(
+                ze,
+                {
+                  crossOrigin: void 0,
+                  type: "search",
+                  "aria-label": E,
+                  ...be,
+                  placeholder: g.guideCategory || g.tag ? "" : r,
+                  onFocusChange: f,
+                  onEscape: he,
+                  onEnter: _,
+                  onChange: me,
+                  value: s
+                }
+              ),
+              V && /* @__PURE__ */ y(
+                _e,
+                {
+                  "aria-label": p,
+                  type: "reset",
+                  hasFocus: i,
+                  title: p,
+                  onClick: ye,
+                  children: /* @__PURE__ */ y(X, { size: 27, symbol: { type: "Svg", content: "clear" } })
+                }
+              ),
+              A && !V && x.map((w) => /* @__PURE__ */ y(Le, { id: w.id, branch: "default" }, w.id)),
+              /* @__PURE__ */ y(
+                Qe,
+                {
+                  inputHasFocus: i,
+                  phrase: s,
+                  searchContainerRef: N.current
+                }
+              )
+            ]
+          }
+        ),
+        R("below")
+      ]
+    }
+  );
+}, Je = z.div`
+  ${ce};
+  width: 100%;
+  padding: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.large;
+}};
+
+  input {
+    background-color: transparent;
+    border: none;
+    outline: none;
+    min-width: 25%;
+    flex: 1;
+    font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.normal;
+}};
+    font-weight: 300;
+    font-style: italic;
+    padding: 1em 0;
+    color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+    -webkit-appearance: none;
+
+    ${(e) => {
+  var t;
+  return e["data-has-search-symbol"] === "true" && `text-indent: ${(t = e.theme.sizes) == null ? void 0 : t.normal};`;
+}}
+
+    ::placeholder {
+      color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+    }
+    /* removes the 'X' from IE */
+    &[type='search']::-ms-clear {
+      display: none;
+      width: 0;
+      height: 0;
+    }
+    &[type='search']::-ms-reveal {
+      display: none;
+      width: 0;
+      height: 0;
+    }
+
+    /* removes the 'X' from Chrome */
+    &[type='search']::-webkit-search-decoration,
+    &[type='search']::-webkit-search-cancel-button,
+    &[type='search']::-webkit-search-results-button,
+    &[type='search']::-webkit-search-results-decoration {
+      display: none;
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.large;
+}};
+    transition: color 200ms ease-out;
+    color: ${(e) => {
+  var t;
+  return e["data-has-focus"] || e["data-has-phrase"] ? (t = e.theme.colors) == null ? void 0 : t.primary : "#000000";
+}};
+    cursor: pointer;
+    > svg {
+      height: 100%;
+    }
+  }
+`, Ye = z.form`
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  border: ${(e) => e.theme.inputBorder};
+  border-radius: ${(e) => e.theme.borderRadius};
+  background-color: #ffffff;
+  position: relative;
+  padding: 0 ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+
+  ${(e) => {
+  var t, n;
+  return e["data-has-focus"] && j`
+      ${(t = e.theme.accessibility) != null && t.isTabbing ? J(e) : `
+        border-color: ${(n = e.theme.colors) == null ? void 0 : n.primary};
+        outline: none;
+        input {
+          outline: none;
+        }
+      `}
+    `;
+}};
+`, Ze = z(de)`
+  padding: 0;
+  height: 2em;
+
+  svg {
+    circle,
+    line {
+      stroke: ${(e) => {
+  var t;
+  return e["data-has-focus"] ? (t = e.theme.colors) == null ? void 0 : t.primary : "#000000";
+}};
+    }
+  }
+`, _e = z(de)`
+  &:focus-visible svg {
+    ${J}
+  }
+
+  svg {
+    vertical-align: top;
+
+    circle,
+    line,
+    path {
+      stroke: ${(e) => {
+  var t, n;
+  return e.hasFocus ? (t = e.theme.colors) == null ? void 0 : t.primary : (n = e.theme.colors) == null ? void 0 : n.text;
+}};
+    }
+  }
+`;
+export {
+  st as default
+};