Popover Filter

This section describes the BfmPaymentPopoverFilterComponent component.

Usage

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

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

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

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

<bfm-payment-popover-filter 
  [currentTab]="currentTab"
  [dateTypeFilterOptions]="dateTypeFilterOptions"
  [filterButtonText]="filterButtonText"
  [filters]="filters"
  [paymentMethodFilterOptions]="paymentMethodFilterOptions"
  [showDateRangeFilter]="showDateRangeFilter"
  [showPaymentMethodsFilter]="showPaymentMethodsFilter"
  [showValueRangeFilter]="showValueRangeFilter"
  (filterChanges)="handleFilterChanges($event)"
/>

Inputs

The BfmPaymentPopoverFilterComponent component has the following inputs:

currentTab

Current tab

Type	Default
PAYMENT_AUTHORIZATION	PAYMENT_AUTHORIZATION.waiting

dateTypeFilterOptions

Date type form options

Type	Default
IDateTypeFilterOptions[]	[]

Example of dateTypeFilterOptions:

[
  { value: 'due', label: 'Vencimento' },
  { value: 'scheduled_date', label: 'Agendar para' },
  { value: 'payment', label: 'Pagamento' }
]

filterButtonText

Filter button text - Default to: Filtrar

Type	Default
string	Filtrar

filters

Currently applied filters - Default to: {}

Type	Default
any	{}

paymentMethodFilterOptions

Payment method filter options

Type	Default
IPaymentMethodFilterOptions[]	[]

Example of paymentMethodFilterOptions:

[
  { control: PAYMENTS_METHODS.bill, label: 'Boleto' },
  { control: PAYMENTS_METHODS.ted, label: 'TED' },
  { control: PAYMENTS_METHODS.billTax, label: 'Boleto de tributo' },
  { control: PAYMENTS_METHODS.bankTransfer, label: 'TEV' },
  { control: PAYMENTS_METHODS.dda, label: 'DDA' },
  { control: PAYMENTS_METHODS.pix, label: 'Pix' },
]

showDateRangeFilter

Show date range filter - Default to: true

Type	Default
boolean	true

showPaymentMethodsFilter

Show payment methods filter - Default to: true

Type	Default
boolean	true

showValueRangeFilter

Show value range filter - Default to: true

Type	Default
boolean	true

Events

The BfmPaymentPopoverFilterComponent component has the following Events:

filterChanges

Emits on new filters applied

Type
EventEmitter