Accounts Modal

The Accounts Modal lists every linked bank account of the active company ("Contas bancárias vinculadas"). It shows the balance totals, lets the user search and sort the accounts, rename them, choose which ones are shown on the home header and connect more accounts. When the accounts list fails to load, it shows an error state with a retry button.

The modal has a single template. White labels customize it only through the ACCOUNT_MODAL_CONFIG_TOKEN and the style API. Without configuration it renders the default layout.

AccountsModalComponent

This section describes the AccountsModalComponent component (bfm-accounts-modal).

Composition

The AccountsModalComponent is composed of the following components:

AccountItemModalComponent - Renders each cell of an account row.
AccountsModalConnectButtonComponent - "Conectar mais contas" button.
AccountsModalErrorStateComponent - Error state shown when the list fails to load.
AccountsModalLastUpdateNoteComponent - Note about the last update date, below the table.
AccountsModalSearchButtonComponent - "Buscar" button, next to the search input.

Usage

The modal is opened by the List Header when the user clicks the arrow at the end of the accounts list, so you do not open it directly. To customize it, provide the ACCOUNT_MODAL_CONFIG_TOKEN:

info

Modals are not components. They must be used with the ModalService to be opened.

To a better understanding, check the Modals documentation.

app.config.ts
import { ApplicationConfig } from '@angular/core';
import { ACCOUNT_MODAL_CONFIG_TOKEN } from '@celerofinancas/common-domain';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: ACCOUNT_MODAL_CONFIG_TOKEN,
      useValue: {
        partnerName: 'Celero',
        onclick: () => window.open('https://example.com/open-finance', '_blank'),
      },
    },
  ],
};

Inputs

The AccountsModalComponent modalRef has no inputs. Everything is configured through the ACCOUNT_MODAL_CONFIG_TOKEN.

Events

The AccountsModalComponent modalRef has no events. The "Conectar mais contas" action is the onclick of the ACCOUNT_MODAL_CONFIG_TOKEN.

Configuration

`ACCOUNT_MODAL_CONFIG_TOKEN`

This token provides the AccountModalConfig of the modal. Every property is optional; the ones not provided keep the default value.

Properties

Key	Description	Default
`onclick`	Action of the "Conectar mais contas" button.	`() => {}`
`additionalFilters`	Extra filters merged into every accounts list request.	`[]`
`partnerName`	Partner name used by the default subtitle and scope tooltip (`[PartnerName] e Open Finance`). When empty, only "Open Finance" is shown.	`''`
`copy`	Texts of the modal. Merged field by field with the defaults, also inside `totals`, `balanceTooltips`, `headers` and `error`. See copy.	Default texts
`columns`	Table columns. Replaces the default list. See columns.	7 default columns
`totals`	Totals shown above the table. Replaces the default list. Available: `available`, `blocked`, `automaticInvestment`.	`['available', 'blocked']`
`icons`	Icon font classes, merged field by field. See icons.	See icons
`loading`	First page loading placeholder: `{ count, height }`.	`{ count: 5, height: '64px' }`
`slots`	Components rendered in each region of the modal. Each listed slot replaces its default. See slots.	See slots

`copy`

Key	Description	Default
`title`	Modal title.	`Contas bancárias vinculadas`
`subtitle`	`(partnerName, count) => string`	`[PartnerName] e Open Finance (N contas)`
`scopeTooltip`	`(partnerName) => string`, tooltip of the subtitle.	Explains which accounts are shown
`searchPlaceholder`	Placeholder of the search input.	`Pesquise por nº da conta ou banco`
`searchButton`	Text of the "Buscar" button and label of the search icon.	`Buscar`
`connectAccounts`	Text of the connect button.	`Conectar mais contas`
`lastUpdateNote`	Note below the table and tooltip of the "Última atualização" column.	Last update explanation
`totals`	Label of each total (`available`, `blocked`, `automaticInvestment`).	`Saldo disponível`, `Saldo bloqueado`, `Saldo com aplicação automática`
`balanceTooltips`	Tooltip of each total. An empty string hides the info icon of that total.	One tooltip per total
`headers`	Header of each column, by column name.	See columns
`error`	`title`, `description` and `retry` texts of the error state.	`Algo deu errado`, `Não foi possível carregar as informações agora. Tente de novo em instantes.`, `Atualizar página`

`columns`

Each column is { name, valueRef, align?, orderByfilter? }. valueRef is the field sent as order_by when orderByfilter is true.

`name`	Default header	In the default list
`bank_id`	`Banco`	Yes
`agency_account`	`Agência Conta`	Yes
`name`	`Apelido`	Yes
`available_balance`	`Saldo disponível`	Yes
`blocked_balance`	`Saldo bloqueado`	Yes
`last_statement_at`	`Última atualização`	Yes
`to_show`	`Mostrar no início`	Yes
`agency`	`Ag`	No
`account`	`Conta`	No
`automatic_investment_balance`	`Saldo aplicado automaticamente`	No

`icons`

The icons are classes of the Design System icon font, so each white label changes the glyphs by swapping the icon font (--cds-icon-font-family) in its custom layer. See Using custom icons. Extra classes are allowed (e.g. 'c-icon-medium cds-icon-search').

Key	Description	Default
`info`	Info icon of the tooltips.	`cds-icon-exclamation-circle`
`locked`	Icon of the blocked balance total.	`cds-icon-padlock-stroke`
`search`	Icon inside the search input.	`cds-icon-search`
`retry`	Icon of the "Atualizar página" button.	`cds-icon-refresh`

`slots`

Slots are fixed regions of the modal. Each one renders, in order, the components listed for it. A slot with an empty list renders nothing, and the footer is hidden when both footer slots are empty.

