List Header Component

The List Header component provides a header interface for managing bank account lists with integration capabilities for Belvo bank conciliation. This component handles account selection, filtering, and provides access to banking integration modals.

ListHeaderComponent

This section describes the ListHeaderComponent component.

Composition

The ListHeaderComponent is composed of the following components:

• BfmAccountTotalComponent - Displays account totals and summary information.
• BfmListAccountsComponent - Renders the list of bank accounts.
• Accounts Modal - Lists every linked bank account; opened by the arrow at the end of the accounts list.

Usage

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

accounts.component.ts

import { ListHeaderComponent } from '@celerofinancas/common-domain';

@Component({
  selector: 'accounts-page',
  standalone: true,
  imports: [ListHeaderComponent],
  templateUrl: './accounts.component.html',
})
export class AccountsComponent {}

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

accounts.component.html

<list-header 
  [filterBanks]="bankFilters"
  [useCompanyService]="true"
  [viewOnly]="false"
  [disableSelection]="false"
  [isScrolled]="scrolled"
  [accountsLimit]="5"
  (accountSelected)="onAccountSelected($event)"
/>

Inputs

The ListHeaderComponent component has the following inputs:

initialLoad

Controls whether the component should perform an initial data load when it is initialized.

Type	Default
boolean	false

filterBanks

Only shows banks where bank_id matches given array

Type	Default
any[]	undefined

useCompanyService

Whether will use company service to handle changes

Type	Default
boolean	true

viewOnly

Whether to allow editing accounts data

Type	Default
boolean	false

disableSelection

Whether the selection of checking accounts is disabled

Type	Default
boolean	false

isScrolled

Indicates if the header is in scrolled state (applies CSS class)

Type	Default
boolean	false

isShrink

Indicates if the header should be displayed in a shrunken (compact) state.

Type	Default
boolean	false

accountsLimit

Number of accounts to display. Default show all

Type	Default
number	0

Events

The ListHeaderComponent component has the following Events:

accountSelected

Outputs selected account primary key when an account is selected

Type
EventEmitter<any>

Configuration

To customize the ListHeaderComponent, you can inject configuration tokens in your module.

LIST_HEADER_CONFIG

This token is used to provide custom configuration for the list header behavior. If not provided, the default values will be used.

Properties

Key	Description	Default
showBlockedBalance	Controls the visibility of blocked balance information.	false
showOpenFinanceModal	Controls the visibility of the open finance modal trigger.	false
accountCreationTooltip	Customizes the tooltip text for account creation.	Adicionar conta bancária
showMenuOptions	Controls the visibility of menu options.	true
showDisabledAccountsTooltip	Controls the visibility of disabled accounts tooltip.	true
bankBalanceWhiteList	Array of bank IDs that are whitelisted 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

Example

app.config.ts

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

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: LIST_HEADER_CONFIG,
      useValue: {
        showBlockedBalance: true,
        showOpenFinanceModal: false,
        accountCreationTooltip: 'Criar nova conta',
        showMenuOptions: true,
        showDisabledAccountsTooltip: false,
        bankBalanceWhiteList: ['001', '237', '341'],
        showAccountName: true,
        enableTooltip: true,
        showAccountNameTooltip: true,
        showAccountNumberTooltip: true,
        truncadeAccountNumber: true,
      },
    },
  ],
};

LIST_HEADER_ICONS_CONFIG

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

Properties

Key	Description	Default
showEyeIcon	Controls the visibility of the eye icon for visibility toggle.	true
showConciliationError	Controls the visibility of conciliation error indicators.	true
showSeparator	Controls the visibility of separators between icons.	true
maxAccounts	Optional maximum number of accounts to display.
textTitleTotalAccounts	Represents the title text displayed for the total accounts section in the list header component.	Saldo total
showInfoIcon	Determines whether to display the information icon in the header.	true
showEditIcon	Determines whether the edit icon is displayed in the list header.	true
showBloquedBalance	Indicates if the blocked balance should be shown in the header.	false
textModalListAccounts	Text to display in the modal for listing accounts.
textTooltipTotalAccounts	Tooltip text for the total accounts indicator.
disabledClickAccount	Disables click actions on account items in the list header.	false

Example

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { LIST_HEADER_ICONS_CONFIG } from '@celerofinancas/common-domain';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: LIST_HEADER_ICONS_CONFIG,
      useValue: {
        showEyeIcon: false,
        showConciliationError: false,
        showSeparator: false,
        textTitleTotalAccounts: 'Saldo Total',
        maxAccounts: 5,
        showInfoIcon: false,
        showEditIcon: false,
        showBloquedBalance: true,
        textModalListAccounts: 'Contas Correntes',
        textTooltipTotalAccounts: 'Saldo disponível consolidado',
        disabledClickAccount: true,
      },
    },
  ],
};

ACCOUNT_MODAL_CONFIG_TOKEN

This token configures the accounts modal opened by the arrow at the end of the accounts list (texts, columns, totals, icons, slots and the "Conectar mais contas" action). See the Accounts Modal documentation.