@ayasofyazilim/ui 0.0.0 → 0.0.1

package/dist/custom/master-data-grid/components/filters/client-filter.js

@@ -0,0 +1,310 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "../../../../components/select";
+import { getFilterOperators } from "../../utils/filter-fns";
+import { getColumnName, getTranslations } from "../../utils/translation-utils";
+import { FilterInput } from "./filter-input";
+import { ButtonGroup } from "@repo/ayasofyazilim-ui/components/button-group";
+import { Button } from "@repo/ayasofyazilim-ui/components/button";
+import {
+  Trash2,
+  ArrowUpDown,
+  CalendarCheck,
+  CalendarX,
+  ChevronLeft,
+  ChevronRight,
+  Circle,
+  CircleOff,
+  Equal,
+  List,
+  ListX,
+  X as NotEqual,
+  SearchCode,
+  SearchX,
+  TextCursor,
+  TextCursorInput
+} from "lucide-react";
+function getOperatorIcon(operator) {
+  const icons = {
+    equals: /* @__PURE__ */ jsx(Equal, { className: "h-3.5 w-3.5 min-w-3.5" }),
+    notEquals: /* @__PURE__ */ jsx(NotEqual, { className: "h-3.5 w-3.5 min-w-3.5" }),
+    contains: /* @__PURE__ */ jsx(SearchCode, { className: "h-3.5 w-3.5 min-w-3.5" }),
+    notContains: /* @__PURE__ */ jsx(SearchX, { className: "h-3.5 w-3.5 min-w-3.5" }),
+    startsWith: /* @__PURE__ */ jsx(TextCursorInput, { className: "h-3.5 w-3.5 min-w-3.5" }),
+    endsWith: /* @__PURE__ */ jsx(TextCursor, { className: "h-3.5 w-3.5 min-w-3.5" }),
+    isEmpty: /* @__PURE__ */ jsx(Circle, { className: "h-3.5 w-3.5 min-w-3.5" }),
+    isNotEmpty: /* @__PURE__ */ jsx(CircleOff, { className: "h-3.5 w-3.5 min-w-3.5" }),
+    greaterThan: /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5 min-w-3.5" }),
+    greaterThanOrEqual: /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5 min-w-3.5" }),
+    lessThan: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-3.5 w-3.5 min-w-3.5" }),
+    lessThanOrEqual: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-3.5 w-3.5 min-w-3.5" }),
+    between: /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-3.5 w-3.5 min-w-3.5" }),
+    inRange: /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-3.5 w-3.5 min-w-3.5" }),
+    before: /* @__PURE__ */ jsx(CalendarX, { className: "h-3.5 w-3.5 min-w-3.5" }),
+    after: /* @__PURE__ */ jsx(CalendarCheck, { className: "h-3.5 w-3.5 min-w-3.5" }),
+    inList: /* @__PURE__ */ jsx(List, { className: "h-3.5 w-3.5 min-w-3.5" }),
+    notInList: /* @__PURE__ */ jsx(ListX, { className: "h-3.5 w-3.5 min-w-3.5" })
+  };
+  return icons[operator] || /* @__PURE__ */ jsx(SearchCode, { className: "h-3.5 w-3.5 min-w-3.5" });
+}
+function ClientFilterContent({
+  table,
+  config,
+  setOpen
+}) {
+  const { t } = config;
+  const currentFilters = table.getState().columnFilters;
+  const [filterRows, setFilterRows] = useState(() => {
+    if (currentFilters.length > 0) {
+      return currentFilters.map((tableFilter, index) => {
+        const filterValue = tableFilter.value;
+        let parsedValue = "";
+        let parsedValue2 = "";
+        if (filterValue?.value !== null && filterValue?.value !== void 0) {
+          parsedValue = typeof filterValue.value === "object" ? JSON.stringify(filterValue.value) : String(filterValue.value);
+        }
+        if (filterValue?.value2 !== null && filterValue?.value2 !== void 0) {
+          parsedValue2 = typeof filterValue.value2 === "object" ? JSON.stringify(filterValue.value2) : String(filterValue.value2);
+        }
+        return {
+          id: `filter-${index}`,
+          columnId: tableFilter.id,
+          operator: filterValue?.operator || "contains",
+          value: parsedValue,
+          value2: parsedValue2
+        };
+      });
+    }
+    return [
+      {
+        id: "filter-0",
+        columnId: "",
+        operator: "contains",
+        value: "",
+        value2: ""
+      }
+    ];
+  });
+  const filterableColumns = table.getAllColumns().filter((col) => col.getCanFilter());
+  const addFilter = () => {
+    const newId = `filter-${Date.now()}`;
+    setFilterRows([
+      ...filterRows,
+      { id: newId, columnId: "", operator: "contains", value: "", value2: "" }
+    ]);
+  };
+  const removeFilter = (id) => {
+    if (filterRows.length === 1) {
+      setFilterRows([
+        {
+          id: "filter-0",
+          columnId: "",
+          operator: "contains",
+          value: "",
+          value2: ""
+        }
+      ]);
+    } else {
+      setFilterRows(filterRows.filter((row) => row.id !== id));
+    }
+  };
+  const updateFilter = (id, updates) => {
+    setFilterRows(
+      filterRows.map((row) => row.id === id ? { ...row, ...updates } : row)
+    );
+  };
+  const getAvailableOperators = (columnId) => {
+    if (!columnId) return ["contains"];
+    const column = table.getColumn(columnId);
+    if (!column) return ["contains"];
+    const meta = column.columnDef.meta;
+    const schemaProperty = meta?.schemaProperty;
+    const filterOperators = meta?.filterOperators;
+    return filterOperators || (schemaProperty ? getFilterOperators(schemaProperty.type, schemaProperty.format) : ["contains"]);
+  };
+  const getColumnMeta = (columnId) => {
+    if (!columnId) return void 0;
+    const column = table.getColumn(columnId);
+    if (!column) return void 0;
+    return column.columnDef.meta;
+  };
+  const handleColumnChange = (filterId, columnId) => {
+    const operators = getAvailableOperators(columnId);
+    updateFilter(filterId, { columnId, operator: operators[0] || "contains" });
+  };
+  const applyFilters = (closePopover) => {
+    table.resetColumnFilters();
+    filterRows.forEach((row) => {
+      const isRange = row.operator === "between" || row.operator === "inRange";
+      const needsNoInput = row.operator === "isEmpty" || row.operator === "isNotEmpty";
+      if (row.columnId) {
+        const column = table.getColumn(row.columnId);
+        if (column) {
+          if (needsNoInput) {
+            const filter = {
+              id: row.columnId,
+              operator: row.operator,
+              value: ""
+            };
+            column.setFilterValue(filter);
+          } else if (isRange && row.value && row.value2) {
+            const filter = {
+              id: row.columnId,
+              operator: row.operator,
+              value: row.value,
+              value2: row.value2
+            };
+            column.setFilterValue(filter);
+          } else if (!isRange && row.value) {
+            const filter = {
+              id: row.columnId,
+              operator: row.operator,
+              value: row.value
+            };
+            column.setFilterValue(filter);
+          }
+        }
+      }
+    });
+    closePopover?.();
+    setOpen(false);
+  };
+  const resetFilters = () => {
+    table.resetColumnFilters();
+    setFilterRows([
+      {
+        id: "filter-0",
+        columnId: "",
+        operator: "contains",
+        value: "",
+        value2: ""
+      }
+    ]);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "font-semibold text-sm sm:hidden", children: getTranslations("filter.title", t) }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-2 max-h-[60vh] overflow-y-auto", children: filterRows.map((row, index) => {
+      const availableOps = getAvailableOperators(row.columnId);
+      const columnMeta = getColumnMeta(row.columnId);
+      return /* @__PURE__ */ jsxs(
+        ButtonGroup,
+        {
+          className: "w-full min-w-0 flex-wrap sm:flex-nowrap",
+          children: [
+            index === 0 ? /* @__PURE__ */ jsx("div", { className: "w-12 sm:w-16 rounded-l-md border flex items-center justify-center px-1 sm:px-2 text-xs font-medium text-muted-foreground shrink-0", children: getTranslations("filter.where", t) }) : /* @__PURE__ */ jsx("div", { className: "w-12 sm:w-16 rounded-l-md border flex items-center justify-center px-1 sm:px-2 text-xs font-medium text-muted-foreground shrink-0", children: getTranslations("filter.and", t) }),
+            /* @__PURE__ */ jsxs(
+              Select,
+              {
+                value: row.columnId,
+                onValueChange: (value) => handleColumnChange(row.id, value),
+                children: [
+                  /* @__PURE__ */ jsx(SelectTrigger, { className: "w-32 sm:w-40 min-w-0", children: /* @__PURE__ */ jsx(
+                    SelectValue,
+                    {
+                      placeholder: getTranslations("filter.selectColumn", t)
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(SelectContent, { children: filterableColumns.map((col) => /* @__PURE__ */ jsx(SelectItem, { value: col.id, children: getColumnName(col, t) }, col.id)) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Select,
+              {
+                value: row.operator,
+                onValueChange: (value) => updateFilter(row.id, { operator: value }),
+                disabled: !row.columnId,
+                children: [
+                  /* @__PURE__ */ jsx(SelectTrigger, { className: "w-16 sm:w-40 min-w-0", children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx("span", { className: "sm:hidden", children: getOperatorIcon(row.operator) }),
+                    /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: getTranslations(`filter.operator.${row.operator}`, t) })
+                  ] }) }),
+                  /* @__PURE__ */ jsx(SelectContent, { children: availableOps.map((op) => /* @__PURE__ */ jsx(SelectItem, { value: op, children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                    getOperatorIcon(op),
+                    /* @__PURE__ */ jsx("span", { children: getTranslations(`filter.operator.${op}`, t) })
+                  ] }) }, op)) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              FilterInput,
+              {
+                operator: row.operator,
+                value: row.value,
+                value2: row.value2,
+                columnMeta,
+                onValueChange: (value) => updateFilter(row.id, { value }),
+                onValue2Change: (value2) => updateFilter(row.id, { value2 }),
+                onSliderChange: (values) => {
+                  const [min, max] = values;
+                  updateFilter(row.id, {
+                    value: String(min),
+                    value2: String(max)
+                  });
+                },
+                onClear: () => updateFilter(row.id, { value: "", value2: "" }),
+                t,
+                variant: "popover"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "icon",
+                onClick: () => removeFilter(row.id),
+                className: "shrink-0",
+                children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5 sm:h-4 sm:w-4" })
+              }
+            )
+          ]
+        },
+        row.id
+      );
+    }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-2 pt-4 border-t", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: addFilter,
+            variant: "outline",
+            size: "sm",
+            className: "text-xs sm:text-sm",
+            children: getTranslations("filter.addFilter", t)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: resetFilters,
+            variant: "outline",
+            size: "sm",
+            className: "text-xs sm:text-sm",
+            children: getTranslations("filter.resetFilters", t)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: () => applyFilters(),
+          size: "sm",
+          className: "text-xs sm:text-sm",
+          children: getTranslations("filter.apply", t)
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  ClientFilterContent
+};
+//# sourceMappingURL=client-filter.js.map

package/dist/custom/master-data-grid/components/filters/client-filter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/custom/master-data-grid/components/filters/client-filter.tsx"],"sourcesContent":["import { Dispatch, SetStateAction, useState } from \"react\";\r\nimport {\r\n  Select,\r\n  SelectContent,\r\n  SelectItem,\r\n  SelectTrigger,\r\n  SelectValue,\r\n} from \"../../../../components/select\";\r\nimport type { ColumnFilter, ColumnMeta, FilterOperator } from \"../../types\";\r\nimport { getFilterOperators } from \"../../utils/filter-fns\";\r\nimport { getColumnName, getTranslations } from \"../../utils/translation-utils\";\r\nimport { FilterInput } from \"./filter-input\";\r\nimport { BaseMultiFilterDialogProps } from \"./multi-filter-dialog\";\r\nimport { ButtonGroup } from \"@repo/ayasofyazilim-ui/components/button-group\";\r\nimport { Button } from \"@repo/ayasofyazilim-ui/components/button\";\r\nimport {\r\n  Trash2,\r\n  ArrowUpDown,\r\n  CalendarCheck,\r\n  CalendarX,\r\n  ChevronLeft,\r\n  ChevronRight,\r\n  Circle,\r\n  CircleOff,\r\n  Equal,\r\n  List,\r\n  ListX,\r\n  X as NotEqual,\r\n  SearchCode,\r\n  SearchX,\r\n  TextCursor,\r\n  TextCursorInput,\r\n} from \"lucide-react\";\r\n\r\ninterface FilterRow {\r\n  id: string;\r\n  columnId: string;\r\n  operator: FilterOperator;\r\n  value: string;\r\n  value2?: string;\r\n}\r\ninterface ClientFilterContentProps<TData>\r\n  extends BaseMultiFilterDialogProps<TData> {\r\n  setOpen: Dispatch<SetStateAction<boolean>>;\r\n}\r\n\r\nfunction getOperatorIcon(operator: FilterOperator) {\r\n  const icons: Record<FilterOperator, React.ReactNode> = {\r\n    equals: <Equal className=\"h-3.5 w-3.5 min-w-3.5\" />,\r\n    notEquals: <NotEqual className=\"h-3.5 w-3.5 min-w-3.5\" />,\r\n    contains: <SearchCode className=\"h-3.5 w-3.5 min-w-3.5\" />,\r\n    notContains: <SearchX className=\"h-3.5 w-3.5 min-w-3.5\" />,\r\n    startsWith: <TextCursorInput className=\"h-3.5 w-3.5 min-w-3.5\" />,\r\n    endsWith: <TextCursor className=\"h-3.5 w-3.5 min-w-3.5\" />,\r\n    isEmpty: <Circle className=\"h-3.5 w-3.5 min-w-3.5\" />,\r\n    isNotEmpty: <CircleOff className=\"h-3.5 w-3.5 min-w-3.5\" />,\r\n    greaterThan: <ChevronRight className=\"h-3.5 w-3.5 min-w-3.5\" />,\r\n    greaterThanOrEqual: <ChevronRight className=\"h-3.5 w-3.5 min-w-3.5\" />,\r\n    lessThan: <ChevronLeft className=\"h-3.5 w-3.5 min-w-3.5\" />,\r\n    lessThanOrEqual: <ChevronLeft className=\"h-3.5 w-3.5 min-w-3.5\" />,\r\n    between: <ArrowUpDown className=\"h-3.5 w-3.5 min-w-3.5\" />,\r\n    inRange: <ArrowUpDown className=\"h-3.5 w-3.5 min-w-3.5\" />,\r\n    before: <CalendarX className=\"h-3.5 w-3.5 min-w-3.5\" />,\r\n    after: <CalendarCheck className=\"h-3.5 w-3.5 min-w-3.5\" />,\r\n    inList: <List className=\"h-3.5 w-3.5 min-w-3.5\" />,\r\n    notInList: <ListX className=\"h-3.5 w-3.5 min-w-3.5\" />,\r\n  };\r\n  return icons[operator] || <SearchCode className=\"h-3.5 w-3.5 min-w-3.5\" />;\r\n}\r\n\r\nexport function ClientFilterContent<TData>({\r\n  table,\r\n  config,\r\n  setOpen,\r\n}: ClientFilterContentProps<TData>) {\r\n  const { t } = config;\r\n  const currentFilters = table.getState().columnFilters;\r\n  const [filterRows, setFilterRows] = useState<FilterRow[]>(() => {\r\n    if (currentFilters.length > 0) {\r\n      return currentFilters.map((tableFilter, index) => {\r\n        // TanStack Table stores the entire ColumnFilter object in the value property\r\n        const filterValue = tableFilter.value as ColumnFilter;\r\n\r\n        // Handle different value types\r\n        let parsedValue = \"\";\r\n        let parsedValue2 = \"\";\r\n\r\n        if (filterValue?.value !== null && filterValue?.value !== undefined) {\r\n          parsedValue =\r\n            typeof filterValue.value === \"object\"\r\n              ? JSON.stringify(filterValue.value)\r\n              : String(filterValue.value);\r\n        }\r\n\r\n        if (filterValue?.value2 !== null && filterValue?.value2 !== undefined) {\r\n          parsedValue2 =\r\n            typeof filterValue.value2 === \"object\"\r\n              ? JSON.stringify(filterValue.value2)\r\n              : String(filterValue.value2);\r\n        }\r\n\r\n        return {\r\n          id: `filter-${index}`,\r\n          columnId: tableFilter.id,\r\n          operator: filterValue?.operator || \"contains\",\r\n          value: parsedValue,\r\n          value2: parsedValue2,\r\n        };\r\n      });\r\n    }\r\n    return [\r\n      {\r\n        id: \"filter-0\",\r\n        columnId: \"\",\r\n        operator: \"contains\",\r\n        value: \"\",\r\n        value2: \"\",\r\n      },\r\n    ];\r\n  });\r\n  const filterableColumns = table\r\n    .getAllColumns()\r\n    .filter((col) => col.getCanFilter());\r\n\r\n  const addFilter = () => {\r\n    const newId = `filter-${Date.now()}`;\r\n    setFilterRows([\r\n      ...filterRows,\r\n      { id: newId, columnId: \"\", operator: \"contains\", value: \"\", value2: \"\" },\r\n    ]);\r\n  };\r\n\r\n  const removeFilter = (id: string) => {\r\n    if (filterRows.length === 1) {\r\n      setFilterRows([\r\n        {\r\n          id: \"filter-0\",\r\n          columnId: \"\",\r\n          operator: \"contains\",\r\n          value: \"\",\r\n          value2: \"\",\r\n        },\r\n      ]);\r\n    } else {\r\n      setFilterRows(filterRows.filter((row) => row.id !== id));\r\n    }\r\n  };\r\n\r\n  const updateFilter = (id: string, updates: Partial<FilterRow>) => {\r\n    setFilterRows(\r\n      filterRows.map((row) => (row.id === id ? { ...row, ...updates } : row))\r\n    );\r\n  };\r\n\r\n  const getAvailableOperators = (columnId: string): FilterOperator[] => {\r\n    if (!columnId) return [\"contains\"];\r\n    const column = table.getColumn(columnId);\r\n    if (!column) return [\"contains\"];\r\n\r\n    const meta = column.columnDef.meta as ColumnMeta | undefined;\r\n    const schemaProperty = meta?.schemaProperty;\r\n    const filterOperators = meta?.filterOperators;\r\n\r\n    return (\r\n      filterOperators ||\r\n      (schemaProperty\r\n        ? getFilterOperators(schemaProperty.type, schemaProperty.format)\r\n        : [\"contains\"])\r\n    );\r\n  };\r\n\r\n  const getColumnMeta = (columnId: string): ColumnMeta | undefined => {\r\n    if (!columnId) return undefined;\r\n    const column = table.getColumn(columnId);\r\n    if (!column) return undefined;\r\n    return column.columnDef.meta as ColumnMeta | undefined;\r\n  };\r\n\r\n  const handleColumnChange = (filterId: string, columnId: string) => {\r\n    const operators = getAvailableOperators(columnId);\r\n    updateFilter(filterId, { columnId, operator: operators[0] || \"contains\" });\r\n  };\r\n\r\n  const applyFilters = (closePopover?: () => void) => {\r\n    table.resetColumnFilters();\r\n    filterRows.forEach((row) => {\r\n      const isRange = row.operator === \"between\" || row.operator === \"inRange\";\r\n      const needsNoInput =\r\n        row.operator === \"isEmpty\" || row.operator === \"isNotEmpty\";\r\n\r\n      if (row.columnId) {\r\n        const column = table.getColumn(row.columnId);\r\n        if (column) {\r\n          if (needsNoInput) {\r\n            const filter: ColumnFilter = {\r\n              id: row.columnId,\r\n              operator: row.operator,\r\n              value: \"\",\r\n            };\r\n            column.setFilterValue(filter);\r\n          } else if (isRange && row.value && row.value2) {\r\n            const filter: ColumnFilter = {\r\n              id: row.columnId,\r\n              operator: row.operator,\r\n              value: row.value,\r\n              value2: row.value2,\r\n            };\r\n            column.setFilterValue(filter);\r\n          } else if (!isRange && row.value) {\r\n            const filter: ColumnFilter = {\r\n              id: row.columnId,\r\n              operator: row.operator,\r\n              value: row.value,\r\n            };\r\n            column.setFilterValue(filter);\r\n          }\r\n        }\r\n      }\r\n    });\r\n\r\n    closePopover?.();\r\n    setOpen(false);\r\n  };\r\n\r\n  const resetFilters = () => {\r\n    table.resetColumnFilters();\r\n    setFilterRows([\r\n      {\r\n        id: \"filter-0\",\r\n        columnId: \"\",\r\n        operator: \"contains\",\r\n        value: \"\",\r\n        value2: \"\",\r\n      },\r\n    ]);\r\n    setOpen(false);\r\n  };\r\n  return (\r\n    <div className=\"space-y-4\">\r\n      <div className=\"font-semibold text-sm sm:hidden\">\r\n        {getTranslations(\"filter.title\", t)}\r\n      </div>\r\n      <div className=\"space-y-2 max-h-[60vh] overflow-y-auto\">\r\n        {filterRows.map((row, index) => {\r\n          const availableOps = getAvailableOperators(row.columnId);\r\n          const columnMeta = getColumnMeta(row.columnId);\r\n\r\n          return (\r\n            <ButtonGroup\r\n              className=\"w-full min-w-0 flex-wrap sm:flex-nowrap\"\r\n              key={row.id}\r\n            >\r\n              {index === 0 ? (\r\n                <div className=\"w-12 sm:w-16 rounded-l-md border flex items-center justify-center px-1 sm:px-2 text-xs font-medium text-muted-foreground shrink-0\">\r\n                  {getTranslations(\"filter.where\", t)}\r\n                </div>\r\n              ) : (\r\n                <div className=\"w-12 sm:w-16 rounded-l-md border flex items-center justify-center px-1 sm:px-2 text-xs font-medium text-muted-foreground shrink-0\">\r\n                  {getTranslations(\"filter.and\", t)}\r\n                </div>\r\n              )}\r\n              <Select\r\n                value={row.columnId}\r\n                onValueChange={(value) => handleColumnChange(row.id, value)}\r\n              >\r\n                <SelectTrigger className=\"w-32 sm:w-40 min-w-0\">\r\n                  <SelectValue\r\n                    placeholder={getTranslations(\"filter.selectColumn\", t)}\r\n                  />\r\n                </SelectTrigger>\r\n                <SelectContent>\r\n                  {filterableColumns.map((col) => (\r\n                    <SelectItem key={col.id} value={col.id}>\r\n                      {getColumnName(col, t)}\r\n                    </SelectItem>\r\n                  ))}\r\n                </SelectContent>\r\n              </Select>\r\n              <Select\r\n                value={row.operator}\r\n                onValueChange={(value) =>\r\n                  updateFilter(row.id, { operator: value as FilterOperator })\r\n                }\r\n                disabled={!row.columnId}\r\n              >\r\n                <SelectTrigger className=\"w-16 sm:w-40 min-w-0\">\r\n                  <span className=\"flex items-center gap-2\">\r\n                    <span className=\"sm:hidden\">\r\n                      {getOperatorIcon(row.operator)}\r\n                    </span>\r\n                    <span className=\"hidden sm:inline\">\r\n                      {getTranslations(`filter.operator.${row.operator}`, t)}\r\n                    </span>\r\n                  </span>\r\n                </SelectTrigger>\r\n                <SelectContent>\r\n                  {availableOps.map((op) => (\r\n                    <SelectItem key={op} value={op}>\r\n                      <span className=\"flex items-center gap-2\">\r\n                        {getOperatorIcon(op)}\r\n                        <span>\r\n                          {getTranslations(`filter.operator.${op}`, t)}\r\n                        </span>\r\n                      </span>\r\n                    </SelectItem>\r\n                  ))}\r\n                </SelectContent>\r\n              </Select>\r\n              <FilterInput\r\n                operator={row.operator}\r\n                value={row.value}\r\n                value2={row.value2}\r\n                columnMeta={columnMeta}\r\n                onValueChange={(value) => updateFilter(row.id, { value })}\r\n                onValue2Change={(value2) => updateFilter(row.id, { value2 })}\r\n                onSliderChange={(values) => {\r\n                  const [min, max] = values;\r\n                  updateFilter(row.id, {\r\n                    value: String(min),\r\n                    value2: String(max),\r\n                  });\r\n                }}\r\n                onClear={() => updateFilter(row.id, { value: \"\", value2: \"\" })}\r\n                t={t}\r\n                variant=\"popover\"\r\n              />\r\n              <Button\r\n                variant=\"outline\"\r\n                size=\"icon\"\r\n                onClick={() => removeFilter(row.id)}\r\n                className=\"shrink-0\"\r\n              >\r\n                <Trash2 className=\"h-3.5 w-3.5 sm:h-4 sm:w-4\" />\r\n              </Button>\r\n            </ButtonGroup>\r\n          );\r\n        })}\r\n      </div>\r\n      <div className=\"flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-2 pt-4 border-t\">\r\n        <div className=\"flex flex-col sm:flex-row gap-2\">\r\n          <Button\r\n            onClick={addFilter}\r\n            variant=\"outline\"\r\n            size=\"sm\"\r\n            className=\"text-xs sm:text-sm\"\r\n          >\r\n            {getTranslations(\"filter.addFilter\", t)}\r\n          </Button>\r\n          <Button\r\n            onClick={resetFilters}\r\n            variant=\"outline\"\r\n            size=\"sm\"\r\n            className=\"text-xs sm:text-sm\"\r\n          >\r\n            {getTranslations(\"filter.resetFilters\", t)}\r\n          </Button>\r\n        </div>\r\n        <Button\r\n          onClick={() => applyFilters()}\r\n          size=\"sm\"\r\n          className=\"text-xs sm:text-sm\"\r\n        >\r\n          {getTranslations(\"filter.apply\", t)}\r\n        </Button>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":"AAgDY,cAqNE,YArNF;AAhDZ,SAAmC,gBAAgB;AACnD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,0BAA0B;AACnC,SAAS,eAAe,uBAAuB;AAC/C,SAAS,mBAAmB;AAE5B,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,KAAK;AAAA,EACL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAcP,SAAS,gBAAgB,UAA0B;AACjD,QAAM,QAAiD;AAAA,IACrD,QAAQ,oBAAC,SAAM,WAAU,yBAAwB;AAAA,IACjD,WAAW,oBAAC,YAAS,WAAU,yBAAwB;AAAA,IACvD,UAAU,oBAAC,cAAW,WAAU,yBAAwB;AAAA,IACxD,aAAa,oBAAC,WAAQ,WAAU,yBAAwB;AAAA,IACxD,YAAY,oBAAC,mBAAgB,WAAU,yBAAwB;AAAA,IAC/D,UAAU,oBAAC,cAAW,WAAU,yBAAwB;AAAA,IACxD,SAAS,oBAAC,UAAO,WAAU,yBAAwB;AAAA,IACnD,YAAY,oBAAC,aAAU,WAAU,yBAAwB;AAAA,IACzD,aAAa,oBAAC,gBAAa,WAAU,yBAAwB;AAAA,IAC7D,oBAAoB,oBAAC,gBAAa,WAAU,yBAAwB;AAAA,IACpE,UAAU,oBAAC,eAAY,WAAU,yBAAwB;AAAA,IACzD,iBAAiB,oBAAC,eAAY,WAAU,yBAAwB;AAAA,IAChE,SAAS,oBAAC,eAAY,WAAU,yBAAwB;AAAA,IACxD,SAAS,oBAAC,eAAY,WAAU,yBAAwB;AAAA,IACxD,QAAQ,oBAAC,aAAU,WAAU,yBAAwB;AAAA,IACrD,OAAO,oBAAC,iBAAc,WAAU,yBAAwB;AAAA,IACxD,QAAQ,oBAAC,QAAK,WAAU,yBAAwB;AAAA,IAChD,WAAW,oBAAC,SAAM,WAAU,yBAAwB;AAAA,EACtD;AACA,SAAO,MAAM,QAAQ,KAAK,oBAAC,cAAW,WAAU,yBAAwB;AAC1E;AAEO,SAAS,oBAA2B;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AACF,GAAoC;AAClC,QAAM,EAAE,EAAE,IAAI;AACd,QAAM,iBAAiB,MAAM,SAAS,EAAE;AACxC,QAAM,CAAC,YAAY,aAAa,IAAI,SAAsB,MAAM;AAC9D,QAAI,eAAe,SAAS,GAAG;AAC7B,aAAO,eAAe,IAAI,CAAC,aAAa,UAAU;AAEhD,cAAM,cAAc,YAAY;AAGhC,YAAI,cAAc;AAClB,YAAI,eAAe;AAEnB,YAAI,aAAa,UAAU,QAAQ,aAAa,UAAU,QAAW;AACnE,wBACE,OAAO,YAAY,UAAU,WACzB,KAAK,UAAU,YAAY,KAAK,IAChC,OAAO,YAAY,KAAK;AAAA,QAChC;AAEA,YAAI,aAAa,WAAW,QAAQ,aAAa,WAAW,QAAW;AACrE,yBACE,OAAO,YAAY,WAAW,WAC1B,KAAK,UAAU,YAAY,MAAM,IACjC,OAAO,YAAY,MAAM;AAAA,QACjC;AAEA,eAAO;AAAA,UACL,IAAI,UAAU,KAAK;AAAA,UACnB,UAAU,YAAY;AAAA,UACtB,UAAU,aAAa,YAAY;AAAA,UACnC,OAAO;AAAA,UACP,QAAQ;AAAA,QACV;AAAA,MACF,CAAC;AAAA,IACH;AACA,WAAO;AAAA,MACL;AAAA,QACE,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,UAAU;AAAA,QACV,OAAO;AAAA,QACP,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,EACF,CAAC;AACD,QAAM,oBAAoB,MACvB,cAAc,EACd,OAAO,CAAC,QAAQ,IAAI,aAAa,CAAC;AAErC,QAAM,YAAY,MAAM;AACtB,UAAM,QAAQ,UAAU,KAAK,IAAI,CAAC;AAClC,kBAAc;AAAA,MACZ,GAAG;AAAA,MACH,EAAE,IAAI,OAAO,UAAU,IAAI,UAAU,YAAY,OAAO,IAAI,QAAQ,GAAG;AAAA,IACzE,CAAC;AAAA,EACH;AAEA,QAAM,eAAe,CAAC,OAAe;AACnC,QAAI,WAAW,WAAW,GAAG;AAC3B,oBAAc;AAAA,QACZ;AAAA,UACE,IAAI;AAAA,UACJ,UAAU;AAAA,UACV,UAAU;AAAA,UACV,OAAO;AAAA,UACP,QAAQ;AAAA,QACV;AAAA,MACF,CAAC;AAAA,IACH,OAAO;AACL,oBAAc,WAAW,OAAO,CAAC,QAAQ,IAAI,OAAO,EAAE,CAAC;AAAA,IACzD;AAAA,EACF;AAEA,QAAM,eAAe,CAAC,IAAY,YAAgC;AAChE;AAAA,MACE,WAAW,IAAI,CAAC,QAAS,IAAI,OAAO,KAAK,EAAE,GAAG,KAAK,GAAG,QAAQ,IAAI,GAAI;AAAA,IACxE;AAAA,EACF;AAEA,QAAM,wBAAwB,CAAC,aAAuC;AACpE,QAAI,CAAC,SAAU,QAAO,CAAC,UAAU;AACjC,UAAM,SAAS,MAAM,UAAU,QAAQ;AACvC,QAAI,CAAC,OAAQ,QAAO,CAAC,UAAU;AAE/B,UAAM,OAAO,OAAO,UAAU;AAC9B,UAAM,iBAAiB,MAAM;AAC7B,UAAM,kBAAkB,MAAM;AAE9B,WACE,oBACC,iBACG,mBAAmB,eAAe,MAAM,eAAe,MAAM,IAC7D,CAAC,UAAU;AAAA,EAEnB;AAEA,QAAM,gBAAgB,CAAC,aAA6C;AAClE,QAAI,CAAC,SAAU,QAAO;AACtB,UAAM,SAAS,MAAM,UAAU,QAAQ;AACvC,QAAI,CAAC,OAAQ,QAAO;AACpB,WAAO,OAAO,UAAU;AAAA,EAC1B;AAEA,QAAM,qBAAqB,CAAC,UAAkB,aAAqB;AACjE,UAAM,YAAY,sBAAsB,QAAQ;AAChD,iBAAa,UAAU,EAAE,UAAU,UAAU,UAAU,CAAC,KAAK,WAAW,CAAC;AAAA,EAC3E;AAEA,QAAM,eAAe,CAAC,iBAA8B;AAClD,UAAM,mBAAmB;AACzB,eAAW,QAAQ,CAAC,QAAQ;AAC1B,YAAM,UAAU,IAAI,aAAa,aAAa,IAAI,aAAa;AAC/D,YAAM,eACJ,IAAI,aAAa,aAAa,IAAI,aAAa;AAEjD,UAAI,IAAI,UAAU;AAChB,cAAM,SAAS,MAAM,UAAU,IAAI,QAAQ;AAC3C,YAAI,QAAQ;AACV,cAAI,cAAc;AAChB,kBAAM,SAAuB;AAAA,cAC3B,IAAI,IAAI;AAAA,cACR,UAAU,IAAI;AAAA,cACd,OAAO;AAAA,YACT;AACA,mBAAO,eAAe,MAAM;AAAA,UAC9B,WAAW,WAAW,IAAI,SAAS,IAAI,QAAQ;AAC7C,kBAAM,SAAuB;AAAA,cAC3B,IAAI,IAAI;AAAA,cACR,UAAU,IAAI;AAAA,cACd,OAAO,IAAI;AAAA,cACX,QAAQ,IAAI;AAAA,YACd;AACA,mBAAO,eAAe,MAAM;AAAA,UAC9B,WAAW,CAAC,WAAW,IAAI,OAAO;AAChC,kBAAM,SAAuB;AAAA,cAC3B,IAAI,IAAI;AAAA,cACR,UAAU,IAAI;AAAA,cACd,OAAO,IAAI;AAAA,YACb;AACA,mBAAO,eAAe,MAAM;AAAA,UAC9B;AAAA,QACF;AAAA,MACF;AAAA,IACF,CAAC;AAED,mBAAe;AACf,YAAQ,KAAK;AAAA,EACf;AAEA,QAAM,eAAe,MAAM;AACzB,UAAM,mBAAmB;AACzB,kBAAc;AAAA,MACZ;AAAA,QACE,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,UAAU;AAAA,QACV,OAAO;AAAA,QACP,QAAQ;AAAA,MACV;AAAA,IACF,CAAC;AACD,YAAQ,KAAK;AAAA,EACf;AACA,SACE,qBAAC,SAAI,WAAU,aACb;AAAA,wBAAC,SAAI,WAAU,mCACZ,0BAAgB,gBAAgB,CAAC,GACpC;AAAA,IACA,oBAAC,SAAI,WAAU,0CACZ,qBAAW,IAAI,CAAC,KAAK,UAAU;AAC9B,YAAM,eAAe,sBAAsB,IAAI,QAAQ;AACvD,YAAM,aAAa,cAAc,IAAI,QAAQ;AAE7C,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UAGT;AAAA,sBAAU,IACT,oBAAC,SAAI,WAAU,qIACZ,0BAAgB,gBAAgB,CAAC,GACpC,IAEA,oBAAC,SAAI,WAAU,qIACZ,0BAAgB,cAAc,CAAC,GAClC;AAAA,YAEF;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO,IAAI;AAAA,gBACX,eAAe,CAAC,UAAU,mBAAmB,IAAI,IAAI,KAAK;AAAA,gBAE1D;AAAA,sCAAC,iBAAc,WAAU,wBACvB;AAAA,oBAAC;AAAA;AAAA,sBACC,aAAa,gBAAgB,uBAAuB,CAAC;AAAA;AAAA,kBACvD,GACF;AAAA,kBACA,oBAAC,iBACE,4BAAkB,IAAI,CAAC,QACtB,oBAAC,cAAwB,OAAO,IAAI,IACjC,wBAAc,KAAK,CAAC,KADN,IAAI,EAErB,CACD,GACH;AAAA;AAAA;AAAA,YACF;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO,IAAI;AAAA,gBACX,eAAe,CAAC,UACd,aAAa,IAAI,IAAI,EAAE,UAAU,MAAwB,CAAC;AAAA,gBAE5D,UAAU,CAAC,IAAI;AAAA,gBAEf;AAAA,sCAAC,iBAAc,WAAU,wBACvB,+BAAC,UAAK,WAAU,2BACd;AAAA,wCAAC,UAAK,WAAU,aACb,0BAAgB,IAAI,QAAQ,GAC/B;AAAA,oBACA,oBAAC,UAAK,WAAU,oBACb,0BAAgB,mBAAmB,IAAI,QAAQ,IAAI,CAAC,GACvD;AAAA,qBACF,GACF;AAAA,kBACA,oBAAC,iBACE,uBAAa,IAAI,CAAC,OACjB,oBAAC,cAAoB,OAAO,IAC1B,+BAAC,UAAK,WAAU,2BACb;AAAA,oCAAgB,EAAE;AAAA,oBACnB,oBAAC,UACE,0BAAgB,mBAAmB,EAAE,IAAI,CAAC,GAC7C;AAAA,qBACF,KANe,EAOjB,CACD,GACH;AAAA;AAAA;AAAA,YACF;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,UAAU,IAAI;AAAA,gBACd,OAAO,IAAI;AAAA,gBACX,QAAQ,IAAI;AAAA,gBACZ;AAAA,gBACA,eAAe,CAAC,UAAU,aAAa,IAAI,IAAI,EAAE,MAAM,CAAC;AAAA,gBACxD,gBAAgB,CAAC,WAAW,aAAa,IAAI,IAAI,EAAE,OAAO,CAAC;AAAA,gBAC3D,gBAAgB,CAAC,WAAW;AAC1B,wBAAM,CAAC,KAAK,GAAG,IAAI;AACnB,+BAAa,IAAI,IAAI;AAAA,oBACnB,OAAO,OAAO,GAAG;AAAA,oBACjB,QAAQ,OAAO,GAAG;AAAA,kBACpB,CAAC;AAAA,gBACH;AAAA,gBACA,SAAS,MAAM,aAAa,IAAI,IAAI,EAAE,OAAO,IAAI,QAAQ,GAAG,CAAC;AAAA,gBAC7D;AAAA,gBACA,SAAQ;AAAA;AAAA,YACV;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,SAAS,MAAM,aAAa,IAAI,EAAE;AAAA,gBAClC,WAAU;AAAA,gBAEV,8BAAC,UAAO,WAAU,6BAA4B;AAAA;AAAA,YAChD;AAAA;AAAA;AAAA,QAnFK,IAAI;AAAA,MAoFX;AAAA,IAEJ,CAAC,GACH;AAAA,IACA,qBAAC,SAAI,WAAU,+FACb;AAAA,2BAAC,SAAI,WAAU,mCACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,WAAU;AAAA,YAET,0BAAgB,oBAAoB,CAAC;AAAA;AAAA,QACxC;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,WAAU;AAAA,YAET,0BAAgB,uBAAuB,CAAC;AAAA;AAAA,QAC3C;AAAA,SACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,MAAM,aAAa;AAAA,UAC5B,MAAK;AAAA,UACL,WAAU;AAAA,UAET,0BAAgB,gBAAgB,CAAC;AAAA;AAAA,MACpC;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/custom/master-data-grid/components/filters/filter-input.js

@@ -0,0 +1,209 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { ArrowRight, X } from "lucide-react";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput
+} from "../../../../components/input-group";
+import { Input } from "../../../../components/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "../../../../components/select";
+import { Slider } from "../../../../components/slider";
+import { getTranslations } from "../../utils/translation-utils";
+function FilterInput({
+  operator,
+  value,
+  value2 = "",
+  columnMeta,
+  onValueChange,
+  onValue2Change,
+  onSliderChange,
+  onClear,
+  t,
+  variant = "popover"
+}) {
+  const schemaProperty = columnMeta?.schemaProperty;
+  const isRangeOperator = operator === "between" || operator === "inRange";
+  const needsNoInput = operator === "isEmpty" || operator === "isNotEmpty";
+  const isNumberType = schemaProperty?.type === "number" || schemaProperty?.type === "integer";
+  const isBooleanType = schemaProperty?.type === "boolean";
+  const showSlider = isRangeOperator && isNumberType;
+  const sliderMin = useMemo(
+    () => schemaProperty?.minimum ?? 0,
+    [schemaProperty?.minimum]
+  );
+  const sliderMax = useMemo(
+    () => schemaProperty?.maximum ?? 100,
+    [schemaProperty?.maximum]
+  );
+  const inputType = isNumberType ? "number" : "text";
+  if (needsNoInput) {
+    return null;
+  }
+  if (isBooleanType && !isRangeOperator) {
+    if (variant === "inline") {
+      return /* @__PURE__ */ jsxs(InputGroup, { children: [
+        /* @__PURE__ */ jsxs(Select, { value, onValueChange, children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { className: "h-9", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: getTranslations("filter.value", t) }) }),
+          /* @__PURE__ */ jsxs(SelectContent, { children: [
+            /* @__PURE__ */ jsx(SelectItem, { value: "true", children: getTranslations("filter.true", t) }),
+            /* @__PURE__ */ jsx(SelectItem, { value: "false", children: getTranslations("filter.false", t) })
+          ] })
+        ] }),
+        value && /* @__PURE__ */ jsx(
+          InputGroupButton,
+          {
+            size: "icon-xs",
+            onClick: onClear,
+            "aria-label": getTranslations("filter.clearFilter", t),
+            children: /* @__PURE__ */ jsx(X, {})
+          }
+        )
+      ] });
+    }
+    return /* @__PURE__ */ jsxs(Select, { value, onValueChange, children: [
+      /* @__PURE__ */ jsx(SelectTrigger, { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: getTranslations("filter.value", t) }) }),
+      /* @__PURE__ */ jsxs(SelectContent, { children: [
+        /* @__PURE__ */ jsx(SelectItem, { value: "true", children: getTranslations("filter.true", t) }),
+        /* @__PURE__ */ jsx(SelectItem, { value: "false", children: getTranslations("filter.false", t) })
+      ] })
+    ] });
+  }
+  if (isRangeOperator && onValue2Change) {
+    if (variant === "inline") {
+      return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs(InputGroup, { className: "rounded-none border-0 shadow-none", children: [
+          /* @__PURE__ */ jsx(
+            InputGroupInput,
+            {
+              value,
+              onChange: (e) => onValueChange(e.target.value),
+              placeholder: getTranslations("filter.min", t),
+              type: inputType,
+              className: "text-sm rounded-none"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground px-1", children: "&" }),
+          /* @__PURE__ */ jsx(
+            InputGroupInput,
+            {
+              value: value2,
+              onChange: (e) => onValue2Change(e.target.value),
+              placeholder: getTranslations("filter.max", t),
+              type: inputType,
+              className: "text-sm rounded-none"
+            }
+          ),
+          (value || value2) && /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsx(
+            InputGroupButton,
+            {
+              size: "icon-xs",
+              onClick: onClear,
+              "aria-label": getTranslations("filter.clearFilter", t),
+              children: /* @__PURE__ */ jsx(X, {})
+            }
+          ) })
+        ] }),
+        showSlider && onSliderChange && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(
+            Slider,
+            {
+              min: sliderMin,
+              max: sliderMax,
+              step: 1,
+              value: [
+                Number(value) || sliderMin,
+                Number(value2) || sliderMax
+              ],
+              onValueChange: onSliderChange,
+              className: "w-full"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-xs font-medium text-foreground", children: [
+            /* @__PURE__ */ jsx("span", { className: "px-2 py-0.5 rounded bg-muted", children: value || sliderMin }),
+            /* @__PURE__ */ jsx("span", { className: "px-2 py-0.5 rounded bg-muted", children: value2 || sliderMax })
+          ] })
+        ] })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs(InputGroup, { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ jsx(
+        InputGroupInput,
+        {
+          placeholder: getTranslations("filter.min", t),
+          value,
+          onChange: (e) => onValueChange(e.target.value),
+          type: inputType,
+          className: "flex-1 min-w-0 text-sm rounded-none"
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground px-0.5 sm:px-1", children: [
+        /* @__PURE__ */ jsx(ArrowRight, { className: "h-3 w-3 sm:hidden" }),
+        /* @__PURE__ */ jsx("span", { className: "hidden sm:inline text-xs", children: getTranslations("filter.to", t) })
+      ] }),
+      /* @__PURE__ */ jsx(
+        InputGroupInput,
+        {
+          placeholder: getTranslations("filter.max", t),
+          value: value2,
+          onChange: (e) => onValue2Change(e.target.value),
+          type: inputType,
+          className: "flex-1 min-w-0 text-sm rounded-none"
+        }
+      ),
+      (value || value2) && /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsx(
+        InputGroupButton,
+        {
+          size: "icon-xs",
+          onClick: onClear,
+          "aria-label": getTranslations("filter.clearFilter", t),
+          children: /* @__PURE__ */ jsx(X, {})
+        }
+      ) })
+    ] });
+  }
+  if (variant === "inline") {
+    return /* @__PURE__ */ jsxs(InputGroup, { className: "rounded-none", children: [
+      /* @__PURE__ */ jsx(
+        InputGroupInput,
+        {
+          value,
+          onChange: (e) => onValueChange(e.target.value),
+          placeholder: getTranslations("filter.value", t),
+          type: inputType,
+          className: "rounded-none"
+        }
+      ),
+      value && /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsx(
+        InputGroupButton,
+        {
+          size: "icon-xs",
+          onClick: onClear,
+          "aria-label": getTranslations("filter.clearFilter", t),
+          children: /* @__PURE__ */ jsx(X, {})
+        }
+      ) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      placeholder: getTranslations("filter.value", t),
+      value,
+      onChange: (e) => onValueChange(e.target.value),
+      type: inputType,
+      className: "flex-1 min-w-0 text-sm rounded-none"
+    }
+  );
+}
+export {
+  FilterInput
+};
+//# sourceMappingURL=filter-input.js.map

package/dist/custom/master-data-grid/components/filters/filter-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/custom/master-data-grid/components/filters/filter-input.tsx"],"sourcesContent":["import { useMemo } from \"react\";\r\nimport { ArrowRight, X } from \"lucide-react\";\r\nimport {\r\n  InputGroup,\r\n  InputGroupAddon,\r\n  InputGroupButton,\r\n  InputGroupInput,\r\n} from \"../../../../components/input-group\";\r\nimport { Input } from \"../../../../components/input\";\r\nimport {\r\n  Select,\r\n  SelectContent,\r\n  SelectItem,\r\n  SelectTrigger,\r\n  SelectValue,\r\n} from \"../../../../components/select\";\r\nimport { Slider } from \"../../../../components/slider\";\r\nimport type {\r\n  FilterOperator,\r\n  ColumnMeta,\r\n  MasterDataGridResources,\r\n} from \"../../types\";\r\nimport { getTranslations } from \"../../utils/translation-utils\";\r\n\r\ninterface FilterInputProps {\r\n  operator: FilterOperator;\r\n  value: string;\r\n  value2?: string;\r\n  columnMeta?: ColumnMeta;\r\n  onValueChange: (value: string) => void;\r\n  onValue2Change?: (value: string) => void;\r\n  onSliderChange?: (values: number[]) => void;\r\n  onClear: () => void;\r\n  t?: MasterDataGridResources;\r\n  variant?: \"inline\" | \"popover\";\r\n}\r\nexport function FilterInput({\r\n  operator,\r\n  value,\r\n  value2 = \"\",\r\n  columnMeta,\r\n  onValueChange,\r\n  onValue2Change,\r\n  onSliderChange,\r\n  onClear,\r\n  t,\r\n  variant = \"popover\",\r\n}: FilterInputProps) {\r\n  const schemaProperty = columnMeta?.schemaProperty;\r\n\r\n  const isRangeOperator = operator === \"between\" || operator === \"inRange\";\r\n  const needsNoInput = operator === \"isEmpty\" || operator === \"isNotEmpty\";\r\n  const isNumberType =\r\n    schemaProperty?.type === \"number\" || schemaProperty?.type === \"integer\";\r\n  const isBooleanType = schemaProperty?.type === \"boolean\";\r\n  const showSlider = isRangeOperator && isNumberType;\r\n\r\n  const sliderMin = useMemo(\r\n    () => schemaProperty?.minimum ?? 0,\r\n    [schemaProperty?.minimum]\r\n  );\r\n  const sliderMax = useMemo(\r\n    () => schemaProperty?.maximum ?? 100,\r\n    [schemaProperty?.maximum]\r\n  );\r\n\r\n  const inputType = isNumberType ? \"number\" : \"text\";\r\n  if (needsNoInput) {\r\n    return null;\r\n  }\r\n  if (isBooleanType && !isRangeOperator) {\r\n    if (variant === \"inline\") {\r\n      return (\r\n        <InputGroup>\r\n          <Select value={value} onValueChange={onValueChange}>\r\n            <SelectTrigger className=\"h-9\">\r\n              <SelectValue placeholder={getTranslations(\"filter.value\", t)} />\r\n            </SelectTrigger>\r\n            <SelectContent>\r\n              <SelectItem value=\"true\">\r\n                {getTranslations(\"filter.true\", t)}\r\n              </SelectItem>\r\n              <SelectItem value=\"false\">\r\n                {getTranslations(\"filter.false\", t)}\r\n              </SelectItem>\r\n            </SelectContent>\r\n          </Select>\r\n          {value && (\r\n            <InputGroupButton\r\n              size=\"icon-xs\"\r\n              onClick={onClear}\r\n              aria-label={getTranslations(\"filter.clearFilter\", t)}\r\n            >\r\n              <X />\r\n            </InputGroupButton>\r\n          )}\r\n        </InputGroup>\r\n      );\r\n    }\r\n\r\n    return (\r\n      <Select value={value} onValueChange={onValueChange}>\r\n        <SelectTrigger className=\"flex-1 min-w-0\">\r\n          <SelectValue placeholder={getTranslations(\"filter.value\", t)} />\r\n        </SelectTrigger>\r\n        <SelectContent>\r\n          <SelectItem value=\"true\">\r\n            {getTranslations(\"filter.true\", t)}\r\n          </SelectItem>\r\n          <SelectItem value=\"false\">\r\n            {getTranslations(\"filter.false\", t)}\r\n          </SelectItem>\r\n        </SelectContent>\r\n      </Select>\r\n    );\r\n  }\r\n  if (isRangeOperator && onValue2Change) {\r\n    if (variant === \"inline\") {\r\n      return (\r\n        <div className=\"space-y-3\">\r\n          <InputGroup className=\"rounded-none border-0 shadow-none\">\r\n            <InputGroupInput\r\n              value={value}\r\n              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\r\n                onValueChange(e.target.value)\r\n              }\r\n              placeholder={getTranslations(\"filter.min\", t)}\r\n              type={inputType}\r\n              className=\"text-sm rounded-none\"\r\n            />\r\n            <span className=\"text-xs text-muted-foreground px-1\">&</span>\r\n            <InputGroupInput\r\n              value={value2}\r\n              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\r\n                onValue2Change(e.target.value)\r\n              }\r\n              placeholder={getTranslations(\"filter.max\", t)}\r\n              type={inputType}\r\n              className=\"text-sm rounded-none\"\r\n            />\r\n            {(value || value2) && (\r\n              <InputGroupAddon align=\"inline-end\">\r\n                <InputGroupButton\r\n                  size=\"icon-xs\"\r\n                  onClick={onClear}\r\n                  aria-label={getTranslations(\"filter.clearFilter\", t)}\r\n                >\r\n                  <X />\r\n                </InputGroupButton>\r\n              </InputGroupAddon>\r\n            )}\r\n          </InputGroup>\r\n\r\n          {showSlider && onSliderChange && (\r\n            <div className=\"space-y-2\">\r\n              <Slider\r\n                min={sliderMin}\r\n                max={sliderMax}\r\n                step={1}\r\n                value={[\r\n                  Number(value) || sliderMin,\r\n                  Number(value2) || sliderMax,\r\n                ]}\r\n                onValueChange={onSliderChange}\r\n                className=\"w-full\"\r\n              />\r\n              <div className=\"flex justify-between text-xs font-medium text-foreground\">\r\n                <span className=\"px-2 py-0.5 rounded bg-muted\">\r\n                  {value || sliderMin}\r\n                </span>\r\n                <span className=\"px-2 py-0.5 rounded bg-muted\">\r\n                  {value2 || sliderMax}\r\n                </span>\r\n              </div>\r\n            </div>\r\n          )}\r\n        </div>\r\n      );\r\n    }\r\n    return (\r\n      <InputGroup className=\"flex-1 min-w-0\">\r\n        <InputGroupInput\r\n          placeholder={getTranslations(\"filter.min\", t)}\r\n          value={value}\r\n          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\r\n            onValueChange(e.target.value)\r\n          }\r\n          type={inputType}\r\n          className=\"flex-1 min-w-0 text-sm rounded-none\"\r\n        />\r\n        <span className=\"text-muted-foreground px-0.5 sm:px-1\">\r\n          <ArrowRight className=\"h-3 w-3 sm:hidden\" />\r\n          <span className=\"hidden sm:inline text-xs\">\r\n            {getTranslations(\"filter.to\", t)}\r\n          </span>\r\n        </span>\r\n        <InputGroupInput\r\n          placeholder={getTranslations(\"filter.max\", t)}\r\n          value={value2}\r\n          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\r\n            onValue2Change(e.target.value)\r\n          }\r\n          type={inputType}\r\n          className=\"flex-1 min-w-0 text-sm rounded-none\"\r\n        />\r\n        {(value || value2) && (\r\n          <InputGroupAddon align=\"inline-end\">\r\n            <InputGroupButton\r\n              size=\"icon-xs\"\r\n              onClick={onClear}\r\n              aria-label={getTranslations(\"filter.clearFilter\", t)}\r\n            >\r\n              <X />\r\n            </InputGroupButton>\r\n          </InputGroupAddon>\r\n        )}\r\n      </InputGroup>\r\n    );\r\n  }\r\n  if (variant === \"inline\") {\r\n    return (\r\n      <InputGroup className=\"rounded-none\">\r\n        <InputGroupInput\r\n          value={value}\r\n          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\r\n            onValueChange(e.target.value)\r\n          }\r\n          placeholder={getTranslations(\"filter.value\", t)}\r\n          type={inputType}\r\n          className=\"rounded-none\"\r\n        />\r\n        {value && (\r\n          <InputGroupAddon align=\"inline-end\">\r\n            <InputGroupButton\r\n              size=\"icon-xs\"\r\n              onClick={onClear}\r\n              aria-label={getTranslations(\"filter.clearFilter\", t)}\r\n            >\r\n              <X />\r\n            </InputGroupButton>\r\n          </InputGroupAddon>\r\n        )}\r\n      </InputGroup>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <Input\r\n      placeholder={getTranslations(\"filter.value\", t)}\r\n      value={value}\r\n      onChange={(e) => onValueChange(e.target.value)}\r\n      type={inputType}\r\n      className=\"flex-1 min-w-0 text-sm rounded-none\"\r\n    />\r\n  );\r\n}\r\n"],"mappings":"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","names":[]}

package/dist/custom/master-data-grid/components/filters/index.js

@@ -0,0 +1,9 @@
+import { FilterInput } from "./filter-input";
+import { InlineColumnFilter } from "./inline-column-filter";
+import { MultiFilterDialog } from "./multi-filter-dialog";
+export {
+  FilterInput,
+  InlineColumnFilter,
+  MultiFilterDialog
+};
+//# sourceMappingURL=index.js.map

package/dist/custom/master-data-grid/components/filters/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/custom/master-data-grid/components/filters/index.ts"],"sourcesContent":["export { FilterInput } from \"./filter-input\";\r\nexport { InlineColumnFilter } from \"./inline-column-filter\";\r\nexport { MultiFilterDialog } from \"./multi-filter-dialog\";\r\n"],"mappings":"AAAA,SAAS,mBAAmB;AAC5B,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;","names":[]}