# Install

```shell
npm i @mate/filter-panel
npm i @mate/filter-panel-addons
```

# Import

```javascript
import '@mate/filter-panel';
import '@mate/filter-panel-addons';
```

# Variants

## Micro

```html
<mate-filter-panel header-hidden>
    <vaadin-text-field label="Username"></vaadin-text-field>
    <vaadin-text-field label="First name"></vaadin-text-field>
    <vaadin-date-picker label="Date of birth"></vaadin-date-picker>
</mate-filter-panel>
```

## Minimal

```html
<mate-filter-panel>
    <span id="criteriaCount" slot="header-collapsed"></span>
    <vaadin-text-field label="Username"></vaadin-text-field>
    <vaadin-text-field label="First name"></vaadin-text-field>
    <vaadin-date-picker label="Date of birth"></vaadin-date-picker>
</mate-filter-panel>
```

```javascript
document.querySelector('#criteriaCount').textContent = 'Active search criteria 5';
```