@clyrex-digital/clyrex-controls-dev 0.8.1-dev.20260925110206 → 0.8.1-dev.20260926063530

package/dist/DataBindingControls-VSLL4WV2.mjs

@@ -0,0 +1,882 @@
+"use client";
+
+"use client";
+import {
+  Button_default
+} from "./chunk-LSKD5U3S.mjs";
+import "./chunk-IMNQO57B.mjs";
+
+// src/components/pageRenderingEngine/nodes/DataBindingControls.tsx
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { jsx, jsxs } from "react/jsx-runtime";
+var humanize = (value) => value.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ").trim();
+var escapeODataString = (value) => value.replace(/'/g, "''");
+var parseFacetSelections = (filter) => {
+  const selections = /* @__PURE__ */ new Map();
+  if (!filter || !filter.trim()) return selections;
+  const expression = /(?:^|[\s()]+(?:and[\s()]+)?)([\w./-]+)\s+eq\s+'((?:''|[^'])*)'/gi;
+  for (const match of filter.matchAll(expression)) {
+    if (match[1] && match[2] !== void 0) {
+      selections.set(match[1].trim(), match[2].replace(/''/g, "'"));
+    }
+  }
+  return selections;
+};
+var buildFacetFilter = (selections) => Array.from(selections.entries()).map(([field, value]) => `${field} eq '${escapeODataString(value)}'`).join(" and ");
+var parseODataSearch = (value) => {
+  if (!value) return "";
+  const trimmedValue = value.trim();
+  if (trimmedValue.startsWith("'") && trimmedValue.endsWith("'")) {
+    return trimmedValue.slice(1, -1).replace(/''/g, "'");
+  }
+  return trimmedValue;
+};
+var SearchIcon = ({ className = "" }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    "aria-hidden": "true",
+    className,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
+      /* @__PURE__ */ jsx("path", { strokeLinecap: "round", d: "m20 20-4-4" })
+    ]
+  }
+);
+var ResetIcon = ({ className = "" }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    "aria-hidden": "true",
+    className,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: [
+      /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4 4v6h6" }),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M5.5 15a8 8 0 1 0 .6-7.8L4 10"
+        }
+      )
+    ]
+  }
+);
+var FilterSlidersIcon = ({ className = "" }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    "aria-hidden": "true",
+    className,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: [
+      /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 4h18M3 12h18M3 20h18" }),
+      /* @__PURE__ */ jsx("circle", { cx: "8", cy: "4", r: "2", fill: "currentColor" }),
+      /* @__PURE__ */ jsx("circle", { cx: "16", cy: "12", r: "2", fill: "currentColor" }),
+      /* @__PURE__ */ jsx("circle", { cx: "10", cy: "20", r: "2", fill: "currentColor" })
+    ]
+  }
+);
+var ChevronDownIcon = ({ className = "" }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    "aria-hidden": "true",
+    className,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m19 9-7 7-7-7" })
+  }
+);
+var CheckIcon = ({ className = "" }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    "aria-hidden": "true",
+    className,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: "2.5",
+    children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
+  }
+);
+var CloseIcon = ({ className = "" }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    "aria-hidden": "true",
+    className,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
+  }
+);
+var MapPinIcon = ({ className = "" }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    "aria-hidden": "true",
+    className,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+        }
+      )
+    ]
+  }
+);
+var BriefcaseIcon = ({ className = "" }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    "aria-hidden": "true",
+    className,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        d: "M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+      }
+    )
+  }
+);
+var FileTextIcon = ({ className = "" }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    "aria-hidden": "true",
+    className,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+      }
+    )
+  }
+);
+var TagIcon = ({ className = "" }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    "aria-hidden": "true",
+    className,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        d: "M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
+      }
+    )
+  }
+);
+var getCategoryIcon = (category) => {
+  const lower = category.toLowerCase();
+  if (lower.includes("location") || lower.includes("city") || lower.includes("country") || lower.includes("state") || lower.includes("address")) {
+    return /* @__PURE__ */ jsx(MapPinIcon, { className: "h-4 w-4" });
+  }
+  if (lower.includes("type") || lower.includes("work") || lower.includes("employment") || lower.includes("experience")) {
+    return /* @__PURE__ */ jsx(BriefcaseIcon, { className: "h-4 w-4" });
+  }
+  if (lower.includes("department") || lower.includes("category") || lower.includes("role") || lower.includes("industry")) {
+    return /* @__PURE__ */ jsx(FileTextIcon, { className: "h-4 w-4" });
+  }
+  return /* @__PURE__ */ jsx(TagIcon, { className: "h-4 w-4" });
+};
+var normalizeSortOption = (option) => {
+  const direction = option.direction.trim();
+  const title = option.title || humanize(option.name);
+  return {
+    label: title,
+    value: [option.name, direction].filter(Boolean).join(" ")
+  };
+};
+var DataBindingControls = ({
+  path,
+  query,
+  facets,
+  sortOptions,
+  showFacets,
+  showSortOptions,
+  showSearchBar,
+  mode = "toolbar"
+}) => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [collapsedCategories, setCollapsedCategories] = useState({});
+  const [isSortOpen, setIsSortOpen] = useState(false);
+  const [isMobileFiltersOpen, setIsMobileFiltersOpen] = useState(false);
+  const [facetCategorySearch, setFacetCategorySearch] = useState({});
+  const desktopSortDropdownRef = useRef(null);
+  const mobileSortDropdownRef = useRef(null);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      const target = event.target;
+      const clickedInsideDesktop = desktopSortDropdownRef.current?.contains(target);
+      const clickedInsideMobile = mobileSortDropdownRef.current?.contains(target);
+      if (!clickedInsideDesktop && !clickedInsideMobile) {
+        setIsSortOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const toggleCategory = (field) => {
+    setCollapsedCategories((prev) => ({
+      ...prev,
+      [field]: !prev[field]
+    }));
+  };
+  const searchParamsFilter = searchParams?.get("$filter") ?? searchParams?.get("filter");
+  const searchParamsSort = searchParams?.get("$orderby") ?? searchParams?.get("orderBy");
+  const searchParamsSearch = searchParams?.get("$search");
+  const currentFilter = searchParamsFilter !== void 0 && searchParamsFilter !== null ? searchParamsFilter : query?.["$filter"] ?? query?.filter ?? "";
+  const currentSort = searchParamsSort !== void 0 && searchParamsSort !== null ? searchParamsSort : query?.["$orderby"] ?? query?.orderBy ?? "";
+  const currentSearch = parseODataSearch(
+    searchParamsSearch !== void 0 && searchParamsSearch !== null ? searchParamsSearch : query?.["$search"]
+  );
+  const [searchText, setSearchText] = useState(currentSearch);
+  useEffect(() => {
+    setSearchText(currentSearch);
+  }, [currentSearch]);
+  const selectedFacetValues = useMemo(
+    () => parseFacetSelections(currentFilter),
+    [currentFilter]
+  );
+  useEffect(() => {
+    if (isMobileFiltersOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isMobileFiltersOpen]);
+  const activeFacets = useMemo(() => {
+    const facetMap = /* @__PURE__ */ new Map();
+    if (facets) {
+      Object.entries(facets).forEach(([field, values]) => {
+        if (!Array.isArray(values)) return;
+        const filteredValues = values.filter(
+          (item) => item.count > 0 || selectedFacetValues.get(field) === item.value
+        );
+        if (filteredValues.length > 0) {
+          facetMap.set(field, filteredValues);
+        }
+      });
+    }
+    selectedFacetValues.forEach((val, field) => {
+      if (!facetMap.has(field)) {
+        facetMap.set(field, [{ value: val, count: 0 }]);
+      } else {
+        const existing = facetMap.get(field);
+        if (!existing.some((item) => item.value === val)) {
+          existing.push({ value: val, count: 0 });
+        }
+      }
+    });
+    return Array.from(facetMap.entries());
+  }, [facets, selectedFacetValues]);
+  const normalizedSortOptions = useMemo(
+    () => (sortOptions ?? []).filter((option) => option?.name && option?.direction).map(normalizeSortOption).filter((option) => option.value),
+    [sortOptions]
+  );
+  const selectedSortOption = useMemo(() => {
+    if (!normalizedSortOptions.length) return null;
+    const trimmedCurrentSort = currentSort.trim().toLowerCase();
+    if (!trimmedCurrentSort) return normalizedSortOptions[0];
+    return normalizedSortOptions.find(
+      (opt) => opt.value.trim().toLowerCase() === trimmedCurrentSort
+    ) || normalizedSortOptions[0];
+  }, [normalizedSortOptions, currentSort]);
+  const selectedSortLabel = selectedSortOption?.label || "";
+  const getQueryUrl = useCallback(
+    (updates) => {
+      const initialParams = searchParams ? searchParams.toString() : "";
+      const params = new URLSearchParams(initialParams || query || {});
+      Object.entries(updates).forEach(([key, value]) => {
+        if (value) {
+          params.set(key, value);
+        } else {
+          params.delete(key);
+        }
+      });
+      params.delete("$skip");
+      params.delete("skip");
+      const queryString = Array.from(params.entries()).map(([key, value]) => `${key}=${encodeURIComponent(value)}`).join("&");
+      return queryString ? `${path}?${queryString}` : path;
+    },
+    [path, query, searchParams]
+  );
+  const navigateWithoutReload = useCallback(
+    (url) => {
+      if (typeof window !== "undefined") {
+        const targetUrl = new URL(url, window.location.origin);
+        if (targetUrl.pathname === window.location.pathname && decodeURIComponent(targetUrl.search) === decodeURIComponent(window.location.search)) {
+          return;
+        }
+      }
+      router.push(url, { scroll: false });
+    },
+    [router]
+  );
+  const handleSelectSort = useCallback(
+    (sortValue) => {
+      setIsSortOpen(false);
+      navigateWithoutReload(
+        getQueryUrl({
+          $orderby: sortValue || void 0,
+          orderBy: void 0
+        })
+      );
+    },
+    [getQueryUrl, navigateWithoutReload]
+  );
+  const getFacetUrl = (field, value) => {
+    const updatedSelections = new Map(selectedFacetValues);
+    if (value) {
+      if (updatedSelections.get(field) === value) {
+        updatedSelections.delete(field);
+      } else {
+        updatedSelections.set(field, value);
+      }
+    } else {
+      updatedSelections.delete(field);
+    }
+    const updatedFilter = buildFacetFilter(updatedSelections);
+    return getQueryUrl({
+      $filter: updatedFilter || void 0,
+      filter: void 0
+    });
+  };
+  const clearFacetField = (field) => {
+    const updatedSelections = new Map(selectedFacetValues);
+    updatedSelections.delete(field);
+    const updatedFilter = buildFacetFilter(updatedSelections);
+    navigateWithoutReload(
+      getQueryUrl({
+        $filter: updatedFilter || void 0,
+        filter: void 0
+      })
+    );
+  };
+  const handleSearch = useCallback(async () => {
+    const trimmedSearchText = searchText.trim();
+    if (trimmedSearchText === currentSearch.trim()) {
+      return { isSuccessful: true };
+    }
+    navigateWithoutReload(
+      getQueryUrl({
+        "$search": trimmedSearchText || void 0
+      })
+    );
+    return { isSuccessful: true };
+  }, [currentSearch, getQueryUrl, navigateWithoutReload, searchText]);
+  const handleClearAll = useCallback(async () => {
+    navigateWithoutReload(
+      getQueryUrl({
+        $filter: void 0,
+        filter: void 0,
+        $orderby: void 0,
+        orderBy: void 0
+      })
+    );
+    return { isSuccessful: true };
+  }, [getQueryUrl, navigateWithoutReload]);
+  const hasFacetControls = Boolean(showFacets && (activeFacets.length > 0 || selectedFacetValues.size > 0));
+  const hasSortControls = Boolean(showSortOptions && normalizedSortOptions.length > 0);
+  const hasActiveFiltersOrSort = Boolean(
+    currentFilter.trim() || currentSort.trim()
+  );
+  const selectedFacetCount = selectedFacetValues.size;
+  const shouldShowToolbarClearAll = hasActiveFiltersOrSort && !hasFacetControls;
+  const shouldShowToolbar = mode === "toolbar" && (showSearchBar || hasSortControls || showFacets || shouldShowToolbarClearAll);
+  const shouldShowFacets = mode === "facets" && (hasFacetControls || showFacets && activeFacets.length > 0);
+  if (!shouldShowToolbar && !shouldShowFacets) {
+    return null;
+  }
+  const renderFacetItems = (field, values) => /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1 pt-1 pb-1", children: values.map((facet) => {
+    const isSelected = selectedFacetValues.get(field) === facet.value;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => navigateWithoutReload(getFacetUrl(field, facet.value)),
+        "aria-pressed": isSelected,
+        className: `group flex w-full cursor-pointer items-center justify-between gap-2.5 rounded-md px-2 py-1.5 text-left text-sm transition-all duration-150 ease-out focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-base ${isSelected ? "bg-neutral-soft font-medium border border-neutral-soft" : "hover:bg-neutral-weak border border-transparent"}`,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2.5", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `flex h-4 w-4 shrink-0 items-center justify-center rounded-[3px] border transition-colors duration-150 ${isSelected ? "bg-primary-base border-primary-base" : " group-hover:border-neutral-strong bg-default border-neutral-soft"}`,
+                children: isSelected && /* @__PURE__ */ jsx(CheckIcon, { className: "h-3 w-3" })
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "leading-snug break-words", children: facet.value })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `shrink-0 rounded px-1.5 py-0.5 text-xs transition-colors ml-2 ${isSelected ? "bg-neutral-weak font-semibold" : "bg-neutral-weak font-normal"}`,
+              children: facet.count
+            }
+          )
+        ]
+      },
+      `${field}-${facet.value}`
+    );
+  }) });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: mode === "toolbar" ? "my-4 sm:my-6" : "flex flex-col rounded-md border border-neutral-soft bg-default p-4 shadow-sm",
+      children: [
+        shouldShowToolbar && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "hidden lg:flex lg:items-center lg:justify-between lg:gap-4", children: [
+            showSearchBar && /* @__PURE__ */ jsxs(
+              "form",
+              {
+                role: "search",
+                className: "flex w-full items-center gap-2 md:min-w-0 md:flex-1",
+                onSubmit: (event) => {
+                  event.preventDefault();
+                  void handleSearch();
+                },
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "relative min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsx(SearchIcon, { className: "pointer-events-none absolute left-3.5 top-1/2 z-10 h-4 w-4 -translate-y-1/2 opacity-60" }),
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "text",
+                        name: "searchText",
+                        value: searchText,
+                        onChange: (e) => setSearchText(e.target.value),
+                        placeholder: "Search discussions, topics, or keywords...",
+                        className: "h-10 w-full rounded-md border border-neutral-soft bg-default py-2 pl-10 pr-4 text-sm shadow-sm transition-colors focus:border-primary-base focus:outline-none focus:ring-1 focus:ring-primary-base"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs(
+                    Button_default,
+                    {
+                      ButtonType: "Primary" /* Solid */,
+                      onClick: handleSearch,
+                      className: "!h-10 !rounded-md !px-5 !py-0 flex items-center justify-center gap-1.5 shrink-0",
+                      children: [
+                        /* @__PURE__ */ jsx(SearchIcon, { className: "h-4 w-4" }),
+                        /* @__PURE__ */ jsx("span", { children: "Search" })
+                      ]
+                    }
+                  )
+                ]
+              }
+            ),
+            hasSortControls && /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", ref: desktopSortDropdownRef, children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setIsSortOpen((prev) => !prev),
+                  "aria-expanded": isSortOpen,
+                  className: "inline-flex h-10 items-center justify-between gap-2.5 rounded-md border border-neutral-soft bg-default px-3.5 text-sm font-normal shadow-sm transition-all hover:bg-neutral-weak focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-base cursor-pointer whitespace-nowrap",
+                  children: [
+                    /* @__PURE__ */ jsxs("span", { className: "whitespace-nowrap", children: [
+                      /* @__PURE__ */ jsx("span", { className: "opacity-70", children: "Sort by: " }),
+                      /* @__PURE__ */ jsx("span", { className: "font-semibold", children: selectedSortLabel })
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      ChevronDownIcon,
+                      {
+                        className: `h-4 w-4 shrink-0 transition-transform duration-200 ${isSortOpen ? "rotate-180" : ""}`
+                      }
+                    )
+                  ]
+                }
+              ),
+              isSortOpen && /* @__PURE__ */ jsx("div", { className: "absolute right-0 z-50 mt-1.5 w-max min-w-full max-h-80 overflow-y-auto rounded-md border border-neutral-soft bg-default p-1 shadow-lg", children: normalizedSortOptions.map((option) => {
+                const isSelected = selectedSortOption?.value === option.value;
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => handleSelectSort(option.value),
+                    className: `flex w-full items-center justify-between gap-4 rounded-md px-3 py-1.5 text-left text-sm transition-colors cursor-pointer whitespace-nowrap ${isSelected ? "bg-primary-base font-semibold" : "hover:bg-neutral-soft font-normal"}`,
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: option.label }),
+                      isSelected && /* @__PURE__ */ jsx(CheckIcon, { className: "h-4 w-4 shrink-0" })
+                    ]
+                  },
+                  option.value
+                );
+              }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2.5 lg:hidden", children: [
+            showSearchBar && /* @__PURE__ */ jsxs(
+              "form",
+              {
+                role: "search",
+                className: "relative w-full",
+                onSubmit: (event) => {
+                  event.preventDefault();
+                  void handleSearch();
+                },
+                children: [
+                  /* @__PURE__ */ jsx(SearchIcon, { className: "pointer-events-none absolute left-3.5 top-1/2 z-10 h-4 w-4 -translate-y-1/2 opacity-50" }),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "text",
+                      name: "searchTextMobile",
+                      value: searchText,
+                      onChange: (e) => setSearchText(e.target.value),
+                      placeholder: "Search jobs, skills, or keywords...",
+                      className: "h-11 w-full rounded-md border border-neutral-soft bg-default py-2.5 pl-10 pr-4 text-sm shadow-sm transition-colors focus:border-primary-base focus:outline-none focus:ring-1 focus:ring-primary-base"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2.5 pt-0.5", children: [
+              showFacets && /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setIsMobileFiltersOpen(true),
+                  className: "inline-flex h-10 items-center justify-center gap-2 rounded-md border border-neutral-soft bg-default px-3.5 text-sm font-medium shadow-sm transition-all hover:bg-neutral-weak cursor-pointer active:scale-95",
+                  children: [
+                    /* @__PURE__ */ jsx(FilterSlidersIcon, { className: "h-4 w-4" }),
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      "Filters",
+                      selectedFacetCount > 0 ? ` (${selectedFacetCount})` : ""
+                    ] }),
+                    selectedFacetCount > 0 && /* @__PURE__ */ jsxs("span", { className: "relative flex h-2 w-2", children: [
+                      /* @__PURE__ */ jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-primary-base opacity-75" }),
+                      /* @__PURE__ */ jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-primary-base" })
+                    ] })
+                  ]
+                }
+              ),
+              hasSortControls && /* @__PURE__ */ jsxs("div", { className: "relative shrink-0 ml-auto", ref: mobileSortDropdownRef, children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setIsSortOpen((prev) => !prev),
+                    "aria-expanded": isSortOpen,
+                    className: "inline-flex h-10 items-center justify-between gap-2 rounded-md border border-neutral-soft bg-default px-3.5 text-sm font-medium shadow-sm transition-all hover:bg-neutral-weak cursor-pointer whitespace-nowrap",
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap font-medium", children: selectedSortLabel }),
+                      /* @__PURE__ */ jsx(
+                        ChevronDownIcon,
+                        {
+                          className: `h-4 w-4 shrink-0 transition-transform duration-200 ${isSortOpen ? "rotate-180" : ""}`
+                        }
+                      )
+                    ]
+                  }
+                ),
+                isSortOpen && /* @__PURE__ */ jsx("div", { className: "absolute right-0 z-50 mt-1.5 w-max min-w-[160px] max-h-80 overflow-y-auto rounded-md border border-neutral-soft bg-default p-1 shadow-xl", children: normalizedSortOptions.map((option) => {
+                  const isSelected = selectedSortOption?.value === option.value;
+                  return /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => handleSelectSort(option.value),
+                      className: `flex w-full items-center justify-between gap-3 rounded-md px-3 py-2 text-left text-sm transition-colors cursor-pointer whitespace-nowrap ${isSelected ? "bg-primary-base font-semibold" : "hover:bg-neutral-soft font-normal"}`,
+                      children: [
+                        /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: option.label }),
+                        isSelected && /* @__PURE__ */ jsx(CheckIcon, { className: "h-4 w-4 shrink-0" })
+                      ]
+                    },
+                    option.value
+                  );
+                }) })
+              ] })
+            ] }),
+            selectedFacetCount > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5 pt-1", children: [
+              Array.from(selectedFacetValues.entries()).map(([field, value]) => /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => clearFacetField(field),
+                  className: "group inline-flex max-w-full cursor-pointer items-center gap-1.5 rounded-md border border-neutral-soft bg-neutral-weak px-2.5 py-1 text-xs transition-colors hover:bg-neutral-soft",
+                  title: `Remove filter: ${value}`,
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-medium truncate max-w-[140px]", children: value }),
+                    /* @__PURE__ */ jsx(CloseIcon, { className: "h-3 w-3 shrink-0 opacity-60 group-hover:opacity-100" })
+                  ]
+                },
+                `mobile-chip-${field}`
+              )),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => void handleClearAll(),
+                  className: "inline-flex cursor-pointer items-center rounded-md px-2 py-1 text-xs font-semibold underline underline-offset-2 hover:bg-neutral-weak transition-colors ml-auto",
+                  children: "Clear all"
+                }
+              )
+            ] })
+          ] }),
+          isMobileFiltersOpen && /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex flex-col justify-end lg:hidden", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "fixed inset-0 bg-neutral-stronger/60 backdrop-blur-xs transition-opacity duration-300",
+                onClick: () => setIsMobileFiltersOpen(false),
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex h-[85vh] max-h-[85vh] w-full flex-col rounded-t-xl border-t border-neutral-soft bg-default shadow-2xl transition-transform duration-300 animate-in slide-in-from-bottom", children: [
+              /* @__PURE__ */ jsx("div", { className: "pt-2.5 pb-1", children: /* @__PURE__ */ jsx("div", { className: "mx-auto h-1.5 w-12 rounded-full bg-neutral-soft" }) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-5 py-3 border-b border-neutral-soft", children: [
+                /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold tracking-tight", children: "Filters" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                  selectedFacetCount > 0 && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => void handleClearAll(),
+                      className: "text-xs font-semibold cursor-pointer underline underline-offset-2 hover:opacity-80",
+                      children: "Clear all"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setIsMobileFiltersOpen(false),
+                      className: "p-1 rounded-full hover:bg-neutral-weak transition-colors cursor-pointer",
+                      "aria-label": "Close filters",
+                      children: /* @__PURE__ */ jsx(CloseIcon, { className: "h-5 w-5 opacity-70" })
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-5 py-3 space-y-3 divide-y divide-neutral-soft", children: activeFacets.map(([field, values]) => {
+                const isOpen = !collapsedCategories[field];
+                const selectedValue = selectedFacetValues.get(field);
+                const categorySearch = facetCategorySearch[field]?.toLowerCase() || "";
+                const filteredValues = categorySearch ? values.filter((v) => v.value.toLowerCase().includes(categorySearch)) : values;
+                return /* @__PURE__ */ jsxs("div", { className: "pt-3 first:pt-0", children: [
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => toggleCategory(field),
+                      className: "flex w-full cursor-pointer items-center justify-between rounded-md py-2 text-left transition-colors",
+                      children: [
+                        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
+                          /* @__PURE__ */ jsx("span", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-neutral-soft bg-neutral-weak", children: getCategoryIcon(field) }),
+                          /* @__PURE__ */ jsx("span", { className: "font-semibold text-sm", children: humanize(field) })
+                        ] }),
+                        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                          selectedValue && /* @__PURE__ */ jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary-base text-xs font-bold leading-none", children: "1" }),
+                          /* @__PURE__ */ jsx(
+                            ChevronDownIcon,
+                            {
+                              className: `h-4 w-4 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`
+                            }
+                          )
+                        ] })
+                      ]
+                    }
+                  ),
+                  isOpen && /* @__PURE__ */ jsxs("div", { className: "pt-2 pb-1 pl-1 pr-1 space-y-1.5", children: [
+                    values.length > 5 && /* @__PURE__ */ jsxs("div", { className: "relative mb-2", children: [
+                      /* @__PURE__ */ jsx(SearchIcon, { className: "pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 opacity-50" }),
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          type: "text",
+                          value: facetCategorySearch[field] || "",
+                          onChange: (e) => setFacetCategorySearch((prev) => ({
+                            ...prev,
+                            [field]: e.target.value
+                          })),
+                          placeholder: `Search ${humanize(field).toLowerCase()}...`,
+                          className: "h-8.5 w-full rounded-md border border-neutral-soft bg-neutral-weak py-1 pl-8 pr-3 text-xs focus:border-primary-base focus:outline-none"
+                        }
+                      )
+                    ] }),
+                    filteredValues.length === 0 ? /* @__PURE__ */ jsx("div", { className: "py-2 text-center text-xs opacity-60", children: "No matching options" }) : filteredValues.map((facet) => {
+                      const isChecked = selectedValue === facet.value;
+                      return /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => navigateWithoutReload(
+                            getFacetUrl(field, facet.value)
+                          ),
+                          "aria-pressed": isChecked,
+                          className: `flex w-full cursor-pointer items-center justify-between gap-3 rounded-md px-2.5 py-2 text-left text-sm transition-colors ${isChecked ? "bg-neutral-soft font-medium" : "hover:bg-neutral-weak"}`,
+                          children: [
+                            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [
+                              /* @__PURE__ */ jsx(
+                                "span",
+                                {
+                                  className: `flex h-5 w-5 shrink-0 items-center justify-center rounded-md border transition-colors ${isChecked ? "bg-primary-base border-primary-base" : "border-neutral-soft bg-default"}`,
+                                  children: isChecked && /* @__PURE__ */ jsx(CheckIcon, { className: "h-3.5 w-3.5" })
+                                }
+                              ),
+                              /* @__PURE__ */ jsx("span", { className: "leading-snug break-words", children: facet.value })
+                            ] }),
+                            /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs opacity-60 ml-2", children: facet.count })
+                          ]
+                        },
+                        `drawer-${field}-${facet.value}`
+                      );
+                    })
+                  ] })
+                ] }, `drawer-cat-${field}`);
+              }) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 border-t border-neutral-soft bg-default p-4", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setIsMobileFiltersOpen(false),
+                    className: "flex-1 h-11 rounded-md border border-neutral-soft bg-default text-sm font-medium transition-colors hover:bg-neutral-weak cursor-pointer flex items-center justify-center",
+                    children: "Close"
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setIsMobileFiltersOpen(false),
+                    className: "flex-1 h-11 rounded-md bg-primary-base text-sm font-semibold shadow-md transition-all hover:opacity-90 active:scale-98 cursor-pointer flex items-center justify-center",
+                    children: [
+                      "Apply Filters",
+                      selectedFacetCount > 0 ? ` (${selectedFacetCount})` : ""
+                    ]
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] }),
+        shouldShowFacets && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-neutral-soft pb-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(FilterSlidersIcon, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold tracking-tight", children: "Filters" }),
+              selectedFacetCount > 0 && /* @__PURE__ */ jsx("span", { className: "flex h-5 items-center justify-center rounded-full bg-primary-base px-2 text-xs font-semibold", children: selectedFacetCount })
+            ] }),
+            hasActiveFiltersOrSort && /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => void handleClearAll(),
+                className: "group inline-flex cursor-pointer items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium transition-colors duration-150 hover:bg-neutral-soft focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-base",
+                "aria-label": "Clear all filters and sorting",
+                children: [
+                  /* @__PURE__ */ jsx(ResetIcon, { className: "h-3.5 w-3.5 transition-transform duration-200 group-hover:-rotate-45" }),
+                  /* @__PURE__ */ jsx("span", { children: "Clear all" })
+                ]
+              }
+            )
+          ] }),
+          selectedFacetCount > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5 pb-2.5 border-b border-neutral-soft", children: Array.from(selectedFacetValues.entries()).map(([field, value]) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => clearFacetField(field),
+              className: "group inline-flex max-w-full cursor-pointer items-center gap-1.5 rounded-md border border-neutral-soft bg-neutral-weak px-2.5 py-1 text-xs transition-colors hover:bg-neutral-soft",
+              title: `Remove filter: ${value}`,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "font-medium truncate max-w-[150px]", children: value }),
+                /* @__PURE__ */ jsx(CloseIcon, { className: "h-3.5 w-3.5 shrink-0 opacity-60 group-hover:opacity-100" })
+              ]
+            },
+            `chip-${field}`
+          )) }),
+          activeFacets.length === 1 && /* @__PURE__ */ jsx("nav", { "aria-label": `${humanize(activeFacets[0][0])} filters`, children: /* @__PURE__ */ jsxs("div", { className: "py-1", children: [
+            /* @__PURE__ */ jsx("div", { className: "px-1 pb-2 font-medium text-sm", children: humanize(activeFacets[0][0]) }),
+            renderFacetItems(activeFacets[0][0], activeFacets[0][1])
+          ] }) }),
+          activeFacets.length > 1 && /* @__PURE__ */ jsx("div", { className: "flex flex-col divide-y divide-neutral-soft", children: activeFacets.map(([field, values]) => {
+            const isOpen = !collapsedCategories[field];
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "py-2 first:pt-0 last:pb-0",
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => toggleCategory(field),
+                      className: "flex w-full cursor-pointer items-center justify-between rounded-md px-1.5 py-1.5 text-sm font-semibold transition-colors duration-150 hover:bg-neutral-weak focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-base",
+                      children: [
+                        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                          /* @__PURE__ */ jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded border border-neutral-soft bg-neutral-weak", children: getCategoryIcon(field) }),
+                          /* @__PURE__ */ jsx("span", { children: humanize(field) })
+                        ] }),
+                        /* @__PURE__ */ jsx(
+                          ChevronDownIcon,
+                          {
+                            className: `h-4 w-4 transition-transform duration-200 ease-out ${isOpen ? "rotate-180" : ""}`
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  isOpen && /* @__PURE__ */ jsx("div", { className: "pt-1", children: renderFacetItems(field, values) })
+                ]
+              },
+              field
+            );
+          }) })
+        ] })
+      ]
+    }
+  );
+};
+var DataBindingControls_default = DataBindingControls;
+export {
+  DataBindingControls_default as default
+};