Slot	Region	Default
`headerEnd`	Right of the title	`[]`
`searchEnd`	After the search input	`[]`
`afterTable`	Below the table	`[AccountsModalLastUpdateNoteComponent]`
`footerStart`	Left side of the footer	`[AccountsModalConnectButtonComponent]`
`footerEnd`	Right side of the footer	`[]`
`error`	Body shown when the list fails to load	`[AccountsModalErrorStateComponent]`

Slot components can be the ones exported by the library or your own: they inject the AccountsModalContext to read the resolved configuration (config) and to call the modal (search(), retry()).

Example

A white label that keeps the connect button on the header, adds the "Buscar" button, shows separate agency and account columns and hides the last update note:

app.config.ts
import { ApplicationConfig } from '@angular/core';
import {
  ACCOUNT_MODAL_CONFIG_TOKEN,
  AccountsModalConnectButtonComponent,
  AccountsModalSearchButtonComponent,
} from '@celerofinancas/common-domain';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: ACCOUNT_MODAL_CONFIG_TOKEN,
      useValue: {
        partnerName: 'Partner',
        onclick: () => window.open('https://example.com/open-finance', '_blank'),
        additionalFilters: [{ priority_bank_id: '104' }],
        copy: {
          title: 'Contas vinculadas | Partner e Open Finance',
          subtitle: (_partnerName, count) => `(${count} Contas)`,
          balanceTooltips: { available: '', blocked: '' },
          headers: { to_show: 'Mostrar no cabeçalho' },
        },
        columns: [
          { name: 'bank_id', align: 'center', orderByfilter: false, valueRef: 'bank_id' },
          { name: 'agency', align: 'left', orderByfilter: false, valueRef: 'agency' },
          { name: 'account', align: 'left', orderByfilter: true, valueRef: 'bank_account' },
          { name: 'name', align: 'left', orderByfilter: false, valueRef: 'name' },
          { name: 'available_balance', align: 'right', orderByfilter: false, valueRef: 'bank_account_current_balance' },
          { name: 'blocked_balance', align: 'right', orderByfilter: false, valueRef: 'blocked_balance' },
          { name: 'to_show', align: 'center', orderByfilter: false, valueRef: 'to_show' },
        ],
        loading: { count: 3, height: '135px' },
        slots: {
          headerEnd: [AccountsModalConnectButtonComponent],
          searchEnd: [AccountsModalSearchButtonComponent],
          afterTable: [],
          footerStart: [],
        },
      },
    },
  ],
};

Style API

The classes and custom properties below are a public contract: renaming them is a breaking change. Use them in your custom layer to adapt the layout.

Classes

Class	Element
`.accounts-modal-header` (`__text`, `__title`, `__subtitle`)	Header with title and subtitle
`.accounts-modal-slot--{header-end\|search-end\|after-table\|footer-start\|footer-end\|error}`	Slot regions
`.accounts-totals`, `.accounts-total` (`__label`, `__value`)	Balance totals
`.accounts-search-row`, `.accounts-search` (`__input`, `__icon`)	Search
`.accounts-table` (`__row`, `__row--body`, `__header`, `__cell`)	Accounts table
`.accounts-modal-footer`	Footer
`.accounts-modal-error`	Error state container
`.accounts-modal-connect-button`, `.accounts-modal-search-button`, `.accounts-last-update-note`	Slot components

Custom properties

Set them on the bfm-accounts-modal element. The modal only reads them with fallbacks, so the values below apply when they are not set.

Property	Description	Default
`--accounts-modal-width`	Modal width.	`1020px`
`--accounts-modal-table-height`	Table height; the header stays fixed while the rows scroll.	`398px`
`--accounts-modal-columns`	Grid columns of the table. All rows share them (subgrid).	`63px 97px minmax(160px, 1fr) minmax(115px, max-content) minmax(115px, max-content) 105px 85px`
`--accounts-modal-header-bg`	Background of the table header.	`var(--cds-background-accent)`
`--accounts-modal-row-bg-even`	Background of the even rows (striped table).	`transparent`
`--accounts-modal-locked-color`	Color of the blocked balance icon.	`#ffa608`

modal-base.component.scss
:host ::ng-deep bfm-accounts-modal {
  --accounts-modal-width       : 1280px;
  --accounts-modal-columns     : 1fr 1fr 2fr 2fr 2fr 2fr 2fr;
  --accounts-modal-row-bg-even : var(--cds-background-accent);
}

AccountItemModalComponent

Renders one cell of an account row (bfm-account-item-modal), according to the column name. It handles the nickname edition and the "Mostrar no início" toggle. It is used internally by the AccountsModalComponent.

AccountsModalConnectButtonComponent

"Conectar mais contas" button (bfm-accounts-modal-connect-button). Runs the onclick of the configuration. Default component of the footerStart slot.

AccountsModalErrorStateComponent

Error state (bfm-accounts-modal-error-state) with an illustration, the copy.error texts and the "Atualizar página" button, which reloads the list with the last applied filters. Default component of the error slot.

AccountsModalLastUpdateNoteComponent

Note below the table (bfm-accounts-modal-last-update-note) with the copy.lastUpdateNote text. Default component of the afterTable slot.

AccountsModalSearchButtonComponent

"Buscar" button (bfm-accounts-modal-search-button). Searches with the current input value. It is not in any slot by default; add it to the searchEnd slot when needed.

Accounts Modal

AccountsModalComponent

Composition​

Usage​

Inputs​

Events​

Configuration​

ACCOUNT_MODAL_CONFIG_TOKEN​

Properties​

copy​

columns​

icons​

slots​

Example​

Style API​

Classes​

Custom properties​