Records View

This section describes the BfmPayablesRecordsViewComponent component.

The BfmPayablesRecordsViewComponent is the route-level container for the records area of the "Contas a Pagar" (payables) experience. It renders a tab shell with two tabs — Calendar and List — and owns the summary modal that opens from the list. The calendar loads immediately; the list is only rendered (and fetched) when its tab exists and is active.

Composition

The BfmPayablesRecordsViewComponent is composed of the following components:

• BfmBillsTabShellComponent (bfm-bills-tab-shell) - Tab shell hosting the Calendar and List tabs.
• BfmBillsCalendarComponent (bfm-bills-calendar) - Calendar tab, showing the per-day bill summaries.
• BfmBillsListComponent (bfm-bills-list) - List tab, showing the paginated, filterable bills table.

It also opens BfmBillsSummaryModalComponent when the list requests a bill summary.

Usage

You can import the BfmPayablesRecordsViewComponent directly in your route configuration.

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

const routes = [
  {
    path: 'payables',
    component: BfmPayablesRecordsViewComponent,
  },
];

But if you need more customization, you need to import it in your module and use it in your template.

payables-records-view.component.ts

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

@Component({
  standalone: true,
  selector: 'payables-records-view',
  imports: [BfmPayablesRecordsViewComponent],
  templateUrl: './payables-records-view.component.html',
})
export class PayablesRecordsViewComponent {}

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

payables-records-view.component.html

<bfm-payables-records-view/>

Inputs

The BfmPayablesRecordsViewComponent component has no inputs.

Events

The BfmPayablesRecordsViewComponent component has no events.

Configuration

This view reads three injection tokens. Provide them at your application root (or route level) to customize its behavior; when unset, the defaults are used.

BILLS_TAB_SHELL_TABS

Which tabs are shown, and in which order. Takes priority over the shell's [tabs] input; when not provided, it falls back to DEFAULT_BILLS_TABS (calendar, then list). The List tab is only rendered and fetched when it is configured here.

app.config.ts

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

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: BILLS_TAB_SHELL_TABS,
      useValue: [{ option: 'list' }, { option: 'calendar' }],
    },
  ],
};

BILLS_SUMMARY_MODAL_CONFIG

Labels and status-display config for the bill summary modal (every visible string comes from this config). Falls back to BILLS_SUMMARY_MODAL_DEFAULT_CONFIG (Celero's PT-BR copy) when unset.

app.config.ts

import { ApplicationConfig } from '@angular/core';
import {
  BILLS_SUMMARY_MODAL_CONFIG,
  BILLS_SUMMARY_MODAL_DEFAULT_CONFIG,
} from '@celerofinancas/ui-charges';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: BILLS_SUMMARY_MODAL_CONFIG,
      useValue: {
        ...BILLS_SUMMARY_MODAL_DEFAULT_CONFIG,
        title: 'Detalhes do boleto',
      },
    },
  ],
};

BILLS_ENABLE_INITIATE_PAYMENT

Feature flag for the "Iniciar pagamento" action on the list tab. It is a boolean that stays false unless the consuming application explicitly provides true. When enabled, the action appears in the list table; the actual behavior on click is decided by the host, which handles the list's initiatePayment output. When disabled, the action is hidden.

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,
    },
  ],
};

BILLS_DAY_DETAIL_PAYMENT_HANDLER

Handler for the "Iniciar pagamento" action on the calendar day detail modal. Unlike the list flag, this token is the action: it is a function that receives the clicked bill and defines what happens on click. The button is hidden when no handler is provided, so providing the function is what both enables and wires the action.

Type	Default
(bill: BillDayItem) => void	none (action hidden)

app.config.ts

import { ApplicationConfig } from '@angular/core';
import {
  BILLS_DAY_DETAIL_PAYMENT_HANDLER,
  BillDayItem,
} from '@celerofinancas/ui-charges';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: BILLS_DAY_DETAIL_PAYMENT_HANDLER,
      useValue: (bill: BillDayItem) => {
        // open your payment flow for the clicked bill
      },
    },
  ],
};