Charge Information

This section describes the BfmChargeInformationComponent component.

Composition

The BfmChargeInformationComponent is composed of the following components:

• BfmCardChargeSummaryComponent - Card with charge summary.
• BfmChargeRepetitionComponent - Repetition list of charges.

Usage

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

charge-information.component.ts

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

@Component({
  standalone: true,
  selector: 'charge-information',
  imports: [BfmChargeInformationComponent],
  templateUrl: './charge-information.component.html',
})
export class ChargeInformationComponent {}

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

charge-information.component.html

<bfm-charge-information />

Inputs

The BfmChargeInformationComponent component has no inputs.

Events

The BfmChargeInformationComponent component has no events.

Configuration

To customize the BfmChargeInformationComponent, you can inject the CHARGE_INFORMATION_CONFIGS 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
descriptionMaxLength	Returns max permitted description length	255
feeWarningText	Fee warning text	''
negotiableInstrumentOptions	Filter the negotiable instrument dropdown options based on the charge emitter's supported types	[ { key: 2, label: 'Duplicata Mercantil' }, { key: 4, label: 'Duplicata de Serviço' }, { key: 12, label: 'Nota Promissória' }, { key: 23, label: 'Nota Fiscal' }, { key: 17, label: 'Recibo' }, { key: 99, label: 'Outros' } ]

The CHARGE_INFORMATION_CONFIGS default values are:

{
  descriptionMaxLength: 255,
  feeWarningText: '',
  negotiableInstrumentOptions: [
    {
      key: 2,
      label: 'Duplicata Mercantil'
    },
    {
      key: 4,
      label: 'Duplicata de Serviço'
    },
    {
      key: 12,
      label: 'Nota Promissória'
    },
    {
      key: 23,
      label: 'Nota Fiscal'
    },
    {
      key: 17,
      label: 'Recibo'
    },
    {
      key: 99,
      label: 'Outros'
    }
  ]
}

Example

To customize the BfmChargeInformationComponent, you can inject the CHARGE_INFORMATION_CONFIGS token in your module.

app.config.ts

import { ApplicationConfig } from "@angular/core";
import { CHARGE_INFORMATION_CONFIGS } from "@celerofinancas/ui-charges";
import { ChargeInformation } from "./charge-information.ts";

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: CHARGE_INFORMATION_CONFIGS,
      useClass: ChargeInformation,
    },
  ],
};

charge-information.ts

import { NEGOTIABLE_INSTRUMENT_TYPE, negotiableInstrumentTypeLabels } from "@celerofinancas/core-ts";

export class ChargeInformation {
  const emitterAvailableTypes = [
    NEGOTIABLE_INSTRUMENT_TYPE.mercantileInvoiceDuplicate,
    NEGOTIABLE_INSTRUMENT_TYPE.serviceInvoiceDuplicate,
  ];

  public negotiableInstrumentOptions = emitterAvailableTypes.map((key) => ({
    key,
    label: key ? negotiableInstrumentTypeLabels.get(key) : '',
  }))

  public descriptionMaxLength = 80;

  public feeWarningText = 'Taxas podem ser aplicadas. Verifique o contrato com seu gerente.';
}