Cash Flow Header

This section describes the BfmCashFlowListHeaderComponent component.

Composition

The BfmCashFlowListHeaderComponent is composed of the following components:

• BfmSelectionHeaderComponent - Controls the selected items in the list.

Usage

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

cash-flow-list-header.component.ts

import { BfmCashFlowListHeaderComponent } from '@celerofinancas/ui-cash-flow';

@Component({
  standalone: true,
  selector: 'cash-flow-list-header',
  imports: [BfmCashFlowListHeaderComponent],
  templateUrl: './cash-flow-list-header.component.html',
})
export class CashFlowListHeaderComponent {}

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

cash-flow-list-header.component.html

<bfm-cash-flow-list-header />

Inputs

The BfmCashFlowListHeaderComponent component has no inputs.

Events

The BfmCashFlowListHeaderComponent component has no events.

Configuration

To customize the BfmCashFlowListHeaderComponent, you can inject the LIST_HEADER_CONFIG token in your module.

This token is used to provide custom values to the component. If is not provided, the default values will be used.

Properties

Key	Description	Default
showBlockedBalance	Whether to show the blocked balance.	false
showOpenFinanceModal	Whether to display the Open Finance modal.	false
accountCreationTooltip	Tooltip text for account creation.	'Adicionar conta bancária'
showMenuOptions	Whether to show menu options.	true
showDisabledAccountsTooltip	Whether to show tooltips for disabled accounts.	true
bankBalanceWhiteList	List of banks allowed for balance display.	[]
showAccountName	Controls the visibility of account names in the header.	true
enableTooltip	Enables tooltips for account items in the header.	true
showAccountNameTooltip	Enables tooltips for account name in the header.	false
showAccountNumberTooltip	Enables tooltips for account number in the header and account modal.	false
truncadeAccountNumber	When enabled, this option truncates the account number for display purposes .	false

The LIST_HEADER_CONFIG default values are:

{
  showBlockedBalance: false,
  showOpenFinanceModal: false,
  accountCreationTooltip: 'Adicionar conta bancária',
  showMenuOptions: true,
  showDisabledAccountsTooltip: true,
  bankBalanceWhiteList: [],
  showAccountName: true
  enableTooltip: true
  showAccountNameTooltip: false
  showAccountNumberTooltip: false
  truncadeAccountNumber: false
}

Example

To customize the BfmCashFlowListHeaderComponent, you can inject the LIST_HEADER_CONFIG token in your module.

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { LIST_HEADER_CONFIG } from '@celerofinancas/common-domain';
import { BANK } from '@celerofinancas/core-ts';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: LIST_HEADER_CONFIG,
      useValue: {
        showBlockedBalance: true,
        showOpenFinanceModal: true,
        accountCreationTooltip: 'Adicionar conta bancária',
        showMenuOptions: false,
        showDisabledAccountsTooltip: false,
        bankBalanceWhiteList: [BANK.yourEnterprise],
        showAccountName: true,
        enableTooltip: true,
        showAccountNameTooltip: true,
        showAccountNumberTooltip: true,
        truncadeAccountNumber: true,
      } 
    },
  ],
};