@telia-ace/knowledge-widget-components-search 1.0.38-experimental.9 → 1.0.38

package/dist/search.3478324e.js

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