@telia-ace/knowledge-widget-components-search 1.0.43 → 1.0.44-next.1

package/dist/search.9c0e8397.js

@@ -0,0 +1,938 @@
+var Ie = Object.defineProperty, ve = Object.defineProperties;
+var qe = Object.getOwnPropertyDescriptors;
+var Q = Object.getOwnPropertySymbols;
+var se = Object.prototype.hasOwnProperty, ie = Object.prototype.propertyIsEnumerable;
+var re = (e, t, n) => t in e ? Ie(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n, F = (e, t) => {
+  for (var n in t || (t = {}))
+    se.call(t, n) && re(e, n, t[n]);
+  if (Q)
+    for (var n of Q(t))
+      ie.call(t, n) && re(e, n, t[n]);
+  return e;
+}, N = (e, t) => ve(e, qe(t));
+var G = (e, t) => {
+  var n = {};
+  for (var r in e)
+    se.call(e, r) && t.indexOf(r) < 0 && (n[r] = e[r]);
+  if (e != null && Q)
+    for (var r of Q(e))
+      t.indexOf(r) < 0 && ie.call(e, r) && (n[r] = e[r]);
+  return n;
+};
+import { css as P } from "@emotion/react";
+import z from "@emotion/styled";
+import { useProperties as W, useDispatch as U, useRouteData as fe, useEventListener as J, useKeyPress as H, Tooltip as ze, borderTabStyle as R, Text as me, Link as ge, SymbolBadge as Y, ItemTree as Le, useScroll as Fe, useContainer as he, Loader as De, contentBox as pe, useDebounce as Be, usePrevious as ae, useChildren as Ne, useWidgetEvent as Te, useTransitionEnd as Oe, convertToStringAttributes as Ke, Input as Pe, Button as ye } from "@telia-ace/knowledge-widget-ui";
+import { Component as We } from "@telia-ace/widget-types-grid";
+import { appendClassNames as V, deepClone as je, categoryTrail as Me } from "@telia-ace/widget-utilities";
+import g, { useState as D, useCallback as I, useRef as ee, useEffect as O, useMemo as Qe } from "react";
+const Xe = (s) => {
+  var $ = s, {
+    text: e,
+    className: t,
+    filterType: n,
+    handleClick: r,
+    deleteAriaLabel: l = ""
+  } = $, u = G($, [
+    "text",
+    "className",
+    "filterType",
+    "handleClick",
+    "deleteAriaLabel"
+  ]);
+  const b = ee(), [x, w] = D(document.activeElement === b.current);
+  return /* @__PURE__ */ g.createElement(
+    me,
+    {
+      className: V(
+        t,
+        "humany-filter-badge",
+        x ? "humany-filter-badge-focused" : ""
+      ),
+      onKeyDown: (f) => {
+        f.key === "Enter" && r(f, n);
+      }
+    },
+    e,
+    /* @__PURE__ */ g.createElement(
+      ge,
+      N(F({}, u), {
+        ref: b,
+        tabIndex: 0,
+        onFocus: () => {
+          w(!0);
+        },
+        onBlur: () => {
+          w(!1);
+        },
+        role: "button",
+        "aria-label": l.replace("{{item}}", e),
+        onClick: (f) => r(f, n)
+      }),
+      /* @__PURE__ */ g.createElement(Y, { size: 13, symbol: { type: "Svg", content: "close" } })
+    )
+  );
+}, Ue = ({
+  inputHasFocus: e,
+  searchContainerRef: t,
+  showTag: n,
+  showGuideCategory: r,
+  position: l
+}) => {
+  const { activeFilterBadges: u, deleteFilterBadgeAriaLabel: s = "" } = W(), $ = U(), { name: b, params: x } = fe(), [w, f] = D(!1), C = I((d) => {
+    const { key: i } = d;
+    ["ArrowLeft", "ArrowRight"].indexOf(i) === -1 && f(!1);
+  }, []);
+  J("keydown", C, window), J("click", C, window);
+  const { guideCategory: A, tag: y, tooltip: v } = u || {}, m = (d) => {
+    const i = d.querySelectorAll(
+      ".humany-filter-badge > a"
+    );
+    return {
+      badges: i,
+      index: Array.from(i).findIndex((h) => document.activeElement === h)
+    };
+  }, o = I(
+    (d, i, h) => {
+      d.preventDefault(), $("quick-filter:remove", { types: [i], ids: [h] });
+    },
+    [$]
+  ), a = (d, i) => {
+    if (!t)
+      return;
+    const { badges: h, index: p } = m(t);
+    if (h.length) {
+      let q = null;
+      d === "left" ? p === -1 ? q = h.item(h.length - 1) : p > 0 && (q = h.item(p - 1)) : d === "right" && (p === h.length - 1 ? i && i.focus() : h.item(p + 1) && (q = h.item(p + 1))), q && (q.focus(), f(!0));
+    }
+  };
+  H(
+    "ArrowLeft",
+    I(() => {
+      if (!t)
+        return;
+      const { index: d } = m(t);
+      if (e || d > -1) {
+        const i = t.querySelector('[data-type="search"]'), h = i && i.selectionStart !== null && i.selectionStart <= 0, p = d > -1;
+        (h || p) && a("left", i);
+      }
+    }, [e, t])
+  ), H(
+    "ArrowRight",
+    I(() => {
+      if (!t)
+        return;
+      const { index: d } = m(t);
+      if (d > -1) {
+        const i = t.querySelector('[data-type="search"]');
+        d > -1 && a("right", i);
+      }
+    }, [t])
+  ), H(
+    "Backspace",
+    I(
+      (d) => {
+        if (!t)
+          return;
+        let i = [];
+        const { index: h } = m(t), p = t.querySelector('[data-type="search"]');
+        if (h > -1 ? h === 0 ? r ? i = ["guideCategory"] : n && (i = ["tag"]) : h === 1 && (i = ["tag"]) : p && p.selectionStart !== null && p.selectionStart <= 0 && (u != null && u.tag.length ? i = ["tag"] : u != null && u.guideCategory && (i = ["guideCategory"])), i.length > 0) {
+          d.preventDefault();
+          let k;
+          if (i.includes("tag")) {
+            const K = u == null ? void 0 : u.tag.at(-1);
+            k = K == null ? void 0 : K.id;
+          }
+          $("quick-filter:remove", { types: i, ids: [k] });
+        }
+      },
+      [t, u, n, r, $]
+    )
+  );
+  const c = I(
+    (d) => d === "guideCategory" && A && r ? /* @__PURE__ */ g.createElement(
+      ce,
+      {
+        text: `@${A.title}`,
+        routeName: b,
+        filterType: "guideCategory",
+        handleClick: o,
+        deleteAriaLabel: s,
+        params: N(F({}, x), {
+          guideCategory: void 0
+        })
+      }
+    ) : d === "tag" && !!(y != null && y.length) && n ? y.map((i) => {
+      const h = y.reduce((p, q) => (q.id !== i.id && p.push(q.id), p), []);
+      return /* @__PURE__ */ g.createElement(
+        ce,
+        {
+          key: i.id,
+          className: "humany-filter-badge",
+          text: `#${i.title}`,
+          routeName: b,
+          filterType: "tag",
+          handleClick: (p) => o(p, "tag", i.id),
+          deleteAriaLabel: s,
+          params: N(F({}, x), {
+            tag: h
+          })
+        }
+      );
+    }) : null,
+    [
+      A,
+      y,
+      b,
+      x,
+      r,
+      n,
+      w,
+      o
+    ]
+  );
+  return !A && !y ? null : /* @__PURE__ */ g.createElement(He, { className: "humany-filter-badges", position: l }, A && v ? /* @__PURE__ */ g.createElement(ze, { content: /* @__PURE__ */ g.createElement(g.Fragment, null, v), sticky: !1 }, c("guideCategory")) : c("guideCategory"), y && c("tag"));
+}, Ge = Ue, He = z.div`
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+
+    ${(e) => {
+  var t, n;
+  return e.position === "inside" ? P`
+                  &:not(:first-child) {
+                      margin: 0 0 0 ${(t = e.theme.sizes) == null ? void 0 : t.normal};
+                  }
+              ` : P`
+                  margin: ${(n = e.theme.sizes) == null ? void 0 : n.small} 0 0 0;
+                  span:first-child {
+                      margin-left: 0;
+                  }
+              `;
+}}
+`, ce = z(Xe)`
+    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 {
+        ${R}
+        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 r = je(e);
+  if (t === "tag")
+    return r.filter((s) => T(s.title, n));
+  const l = Ye(r, n);
+  return be(r, (s) => l.indexOf(s.id) > -1);
+}, be = (e, t) => e.filter((n) => (n.items && n.items.length && (n.items = be(n.items, t)), t(n))), Ye = (e, t) => {
+  const r = ke(e).filter((u) => T(u.title, t)).map((u) => u.id);
+  let l = [];
+  return r.forEach((u) => {
+    const s = Me(u, e);
+    l = l.concat(s);
+  }), l;
+}, ke = (e) => {
+  let t = [];
+  return e.forEach((n) => {
+    t.push(n), Array.isArray(n.items) && (t = t.concat(ke(n.items)));
+  }), t;
+}, Z = (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)
+  };
+}, Ze = (e) => e ? e.querySelector(
+  '[data-type="search"], input[type="search"]'
+) : null, _ = (e) => {
+  if (!e)
+    return;
+  const t = Ze(e);
+  t && t.focus();
+}, _e = ({
+  filterPhrase: e,
+  items: t,
+  filterType: n,
+  filterContainer: r,
+  searchContainer: l,
+  inputHasFocus: u
+}) => {
+  const [s, $] = D(t || []), [b, x] = D(null), w = U(), { activeFilterBadges: f, quickFilters: C } = W(), A = typeof C == "object" && !!C.autoSelect || typeof C == "boolean" && !!C;
+  O(() => {
+    $(Je(t, n, e));
+  }, [e, n, t]), O(() => {
+    var m;
+    if (r) {
+      const { anchors: o } = Z(r), a = (m = o[0]) == null ? void 0 : m.getAttribute("data-id");
+      a && x(a);
+    }
+  }, [s, r]);
+  const y = I(
+    (m, o) => {
+      let a = ((f == null ? void 0 : f.tag) || []).map((d) => d.id);
+      o === "tag" && m.id && (a = a.includes(m.id) ? a.filter((d) => d !== m.id) : [...a, m.id]);
+      const c = {
+        category: f != null && f.guideCategory ? f.guideCategory.id : void 0,
+        tagIds: a
+      };
+      o === "guideCategory" && (c.category = m.id), w("quick-filter:add", c);
+    },
+    [f, w]
+  ), v = (m) => m === "guideCategory" ? {
+    renderItem: (o, a) => /* @__PURE__ */ g.createElement(
+      de,
+      {
+        autoSelect: A && u && o.id === b,
+        disabled: !T(o.title, e),
+        tabIndex: T(o.title, e) ? 0 : -1,
+        onKeyDown: (c) => {
+          c.key === "Enter" && y(o, m);
+        },
+        "data-level": a,
+        onClick: () => {
+          y(o, m);
+        },
+        "data-id": o.id
+      },
+      /* @__PURE__ */ g.createElement(
+        le,
+        {
+          title: o.title,
+          phrase: e,
+          matches: T(o.title, e)
+        }
+      )
+    )
+  } : {
+    renderLi: !0,
+    renderItem: (o) => /* @__PURE__ */ g.createElement(
+      de,
+      {
+        autoSelect: A && u && o.id === b,
+        onKeyDown: (a) => {
+          a.key === "Enter" && y(o, m);
+        },
+        onClick: () => {
+          y(o, m);
+        },
+        "data-id": o.id
+      },
+      /* @__PURE__ */ g.createElement(
+        le,
+        {
+          symbol: "#",
+          title: o.title,
+          phrase: e,
+          matches: T(o.title, e)
+        }
+      )
+    )
+  };
+  return J(
+    "keydown",
+    (m) => {
+      var q;
+      const { key: o } = m;
+      if (!r || !(o === "ArrowDown" || o === "ArrowUp" || o === "Enter"))
+        return;
+      const { anchors: a, focusedIndex: c } = Z(r);
+      if (o === "Enter") {
+        if (u && A) {
+          const k = (q = a[0]) == null ? void 0 : q.getAttribute("data-id");
+          k && y({ id: k }, n);
+        }
+        return;
+      }
+      const d = () => {
+        var k;
+        return (k = a[0]) == null ? void 0 : k.focus();
+      }, i = () => {
+        var k;
+        return (k = a[a.length - 1]) == null ? void 0 : k.focus();
+      }, h = () => {
+        var k;
+        return (k = a[c + 1]) == null ? void 0 : k.focus();
+      }, p = () => {
+        var k;
+        return (k = a[c - 1]) == null ? void 0 : k.focus();
+      };
+      u ? (m.preventDefault(), o === "ArrowDown" ? d() : i()) : c > -1 && (m.preventDefault(), o === "ArrowDown" ? a.length > c + 1 ? h() : _(l) : c - 1 < 0 ? _(l) : p());
+    },
+    window
+  ), /* @__PURE__ */ g.createElement(
+    Le,
+    F({
+      tree: s,
+      renderEmpty: !1,
+      ulProps: { role: "listbox" },
+      liProps: { role: "option" }
+    }, v(n))
+  );
+}, Re = _e, le = ({ title: e, phrase: t, matches: n, symbol: r = "" }) => {
+  const l = () => {
+    if (!n || !t)
+      return [e];
+    const b = e.toLowerCase().indexOf(t.toLowerCase()), x = e.substr(0, b), w = e.slice(b, b + t.length), f = e.substr(b + t.length);
+    return [x, w, f];
+  }, [u, s, $] = l();
+  return /* @__PURE__ */ g.createElement(me, null, r, u, s ? /* @__PURE__ */ g.createElement("strong", null, s) : null, $ || null);
+}, Ve = P`
+    opacity: 0.5;
+    pointer-events: none;
+`, ue = (e) => {
+  var t, n;
+  return P`
+    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};
+    }
+`;
+}, de = z(ge)`
+    display: block;
+    text-decoration: none;
+    font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.normal;
+}};
+
+    ${(e) => e.disabled && Ve}
+    color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+    background-color: transparent;
+
+    span {
+        display: block;
+        ${(e) => {
+  var t, n, r, l;
+  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(${(r = e.theme.sizes) == null ? void 0 : r.normal} / 2) ${(l = e.theme.sizes) == null ? void 0 : l.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 && ue}
+
+  &:hover,
+  &:focus {
+        ${ue}
+    }
+`, et = ({ phrase: e = "", inputHasFocus: t, searchContainerRef: n }) => {
+  const {
+    quickFilter: r = {
+      open: !1,
+      loading: !1,
+      symbol: "",
+      type: "",
+      items: []
+    },
+    activeFilterBadges: l,
+    noMatchesLabel: u = "No matching items"
+  } = W(), [s, $] = Fe(!0), b = he(), { events: x } = b.get("$widget"), w = ee(), f = I(
+    (c) => (c && c.addEventListener(
+      "keydown",
+      () => {
+        Z(c).focusedIndex > -1 && x.subscribeOnce("router:changed", () => {
+          _(n);
+        });
+      },
+      !0
+    ), w.current = c, c),
+    [n]
+  ), { items: C = [], symbol: A, type: y, open: v, loading: m } = r, o = Qe(() => {
+    const c = ((l == null ? void 0 : l.tag) || []).map((d) => d.id);
+    return C.filter((d) => !c.includes(d.id));
+  }, [C, l]);
+  if (!v || !A)
+    return null;
+  const a = e.slice(e.indexOf(A) + 1);
+  return /* @__PURE__ */ g.createElement(
+    tt,
+    {
+      ref: f,
+      "data-loading": m,
+      className: V(
+        "humany-quick-filter-dropdown",
+        [y === "guideCategory", "humany-quick-filter-guide-categories"],
+        [y === "tag", "humany-quick-filter-tags"]
+      )
+    },
+    /* @__PURE__ */ g.createElement(nt, { className: "humany-quick-filter-dropdown-inner", css: s, ref: $ }, o.length > 0 ? /* @__PURE__ */ g.createElement(
+      Re,
+      {
+        filterType: y,
+        items: o,
+        filterPhrase: a,
+        filterContainer: $.current,
+        searchContainer: n,
+        inputHasFocus: t
+      }
+    ) : /* @__PURE__ */ g.createElement(ot, null, u)),
+    /* @__PURE__ */ g.createElement(De, { loading: m })
+  );
+}, tt = z.div`
+    ${(e) => pe(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;
+`, nt = 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;`;
+}}
+    }
+`, ot = 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;
+}};
+`, X = (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 (!((r, l) => r.length === l.length ? r.every((u, s) => u === l[s]) : !1)(e, t))
+      return !0;
+  }
+  return !1;
+}, rt = (e, t = {}, n = !0) => {
+  const r = U(), {
+    quickFilters: l = !1,
+    quickFilter: u = { open: !1 },
+    activeFilterBadges: s,
+    filterBadges: $ = !1,
+    incremental: b = 600
+  } = W(), x = Be(
+    e,
+    typeof b == "boolean" ? 600 : b
+  ), w = ae(x), f = ae(s), C = ee(null), A = I(
+    (o = "") => {
+      var a;
+      if ($) {
+        const c = X(
+          s == null ? void 0 : s.guideCategory,
+          f == null ? void 0 : f.guideCategory
+        ) || X(s == null ? void 0 : s.tag, f == null ? void 0 : f.tag);
+        return r("search", {
+          value: o,
+          filtersChanged: c,
+          filters: {
+            tagIds: ((s == null ? void 0 : s.tag) || []).map((d) => d.id),
+            guideCategoryId: ((a = s == null ? void 0 : s.guideCategory) == null ? void 0 : a.id) || null
+          }
+        });
+      }
+      return r("search", { value: o });
+    },
+    [r, s]
+  ), y = I(
+    (o) => {
+      r("clear", { navigateToHome: o });
+    },
+    [r]
+  ), v = (o) => l ? o.replace(/([@#].*)/g, "") : o, m = I(
+    (o) => {
+      if (u.open && o.preventDefault) {
+        o.preventDefault();
+        return;
+      }
+      const a = document.activeElement, c = C.current && typeof C.current.contains == "function" ? C.current.contains(a) : !1, d = v(e);
+      typeof o == "boolean" && o || d.length && c || (s == null ? void 0 : s.guideCategory) || (s == null ? void 0 : s.tag) && c ? A(d) : y(c);
+    },
+    [C, e, u, y, s, A]
+  );
+  return O(() => {
+    const o = X(s == null ? void 0 : s.guideCategory, f == null ? void 0 : f.guideCategory) || X(s == null ? void 0 : s.tag, f == null ? void 0 : f.tag), a = x && v(x), c = w && v(w);
+    typeof c != "undefined" && c !== a && a !== t.phrase && n && !u.open && m(o);
+  }, [x, u.open, s, m]), O(() => {
+    if (e && l) {
+      const o = typeof l == "boolean" && !!l || typeof l == "object" && !!l.guideCategory, a = typeof l == "boolean" && !!l || typeof l == "object" && !!l.tag;
+      o && e.indexOf("@") === e.length - 1 && r("quick-filter:open", { type: "guideCategory", symbol: "@" }), a && e.indexOf("#") === e.length - 1 && r("quick-filter:open", { type: "tag", symbol: "#" });
+    }
+    u.open && e.indexOf("@") === -1 && e.indexOf("#") === -1 && r("quick-filter:close");
+  }, [e]), [m, y, C];
+}, pt = (n) => {
+  var r = n, { className: e } = r, t = G(r, ["className"]);
+  const {
+    showSearchButton: l,
+    showClearButton: u,
+    role: s = "search",
+    autoFocus: $,
+    placeholder: b,
+    searchButtonLabel: x,
+    clearButtonLabel: w,
+    ariaLabel: f,
+    route: C = "search",
+    incremental: A = !0,
+    showChildren: y = !1,
+    quickFilter: v,
+    quickFilters: m,
+    filterBadges: o
+  } = W(), { params: a } = fe(), [c, d] = D(!1), [i, h] = D(a.phrase || ""), [p, q] = D({
+    guideCategory: !1,
+    tag: !1
+  }), k = he(), K = Ne(), j = U(), { position: $e = "inside" } = typeof o == "object" ? o : {};
+  O(() => {
+    const { guideCategory: E, tag: S } = a, L = typeof o == "object" ? !!o.guideCategory : !!o, Se = typeof o == "object" ? !!o.tag : !!o;
+    q({
+      guideCategory: L && !!E,
+      tag: Se && !!S
+    });
+  }, [o, a]), Te(
+    "router:changed",
+    () => {
+      if (v) {
+        const { open: E, symbol: S } = v;
+        if (E) {
+          if (S) {
+            const L = i.replace(i.slice(i.indexOf(S)), "");
+            h(L);
+          }
+          j("quick-filter:close");
+        }
+      }
+    },
+    [v, i, h, j]
+  );
+  const [te, M, B] = rt(i, a, !!A);
+  O(() => {
+    h(a.phrase || "");
+  }, [a.phrase]);
+  const xe = I(
+    (E) => {
+      h(E);
+    },
+    [h]
+  ), Ee = I(() => {
+    j("quick-filter:close").then(() => M(!0));
+  }, [j, M]), we = I(() => {
+    var E, S;
+    $ && !c && ((S = (E = B.current) == null ? void 0 : E.getElementsByTagName("input")[0]) == null || S.focus());
+  }, [$, c, B]), Ce = I(() => {
+    k.getAsync("router").then((E) => {
+      const S = E.getInitialRoute(), L = E.getRouteData();
+      (S == null ? void 0 : S.name) === L.name && (S == null ? void 0 : S.name) !== C ? h("") : M(!0);
+    });
+  }, [k, h, M]), ne = (E) => {
+    if (E !== $e)
+      return null;
+    if (!!p.guideCategory || !!p.tag)
+      return /* @__PURE__ */ g.createElement(
+        Ge,
+        {
+          position: E,
+          inputHasFocus: c,
+          showGuideCategory: p.guideCategory,
+          showTag: p.tag,
+          searchContainerRef: B.current
+        }
+      );
+  };
+  Oe(we);
+  const oe = u && (p.guideCategory || p.tag || i), Ae = m ? Ke({
+    role: "combobox",
+    "aria-autocomplete": "list",
+    autoComplete: "off",
+    "aria-haspopup": "listbox"
+  }) : {};
+  return /* @__PURE__ */ g.createElement(
+    st,
+    N(F({}, t), {
+      ref: B,
+      role: s,
+      className: V(e, "humany-search"),
+      "data-has-phrase": !!i,
+      "data-has-focus": c,
+      "data-has-search-symbol": l ? "true" : "false"
+    }),
+    /* @__PURE__ */ g.createElement(
+      it,
+      {
+        action: ".",
+        onSubmit: (E) => {
+          var S, L;
+          E.preventDefault(), (L = (S = B.current) == null ? void 0 : S.getElementsByTagName("input")[0]) == null || L.blur();
+        },
+        "data-has-focus": c
+      },
+      l && /* @__PURE__ */ g.createElement(
+        at,
+        {
+          "aria-label": x,
+          type: "submit",
+          title: x,
+          disabled: !i,
+          onClick: te,
+          "data-has-phrase": !!i,
+          "data-has-focus": c
+        },
+        /* @__PURE__ */ g.createElement(Y, { size: 32, symbol: { type: "Svg", content: "search" } })
+      ),
+      ne("inside"),
+      /* @__PURE__ */ g.createElement(
+        Pe,
+        N(F({
+          type: "search",
+          "aria-label": f
+        }, Ae), {
+          placeholder: p.guideCategory || p.tag ? "" : b,
+          onFocusChange: d,
+          onEscape: Ee,
+          onEnter: te,
+          onChange: xe,
+          value: i
+        })
+      ),
+      oe && /* @__PURE__ */ g.createElement(
+        ct,
+        {
+          "aria-label": w,
+          type: "reset",
+          hasFocus: c,
+          title: w,
+          onClick: Ce
+        },
+        /* @__PURE__ */ g.createElement(Y, { size: 27, symbol: { type: "Svg", content: "clear" } })
+      ),
+      y && !oe && K.map((E) => /* @__PURE__ */ g.createElement(We, { key: E.id, id: E.id, branch: "default" })),
+      /* @__PURE__ */ g.createElement(
+        et,
+        {
+          inputHasFocus: c,
+          phrase: i,
+          searchContainerRef: B.current
+        }
+      )
+    ),
+    ne("below")
+  );
+}, st = z.div`
+    ${pe};
+    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;
+        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%;
+        }
+    }
+`, it = 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"] && P`
+            ${(t = e.theme.accessibility) != null && t.isTabbing ? R(e) : `
+        border-color: ${(n = e.theme.colors) == null ? void 0 : n.primary};
+        outline: none;
+        input {
+          outline: none;
+        }
+      `}
+        `;
+}};
+`, at = z(ye)`
+    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";
+}};
+        }
+    }
+`, ct = z(ye)`
+    &:focus-visible svg {
+        ${R}
+    }
+
+    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 {
+  pt as default
+};
+//# sourceMappingURL=search.9c0e8397.js.map