Popover Filter

This section describes the BfmPopoverFilterComponent component.

Usage

You need to import it in your module and use it in your template.

popover-filter.component.ts

import { BfmPopoverFilterComponent } from '@celerofinancas/ui-charges';

@Component({
  standalone: true,
  selector: 'popover-filter',
  imports: [BfmPopoverFilterComponent],
  templateUrl: './popover-filter.component.html',
})
export class PopoverFilterComponent {}

Then, in your template, you can use the component like this:

popover-filter.component.html

<bfm-popover-filter 
  [applyButtonText]="applyButtonText"
  [count]="count"
  [dateTypeOptions]="dateTypeOptions"
  (applyFilter)="handleApplyFilter($event)"
/>

Inputs

The BfmPopoverFilterComponent component has the following inputs:

applyButtonText

Apply button text - Default to: Filtrar

Type	Default
string	Filtrar

count

Counter for each charge type filter

Type	Default
{ parceled: number; no_repeat: number; recurring: number; }	{ parceled: 3, no_repeat: 2, recurring: 5 }

dateTypeOptions

Date type filter radio input options

Type	Default
DateTypeOptions	[]

[
  { key: 'creation', label: 'Data de criação' },
  { key: 'due', label: 'Data de vencimento' },
  { key: 'emission', label: 'Data de emissão' },
  { key: 'payment', label: 'Data de pagamento' },
]

Events

The BfmPopoverFilterComponent component has the following events:

applyFilter

Apply filter

Type
void