# Filter Group Component

A flexible and responsive filter group component for Angular applications that provides search, multi-select filters, and date range filtering capabilities.

## Features

- **Search Input**: Debounced search with customizable placeholder
- **Multi-Select Filters**: Dropdown filters with search functionality
- **Date Range Picker**: Date range selection with clear functionality
- **URL State Management**: Automatically syncs filter state with URL parameters
- **Loading States**: Skeleton loading animations
- **Responsive Design**: Mobile-friendly layout
- **Clear Filters**: One-click filter clearing

## Installation

```bash
npm install @ngx-gilmapi/ui-angular-components-filter-group
```

## Usage

### Basic Setup

```typescript
import { GmpFilterGroupModule } from '@ngx-gilmapi/ui-angular-components-filter-group';
import { FilterRequest, IFilter } from '@ngx-gilmapi/ui-angular-components-filter-group';

@Component({
  // ...
  imports: [GmpFilterGroupModule]
})
export class MyComponent {
  filterRequest: FilterRequest = {
    filters: [
      {
        queryParam: 'status',
        name: 'Status',
        values: [
          { id: 1, name: 'Active' },
          { id: 2, name: 'Inactive' }
        ],
        selectedValue: ''
      }
    ],
    search: '',
    dateFrom: '',
    dateTo: ''
  };

  paginator = { page: 1, forPage: 10 };
}
```

### Template

```html
<gmp-filter-group
  [useDateFilters]="true"
  [searchEnabled]="true"
  searchPlaceholder="Search items..."
  [locale]="esLocale"
  [dateFormat]="'dd-mm-yyyy'"
  [(filterRequest)]="filterRequest"
  [(paginator)]="paginator">
</gmp-filter-group>
```

### Date Range Validation

The date range picker automatically validates that the end date is greater than or equal to the start date. If validation fails, an error message is displayed and the date range is not updated.

### Locale Configuration

To use a different language for the date picker, you can pass a locale object. For example, to use Spanish:

```typescript
import { registerLocaleData } from '@angular/common';
import localeEs from '@angular/common/locales/es';

registerLocaleData(localeEs);

// In your component
esLocale = {
  firstDayOfWeek: 1,
  dayNames: ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
  dayNamesShort: ['dom', 'lun', 'mar', 'mié', 'jue', 'vie', 'sáb'],
  dayNamesMin: ['D', 'L', 'M', 'X', 'J', 'V', 'S'],
  monthNames: ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre'],
  monthNamesShort: ['ene', 'feb', 'mar', 'abr', 'may', 'jun', 'jul', 'ago', 'sep', 'oct', 'nov', 'dic'],
  today: 'Hoy',
  clear: 'Limpiar'
};
```

## Input Properties

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `useDateFilters` | `boolean` | `false` | Enable date range picker |
| `searchEnabled` | `boolean` | `false` | Enable search input |
| `searchPlaceholder` | `string` | `'Buscar...'` | Placeholder text for search input |
| `dateRangePlaceholder` | `string` | `'Rango de fechas'` | Placeholder text for date range picker |
| `clearFiltersLabel` | `string` | `'Borrar Filtros'` | Label for clear filters button |
| `isLoading` | `boolean` | `false` | Loading state for filters |
| `onlySearchOnEnter` | `boolean` | `false` | Only trigger search on Enter key press |
| `locale` | `any` | `null` | Locale configuration for date picker (e.g., Spanish, English) |
| `dateFormat` | `string` | `'yy-mm-dd'` | Date format for the date picker (e.g., 'dd-mm-yyyy', 'dd/mm/yyyy') |

## Two-Way Binding

| Property | Type | Description |
|----------|------|-------------|
| `filterRequest` | `FilterRequest` | Filter configuration and state |
| `paginator` | `IPaginator` | Pagination state (optional) |

## Interfaces

### FilterRequest

```typescript
interface FilterRequest {
  filters: IFilter[];
  search?: string;
  dateFrom?: string;
  dateTo?: string;
}
```

### IFilter

```typescript
interface IFilter {
  queryParam: string;
  name: string;
  values: IFilterValue[];
  selectedValue?: string;
}
```

### IFilterValue

```typescript
interface IFilterValue {
  id: number | string;
  name: string;
}
```

## URL Integration

The component automatically manages URL parameters for all filters, search terms, and date ranges. This enables:

- Bookmarkable filtered states
- Browser back/forward navigation
- Shareable filtered URLs

## Styling

The component uses Tailwind CSS classes and includes custom SCSS for PrimeNG component styling. All styles are scoped to the component using `:host ::ng-deep`.

## Dependencies

- Angular 19+
- PrimeNG 19+
- RxJS 7+
- Tailwind CSS (for utility classes)