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

package/dist/search.d8394d6a.js

@@ -0,0 +1,918 @@
+var Se = Object.defineProperty, Ie = 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 ? Se(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;
+}, T = (e, t) => Ie(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 L from "@emotion/styled";
+import { useProperties as W, useDispatch as U, useRouteData as fe, useEventListener as J, useKeyPress as H, Tooltip as Le, borderTabStyle as R, Text as me, Link as ge, SymbolBadge as Y, ItemTree as ze, useScroll as Fe, useContainer as he, Loader as Be, contentBox as pe, useDebounce as De, 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 B, useCallback as q, useRef as ee, useEffect as D, useMemo as Qe } from "react";
+const Xe = (s) => {
+  var C = s, {
+    text: e,
+    className: t,
+    filterType: n,
+    handleClick: r,
+    deleteAriaLabel: c = ""
+  } = C, l = G(C, [
+    "text",
+    "className",
+    "filterType",
+    "handleClick",
+    "deleteAriaLabel"
+  ]);
+  const y = ee(), [x, v] = B(document.activeElement === y.current), f = () => {
+    v(!0);
+  }, E = () => {
+    v(!1);
+  };
+  return D(() => (y.current && (y.current.addEventListener("focus", f), y.current.addEventListener("blur", E)), () => {
+    y.current && (y.current.removeEventListener("focus", f), y.current.removeEventListener("blur", E));
+  }), []), /* @__PURE__ */ g.createElement(
+    me,
+    {
+      className: V(
+        t,
+        "humany-filter-badge",
+        x ? "humany-filter-badge-focused" : ""
+      ),
+      onKeyDown: (k) => {
+        k.key === "Enter" && r(k, n);
+      }
+    },
+    e,
+    /* @__PURE__ */ g.createElement(
+      ge,
+      T(F({}, l), {
+        ref: y,
+        tabIndex: 0,
+        role: "button",
+        "aria-label": c.replace("{{item}}", e),
+        onClick: (k) => r(k, n)
+      }),
+      /* @__PURE__ */ g.createElement(Y, { size: 13, symbol: { type: "Svg", content: "close" } })
+    )
+  );
+}, Ue = ({
+  inputHasFocus: e,
+  searchContainerRef: t,
+  showTag: n,
+  showGuideCategory: r,
+  position: c
+}) => {
+  const { activeFilterBadges: l, deleteFilterBadgeAriaLabel: s = "" } = W(), C = U(), { name: y, params: x } = fe(), [v, f] = B(!1), E = q((d) => {
+    const { key: i } = d;
+    ["ArrowLeft", "ArrowRight"].indexOf(i) === -1 && f(!1);
+  }, []);
+  J("keydown", E, window), J("click", E, window);
+  const { guideCategory: k, tag: b, tooltip: S } = l || {}, m = (d) => {
+    const i = d.querySelectorAll(
+      ".humany-filter-badge > a"
+    );
+    return {
+      badges: i,
+      index: Array.from(i).findIndex((h) => document.activeElement === h)
+    };
+  }, o = (d, i, h) => {
+    d.preventDefault(), C("quick-filter:remove", { types: [i], id: h });
+  }, a = (d, i) => {
+    if (!t)
+      return;
+    const { badges: h, index: p } = m(t);
+    if (h.length) {
+      let I = null;
+      d === "left" ? p === -1 ? I = h.item(h.length - 1) : p > 0 && (I = h.item(p - 1)) : d === "right" && (p === h.length - 1 ? i && i.focus() : h.item(p + 1) && (I = h.item(p + 1))), I && (I.focus(), f(!0));
+    }
+  };
+  H(
+    "ArrowLeft",
+    q(() => {
+      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",
+    q(() => {
+      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",
+    q(
+      (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 && (l != null && l.tag.length ? i = ["tag"] : l != null && l.guideCategory && (i = ["guideCategory"])), i.length > 0) {
+          d.preventDefault();
+          let $;
+          if (i.includes("tag")) {
+            const K = l == null ? void 0 : l.tag.at(-1);
+            $ = K == null ? void 0 : K.id;
+          }
+          C("quick-filter:remove", { types: i, id: $ });
+        }
+      },
+      [t, l, n, r]
+    )
+  );
+  const u = q(
+    (d) => d === "guideCategory" && k && r ? /* @__PURE__ */ g.createElement(
+      ce,
+      {
+        text: `@${k.title}`,
+        routeName: y,
+        filterType: "guideCategory",
+        handleClick: o,
+        deleteAriaLabel: s,
+        params: T(F({}, x), {
+          guideCategory: void 0
+        })
+      }
+    ) : d === "tag" && !!(b != null && b.length) && n ? b.map((i) => {
+      const h = b.reduce((p, I) => (I.id !== i.id && p.push(I.id), p), []);
+      return /* @__PURE__ */ g.createElement(
+        ce,
+        {
+          key: i.id,
+          className: "humany-filter-badge",
+          text: `#${i.title}`,
+          routeName: y,
+          filterType: "tag",
+          handleClick: (p) => o(p, "tag", i.id),
+          deleteAriaLabel: s,
+          params: T(F({}, x), {
+            tag: h
+          })
+        }
+      );
+    }) : null,
+    [k, b, y, x, r, n, v]
+  );
+  return !k && !b ? null : /* @__PURE__ */ g.createElement(He, { className: "humany-filter-badges", position: c }, k && S ? /* @__PURE__ */ g.createElement(Le, { content: /* @__PURE__ */ g.createElement(g.Fragment, null, S), sticky: !1 }, u("guideCategory")) : u("guideCategory"), b && u("tag"));
+}, Ge = Ue, He = L.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 = L(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;
+    }
+`, O = (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) => O(s.title, n));
+  const c = Ye(r, n);
+  return be(r, (s) => c.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((l) => O(l.title, t)).map((l) => l.id);
+  let c = [];
+  return r.forEach((l) => {
+    const s = Me(l, e);
+    c = c.concat(s);
+  }), c;
+}, 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: c,
+  inputHasFocus: l
+}) => {
+  const [s, C] = B(t || []), [y, x] = B(null), v = U(), { activeFilterBadges: f, quickFilters: E } = W(), k = typeof E == "object" && !!E.autoSelect || typeof E == "boolean" && !!E;
+  D(() => {
+    C(Je(t, n, e));
+  }, [e, n, t]), D(() => {
+    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 b = q(
+    (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 u = {
+        category: f != null && f.guideCategory ? f.guideCategory.id : void 0,
+        tagIds: a
+      };
+      o === "guideCategory" && (u.category = m.id), v("quick-filter:add", u);
+    },
+    [f, v]
+  ), S = (m) => m === "guideCategory" ? {
+    renderItem: (o, a) => /* @__PURE__ */ g.createElement(
+      de,
+      {
+        autoSelect: k && l && o.id === y,
+        disabled: !O(o.title, e),
+        tabIndex: O(o.title, e) ? 0 : -1,
+        onKeyDown: (u) => {
+          u.key === "Enter" && b(o, m);
+        },
+        "data-level": a,
+        onClick: () => {
+          b(o, m);
+        },
+        "data-id": o.id
+      },
+      /* @__PURE__ */ g.createElement(
+        le,
+        {
+          title: o.title,
+          phrase: e,
+          matches: O(o.title, e)
+        }
+      )
+    )
+  } : {
+    renderLi: !0,
+    renderItem: (o) => /* @__PURE__ */ g.createElement(
+      de,
+      {
+        autoSelect: k && l && o.id === y,
+        onKeyDown: (a) => {
+          a.key === "Enter" && b(o, m);
+        },
+        onClick: () => {
+          b(o, m);
+        },
+        "data-id": o.id
+      },
+      /* @__PURE__ */ g.createElement(
+        le,
+        {
+          symbol: "#",
+          title: o.title,
+          phrase: e,
+          matches: O(o.title, e)
+        }
+      )
+    )
+  };
+  return J(
+    "keydown",
+    (m) => {
+      var I;
+      const { key: o } = m;
+      if (!r || !(o === "ArrowDown" || o === "ArrowUp" || o === "Enter"))
+        return;
+      const { anchors: a, focusedIndex: u } = Z(r);
+      if (o === "Enter") {
+        if (l && k) {
+          const $ = (I = a[0]) == null ? void 0 : I.getAttribute("data-id");
+          $ && b({ id: $ }, n);
+        }
+        return;
+      }
+      const d = () => {
+        var $;
+        return ($ = a[0]) == null ? void 0 : $.focus();
+      }, i = () => {
+        var $;
+        return ($ = a[a.length - 1]) == null ? void 0 : $.focus();
+      }, h = () => {
+        var $;
+        return ($ = a[u + 1]) == null ? void 0 : $.focus();
+      }, p = () => {
+        var $;
+        return ($ = a[u - 1]) == null ? void 0 : $.focus();
+      };
+      l ? (m.preventDefault(), o === "ArrowDown" ? d() : i()) : u > -1 && (m.preventDefault(), o === "ArrowDown" ? a.length > u + 1 ? h() : _(c) : u - 1 < 0 ? _(c) : p());
+    },
+    window
+  ), /* @__PURE__ */ g.createElement(
+    ze,
+    F({
+      tree: s,
+      renderEmpty: !1,
+      ulProps: { role: "listbox" },
+      liProps: { role: "option" }
+    }, S(n))
+  );
+}, Re = _e, le = ({ title: e, phrase: t, matches: n, symbol: r = "" }) => {
+  const c = () => {
+    if (!n || !t)
+      return [e];
+    const y = e.toLowerCase().indexOf(t.toLowerCase()), x = e.substr(0, y), v = e.slice(y, y + t.length), f = e.substr(y + t.length);
+    return [x, v, f];
+  }, [l, s, C] = c();
+  return /* @__PURE__ */ g.createElement(me, null, r, l, s ? /* @__PURE__ */ g.createElement("strong", null, s) : null, C || 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 = L(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, c;
+  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) ${(c = e.theme.sizes) == null ? void 0 : c.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: c,
+    noMatchesLabel: l = "No matching items"
+  } = W(), [s, C] = Fe(!0), y = he(), { events: x } = y.get("$widget"), v = ee(), f = q(
+    (u) => (u && u.addEventListener(
+      "keydown",
+      () => {
+        Z(u).focusedIndex > -1 && x.subscribeOnce("router:changed", () => {
+          _(n);
+        });
+      },
+      !0
+    ), v.current = u, u),
+    [n]
+  ), { items: E = [], symbol: k, type: b, open: S, loading: m } = r, o = Qe(() => {
+    const u = ((c == null ? void 0 : c.tag) || []).map((d) => d.id);
+    return E.filter((d) => !u.includes(d.id));
+  }, [E, c]);
+  if (!S || !k)
+    return null;
+  const a = e.slice(e.indexOf(k) + 1);
+  return /* @__PURE__ */ g.createElement(
+    tt,
+    {
+      ref: f,
+      "data-loading": m,
+      className: V(
+        "humany-quick-filter-dropdown",
+        [b === "guideCategory", "humany-quick-filter-guide-categories"],
+        [b === "tag", "humany-quick-filter-tags"]
+      )
+    },
+    /* @__PURE__ */ g.createElement(nt, { className: "humany-quick-filter-dropdown-inner", css: s, ref: C }, o.length > 0 ? /* @__PURE__ */ g.createElement(
+      Re,
+      {
+        filterType: b,
+        items: o,
+        filterPhrase: a,
+        filterContainer: C.current,
+        searchContainer: n,
+        inputHasFocus: t
+      }
+    ) : /* @__PURE__ */ g.createElement(ot, null, l)),
+    /* @__PURE__ */ g.createElement(Be, { loading: m })
+  );
+}, tt = L.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 = L.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 = L.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, c) => r.length === c.length ? r.every((l, s) => l === c[s]) : !1)(e, t))
+      return !0;
+  }
+  return !1;
+}, rt = (e, t = {}, n = !0) => {
+  const r = U(), {
+    quickFilters: c = !1,
+    quickFilter: l = { open: !1 },
+    activeFilterBadges: s,
+    filterBadges: C = !1,
+    incremental: y = 600
+  } = W(), x = De(
+    e,
+    typeof y == "boolean" ? 600 : y
+  ), v = ae(x), f = ae(s), E = ee(null), k = q(
+    (o = "") => {
+      if (C) {
+        const a = 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: a, filters: s });
+      }
+      return r("search", { value: o });
+    },
+    [r, s]
+  ), b = q(
+    (o) => {
+      r("clear", { navigateToHome: o });
+    },
+    [r]
+  ), S = (o) => c ? o.replace(/([@#].*)/g, "") : o, m = q(
+    (o) => {
+      if (l.open && o.preventDefault) {
+        o.preventDefault();
+        return;
+      }
+      const a = document.activeElement, u = E.current && typeof E.current.contains == "function" ? E.current.contains(a) : !1, d = S(e);
+      typeof o == "boolean" && o || d.length && u || (s == null ? void 0 : s.guideCategory) || (s == null ? void 0 : s.tag) && u ? k(d) : b(u);
+    },
+    [E, e, l, b, s, k]
+  );
+  return D(() => {
+    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 && S(x), u = v && S(v);
+    (typeof u != "undefined" && u !== a && a !== t.phrase && n && !l.open || o && !(s != null && s.initial)) && m(o);
+  }, [x, l.open, s, m]), D(() => {
+    if (e && c) {
+      const o = typeof c == "boolean" && !!c || typeof c == "object" && !!c.guideCategory, a = typeof c == "boolean" && !!c || typeof c == "object" && !!c.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: "#" });
+    }
+    l.open && e.indexOf("@") === -1 && e.indexOf("#") === -1 && r("quick-filter:close");
+  }, [e]), [m, b, E];
+}, pt = (n) => {
+  var r = n, { className: e } = r, t = G(r, ["className"]);
+  const {
+    showSearchButton: c,
+    showClearButton: l,
+    role: s = "search",
+    autoFocus: C,
+    placeholder: y,
+    searchButtonLabel: x,
+    clearButtonLabel: v,
+    ariaLabel: f,
+    route: E = "search",
+    incremental: k = !0,
+    showChildren: b = !1,
+    quickFilter: S,
+    quickFilters: m,
+    filterBadges: o
+  } = W(), { params: a } = fe(), [u, d] = B(!1), [i, h] = B(a.phrase || ""), [p, I] = B({
+    guideCategory: !1,
+    tag: !1
+  }), $ = he(), K = Ne(), j = U(), { position: Ee = "inside" } = typeof o == "object" ? o : {};
+  D(() => {
+    const { guideCategory: w, tag: A } = a, z = typeof o == "object" ? !!o.guideCategory : !!o, Ae = typeof o == "object" ? !!o.tag : !!o;
+    I({
+      guideCategory: z && !!w,
+      tag: Ae && !!A
+    });
+  }, [o, a]), Te(
+    "router:changed",
+    () => {
+      if (S) {
+        const { open: w, symbol: A } = S;
+        if (w) {
+          if (A) {
+            const z = i.replace(i.slice(i.indexOf(A)), "");
+            h(z);
+          }
+          j("quick-filter:close");
+        }
+      }
+    },
+    [S, i, h, j]
+  );
+  const [te, M, N] = rt(i, a, !!k);
+  D(() => {
+    h(a.phrase || "");
+  }, [a.phrase]);
+  const $e = q(
+    (w) => {
+      h(w);
+    },
+    [h]
+  ), xe = q(() => {
+    j("quick-filter:close").then(() => M(!0));
+  }, [j, M]), we = q(() => {
+    var w, A;
+    C && !u && ((A = (w = N.current) == null ? void 0 : w.getElementsByTagName("input")[0]) == null || A.focus());
+  }, [C, u, N]), Ce = q(() => {
+    $.getAsync("router").then((w) => {
+      const A = w.getInitialRoute(), z = w.getRouteData();
+      (A == null ? void 0 : A.name) === z.name && (A == null ? void 0 : A.name) !== E ? h("") : M(!0);
+    });
+  }, [$, h, M]), ne = (w) => {
+    if (w !== Ee)
+      return null;
+    if (!!p.guideCategory || !!p.tag)
+      return /* @__PURE__ */ g.createElement(
+        Ge,
+        {
+          position: w,
+          inputHasFocus: u,
+          showGuideCategory: p.guideCategory,
+          showTag: p.tag,
+          searchContainerRef: N.current
+        }
+      );
+  };
+  Oe(we);
+  const oe = l && (p.guideCategory || p.tag || i), ve = m ? Ke({
+    role: "combobox",
+    "aria-autocomplete": "list",
+    autoComplete: "off",
+    "aria-haspopup": "listbox"
+  }) : {};
+  return /* @__PURE__ */ g.createElement(
+    st,
+    T(F({}, t), {
+      ref: N,
+      role: s,
+      className: V(e, "humany-search"),
+      "data-has-phrase": !!i,
+      "data-has-focus": u,
+      "data-has-search-symbol": c ? "true" : "false"
+    }),
+    /* @__PURE__ */ g.createElement(
+      it,
+      {
+        action: ".",
+        onSubmit: (w) => {
+          var A, z;
+          w.preventDefault(), (z = (A = N.current) == null ? void 0 : A.getElementsByTagName("input")[0]) == null || z.blur();
+        },
+        "data-has-focus": u
+      },
+      c && /* @__PURE__ */ g.createElement(
+        at,
+        {
+          "aria-label": x,
+          type: "submit",
+          title: x,
+          disabled: !i,
+          onClick: te,
+          "data-has-phrase": !!i,
+          "data-has-focus": u
+        },
+        /* @__PURE__ */ g.createElement(Y, { size: 32, symbol: { type: "Svg", content: "search" } })
+      ),
+      ne("inside"),
+      /* @__PURE__ */ g.createElement(
+        Pe,
+        T(F({
+          type: "search",
+          "aria-label": f
+        }, ve), {
+          placeholder: p.guideCategory || p.tag ? "" : y,
+          onFocusChange: d,
+          onEscape: xe,
+          onEnter: te,
+          onChange: $e,
+          value: i
+        })
+      ),
+      oe && /* @__PURE__ */ g.createElement(
+        ct,
+        {
+          "aria-label": v,
+          type: "reset",
+          hasFocus: u,
+          title: v,
+          onClick: Ce
+        },
+        /* @__PURE__ */ g.createElement(Y, { size: 27, symbol: { type: "Svg", content: "clear" } })
+      ),
+      b && !oe && K.map((w) => /* @__PURE__ */ g.createElement(We, { key: w.id, id: w.id, branch: "default" })),
+      /* @__PURE__ */ g.createElement(
+        et,
+        {
+          inputHasFocus: u,
+          phrase: i,
+          searchContainerRef: N.current
+        }
+      )
+    ),
+    ne("below")
+  );
+}, st = L.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 = L.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 = L(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 = L(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.d8394d6a.js.map