Bills List

This section describes the BfmBillsListComponent component.

The BfmBillsListComponent is the bills list container of the "Contas a Pagar" (payables) experience, rendered as the List tab of the Payables Records View. It delegates search, sort, pagination and filters state to the BfmPayablesBillsListService, feeds the presentational table, and owns the filters presentation (filters modal, active-filter pills and counter badge).

Composition

The BfmBillsListComponent is composed of the following components:

• BfmBillsListTableComponent (bfm-bills-list-table) - Presentational, paginated and sortable bills table.
• BfmBillsErrorStateComponent (bfm-bills-error-state) - Local error state, shown when a page load fails, with a retry action.
• CdsActiveFiltersPillsComponent (cds-active-filters-pills) - One pill per active filter category, with remove/clear actions.
• A search input and a "Filtros" button that opens BfmBillsFilterModalComponent.

Usage

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

bills-list.component.ts

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

@Component({
  standalone: true,
  selector: 'bills-list',
  imports: [BfmBillsListComponent],
  templateUrl: './bills-list.component.html',
})
export class BillsListComponent {}

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

bills-list.component.html

<bfm-bills-list
  (summaryClick)="handleSummary($event)"
  (initiatePayment)="handleInitiatePayment($event)"
/>

Inputs

The BfmBillsListComponent component has no inputs. Its data, search, sort, pagination and filters state are owned by the BfmPayablesBillsListService.

Events

The BfmBillsListComponent component has the following Events:

summaryClick

Re-emits the table's summary request so the host (the records view or a white-label custom layer) can open the summary modal or track the interaction.

Type
EventEmitter<BillListItem>

initiatePayment

Re-emits the table's payment initiation request. Only fires when BILLS_ENABLE_INITIATE_PAYMENT is provided as true.

Type
EventEmitter<BillListItem>

Configuration

This component is rendered inside the Payables Records View, which is what consumers use directly — the same token is listed there too.

BILLS_ENABLE_INITIATE_PAYMENT

Feature flag for the "Iniciar pagamento" action on the bills list. The action — and consequently the initiatePayment event — stays hidden unless the consuming application explicitly provides true. The same token gates the action on the calendar day modal.

Type	Default
boolean	false

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { BILLS_ENABLE_INITIATE_PAYMENT } from '@celerofinancas/ui-charges';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: BILLS_ENABLE_INITIATE_PAYMENT,
      useValue: true,
    },
  ],
};