{
  "name": "Filter",
  "category": "Data Display",
  "subcategory": "Tables",
  "description": "Composable faceted filter builder with chips.",
  "thumbnail": "/preview-cards/filter.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo.DataGrid",
  "files": [
    "UI/Filter/FilterBar.razor",
    "UI/Filter/FilterPill.razor"
  ],
  "dependencies": [
    "badge"
  ],
  "packageDependencies": [
    "Blazicons.Lucide"
  ],
  "cssVars": [
    "--color-muted",
    "--radius"
  ],
  "api": {
    "name": "Filter",
    "category": "Data Display",
    "subcategory": "Tables",
    "description": "Composable faceted filter builder with chips.",
    "nugetPackage": "Lumeo.DataGrid",
    "files": [
      "UI/Filter/FilterBar.razor",
      "UI/Filter/FilterPill.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "ChildContent",
        "type": "RenderFragment?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Pills",
        "type": "RenderFragment?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Actions",
        "type": "RenderFragment?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Class",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "AdditionalAttributes",
        "type": "Dictionary<string, object>?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": true
      }
    ],
    "events": [],
    "enums": [],
    "records": [],
    "cssVars": [
      "--color-muted",
      "--radius"
    ],
    "examples": [
      {
        "title": "Filters with various field types",
        "code": "<FilterBar>\n    <ChildContent>\n        <Flex Gap=\"2\" Align=\"center\">\n            <DropdownMenu>\n                <DropdownMenuTrigger>\n                    <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Sm\">\n                        <DynamicIcon Name=\"SlidersHorizontal\" Class=\"h-3.5 w-3.5 mr-1.5\" />\n                        Add Filter\n                    </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                    <DropdownMenuItem OnClick=\"@(() => ToggleField(\"Status\"))\">Status</DropdownMenuItem>\n                    <DropdownMenuItem OnClick=\"@(() => ToggleField(\"Priority\"))\">Priority</DropdownMenuItem>\n                </DropdownMenuContent>\n            </DropdownMenu>\n\n            @if (_fields.Contains(\"Status\"))\n            {\n                <Select Value=\"@_status\" ValueChanged=\"v => _status = v\">\n                    <SelectTrigger Class=\"w-[160px] h-8 text-xs\">\n                        <Lumeo.Text As=\"span\">@(_status == \"\" ? \"Status\" : $\"Status: {_status}\")</Lumeo.Text>\n                    </SelectTrigger>\n                    <SelectContent>\n                        <SelectItem Value=\"Active\">Active</SelectItem>\n                    </SelectContent>\n                </Select>\n            }\n        </Flex>\n    </ChildContent>\n    <Pills>\n        @if (_status != \"\")\n        {\n            <FilterPill Label=\"Status\" Value=\"@_status\" OnDismiss=\"@(() => _status = \"\")\" />\n        }\n    </Pills>\n</FilterBar>"
      },
      {
        "title": "Filters with search input",
        "code": "<FilterBar>\n    <ChildContent>\n        <Flex Gap=\"2\" Align=\"center\">\n            <Input placeholder=\"Search...\" Value=\"@_search\"\n                   OnInput=\"e => _search = e.Value?.ToString() ?? \"\"\" Class=\"h-8 w-[220px] text-xs\" />\n            <Select Value=\"@_role\" ValueChanged=\"v => _role = v\">\n                <SelectTrigger Class=\"w-[150px] h-8 text-xs\">\n                    <Lumeo.Text As=\"span\">@(_role == \"\" ? \"Role\" : _role)</Lumeo.Text>\n                </SelectTrigger>\n                <SelectContent>\n                    <SelectItem Value=\"Admin\">Admin</SelectItem>\n                </SelectContent>\n            </Select>\n        </Flex>\n    </ChildContent>\n    <Pills>\n        @if (_search != \"\")\n        {\n            <FilterPill Label=\"Search\" Value=\"@_search\" OnDismiss=\"@(() => _search = \"\")\" />\n        }\n    </Pills>\n</FilterBar>"
      },
      {
        "title": "Filters with multi-select",
        "code": "<FilterBar>\n    <ChildContent>\n        <DropdownMenu>\n            <DropdownMenuTrigger>\n                <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Sm\">\n                    Category: @_categories.Count selected\n                </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n                @foreach (var cat in _allCategories)\n                {\n                    <Flex Gap=\"2\" Align=\"center\" Class=\"px-2 py-1.5\">\n                        <Checkbox Checked=\"@_categories.Contains(cat)\"\n                                  CheckedChanged=\"@(v => Toggle(cat, v))\" />\n                        <Lumeo.Text As=\"span\" Size=\"sm\">@cat</Lumeo.Text>\n                    </Flex>\n                }\n            </DropdownMenuContent>\n        </DropdownMenu>\n    </ChildContent>\n    <Pills>\n        @foreach (var cat in _categories)\n        {\n            <FilterPill Label=\"Category\" Value=\"@cat\"\n                        OnDismiss=\"@(() => _categories.Remove(cat))\" />\n        }\n    </Pills>\n</FilterBar>"
      },
      {
        "title": "Filters with data table",
        "code": "<FilterBar>\n    <ChildContent>\n        <Input placeholder=\"Search...\" />\n        <Select Value=\"@_status\" ValueChanged=\"v => _status = v\">...</Select>\n    </ChildContent>\n    <Pills>\n        @if (_status != \"\")\n        {\n            <FilterPill Label=\"Status\" Value=\"@_status\" OnDismiss=\"...\" />\n        }\n    </Pills>\n</FilterBar>\n\n<Table>\n    @foreach (var item in FilteredItems)\n    {\n        <TableRow>...</TableRow>\n    }\n</Table>"
      }
    ],
    "subComponents": {
      "FilterPill": {
        "componentName": "FilterPill",
        "fileName": "FilterPill.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "Label",
            "type": "string",
            "default": "\"\"",
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Value",
            "type": "string",
            "default": "\"\"",
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "OnDismiss",
            "type": "EventCallback",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Class",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "AdditionalAttributes",
            "type": "Dictionary<string, object>?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": true
          }
        ],
        "events": [
          {
            "name": "OnDismiss",
            "type": "EventCallback",
            "description": null
          }
        ],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      }
    },
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "filter",
  "docsUrl": "https://lumeo.nativ.sh/components/filter",
  "sourceUrl": [
    {
      "file": "UI/Filter/FilterBar.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo.DataGrid/UI/Filter/FilterBar.razor"
    },
    {
      "file": "UI/Filter/FilterPill.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo.DataGrid/UI/Filter/FilterPill.razor"
    }
  ],
  "source": [
    {
      "path": "UI/Filter/FilterBar.razor",
      "content": "@namespace Lumeo\n\n<div class=\"@($\"space-y-4 {Class}\".Trim())\" @attributes=\"AdditionalAttributes\">\n    @ChildContent\n    @if (Pills != null)\n    {\n        <div class=\"flex items-center gap-2 flex-wrap\">\n            @Pills\n        </div>\n    }\n    @if (Actions != null)\n    {\n        @Actions\n    }\n</div>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public RenderFragment? Pills { get; set; }\n    [Parameter] public RenderFragment? Actions { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n}\n"
    },
    {
      "path": "UI/Filter/FilterPill.razor",
      "content": "@namespace Lumeo\n\n<Badge Variant=\"Badge.BadgeVariant.Secondary\" Class=\"@($\"flex items-center gap-1 pl-2 pr-1 {Class}\".Trim())\" @attributes=\"AdditionalAttributes\">\n    @Label: @Value\n    <button type=\"button\" class=\"ml-1 rounded-full hover:bg-muted p-0.5\" aria-label=\"@($\"Remove {Label} filter\")\" @onclick=\"OnDismiss\">\n        <Blazicon Svg=\"Lucide.X\" class=\"h-3 w-3\" />\n    </button>\n</Badge>\n\n@code {\n    [Parameter] public string Label { get; set; } = \"\";\n    [Parameter] public string Value { get; set; } = \"\";\n    [Parameter] public EventCallback OnDismiss { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n}\n"
    }
  ],
  "slots": [
    {
      "name": "ChildContent",
      "owner": "Filter",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "Pills",
      "owner": "Filter",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "Actions",
      "owner": "Filter",
      "type": "RenderFragment?",
      "description": null
    }
  ],
  "serviceDependencies": [],
  "cascadingDependencies": [],
  "relatedComponents": [
    {
      "name": "FilterBar",
      "reason": "sub-component"
    },
    {
      "name": "FilterPill",
      "reason": "sub-component"
    },
    {
      "name": "Badge",
      "reason": "used internally"
    }
  ],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Tests/Components/DataGrid/DataGridFilterExtensibilityTests.cs",
    "tests/Lumeo.Tests/Components/Filter/FilterBarTests.cs",
    "tests/Lumeo.Tests/Components/Filter/FilterPillTests.cs",
    "tests/Lumeo.Tests/Contract/ComponentContractTests.cs"
  ],
  "mdSummary": "# Filter\n\nComposable faceted filter builder with chips.\n\n**Package:** `Lumeo.DataGrid` · **Category:** Data Display/Tables\n**Docs:** https://lumeo.nativ.sh/components/filter\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| Filter | ChildContent | `RenderFragment?` | `` |  |\n| Filter | Pills | `RenderFragment?` | `` |  |\n| Filter | Actions | `RenderFragment?` | `` |  |\n| Filter | Class | `string?` | `` |  |\n| Filter | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| FilterPill | Label | `string` | `\"\"` |  |\n| FilterPill | Value | `string` | `\"\"` |  |\n| FilterPill | OnDismiss | `EventCallback` | `` |  |\n| FilterPill | Class | `string?` | `` |  |\n| FilterPill | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- `ChildContent` (Filter) — RenderFragment slot\n- `Pills` (Filter) — RenderFragment slot\n- `Actions` (Filter) — RenderFragment slot\n\n## Events\n- (none)\n\n## Sub-components\n- `FilterBar`, `FilterPill`\n\n## Cascading values it expects\n- (none)\n\n## Services it injects\n- (none)\n\n## Keyboard\n—\n\n## Example\n```razor\n<Filter />\n```\n\n## CSS variables\n`--color-muted`, `--radius`\n\n## Files\n- `UI/Filter/FilterBar.razor`\n- `UI/Filter/FilterPill.razor`\n"
}