Comparative Header

This section describes the BfmComparativeHeaderComponent component.

Usage

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

comparative-header.component.ts

import { BfmComparativeHeaderComponent } from '@celerofinancas/ui-reports';

@Component({
  standalone: true,
  selector: 'comparative-header',
  imports: [BfmComparativeHeaderComponent],
  templateUrl: './comparative-header.component.html',
})
export class ComparativeHeaderComponent {}

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

comparative-header.component.html

<bfm-comparative-header 
  [reportData]="reportData"
  [showActions]="true"
  [title]="'Comparative Report'"
  (downloadCSV)="handleDownloadCSV($event)"
  (toggleTransitoryAccounts)="handleToggleTransitoryAccounts($event)"
/>

Inputs

The BfmComparativeHeaderComponent component has the following inputs:

reportData

Report data to be used in the header

Type	Default
ComparativeReport	null

showActions

Show the actions

Type	Default
boolean	true

title

Title of the header

Type	Default
string	''

Events

The BfmComparativeHeaderComponent component has the following events:

downloadCSV

Download CSV event emitter

Type
EventEmitter<any>

toggleTransitoryAccounts

Toggle transitory accounts event emitter

Type
EventEmitter<any>

Configuration

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

COMPARATIVE_REPORT_HEADER_CONFIG

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

Properties

Key	Description	Default
showTitle	A boolean property that determines whether the title should be displayed.	true
textTooltipHideTransientMovements	Tooltip text explaining that when the filter is selected, transient movements are either shown or hidden in the report.	Ao selecionar, as movimentações transitórias como transferências entre contas, transações internas, resgates e aplicações automáticas e estornos de pagamentos e recebimentos, serão exibidas ou ocultadas no relatório conforme o estado do filtro.
showButtonDownloadCSV	A boolean property that determines whether the "Download CSV" button is displayed. Set to true to show the button.	true

The COMPARATIVE_REPORT_HEADER_CONFIG default values are:

{
    "showTitle": true,
    "textTooltipHideTransientMovements": "Ao selecionar, as movimentações transitórias como transferências entre contas, transações internas, resgates e aplicações automáticas e estornos de pagamentos e recebimentos, serão exibidas ou ocultadas no relatório conforme o estado do filtro.",
    "showButtonDownloadCSV": true,
}

Example

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { COMPARATIVE_REPORT_HEADER_CONFIG } from '@celerofinancas/ui-reports';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: COMPARATIVE_REPORT_HEADER_CONFIG,
      useValue: {
        showTitle: true,
        textTooltipHideTransientMovements: 'Texto que deseja ser apresentado no tooltip'
        showButtonDownloadCSV: false
      },
    },
  ],
};