Documents

This section describes the BfmFinancialRecordDocumentsComponent component.

Composition

The BfmFinancialRecordDocumentsComponent is composed of the following components:

• BfmDocumentsBillComponent - Component for bill documents.
• BfmDocumentsInvoiceComponent - Component for invoice documents.
• BfmDocumentsDarfTaxComponent - Component for DARF tax documents.
• BfmDocumentsGpsTaxComponent - Component for GPS tax documents.

Usage

You can import the BfmFinancialRecordDocumentsComponent directly in your route configuration.

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

const routes = [
  {
    path: 'financial-record-documents',
    component: BfmFinancialRecordDocumentsComponent,
  },
];

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

financial-record-documents.component.ts

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

@Component({
  standalone: true,
  selector: 'financial-record-documents',
  imports: [BfmFinancialRecordDocumentsComponent],
  templateUrl: './financial-record-documents.component.html',
})
export class FinancialRecordDocumentsComponent {}

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

financial-record-documents.component.html

<bfm-financial-record-documents 
  [enableDocumentDownload]="true"
  [enableImageRotation]="true"
  [enableOCR]="true"
  (documentHasDeleted)="handleDocumentDeleted($event)"
  (documentHasSelected)="handleDocumentSelected($event)"
  (formChanges)="handleFormChanges($event)"
/>

Inputs

The BfmFinancialRecordDocumentsComponent component has the following inputs:

enableDocumentDownload

Whether document download is enabled.

Type	Default
boolean	true

enableImageRotation

Whether image rotation is enabled.

Type	Default
boolean	true

enableOCR

Whether OCR is enabled.

Type	Default
boolean	true

Events

The BfmFinancialRecordDocumentsComponent component has the following events:

documentHasDeleted

Emits the index of the document that was deleted.

Type
EventEmitter<number>

documentHasSelected

Emits the index of the document that was selected.

Type
EventEmitter<number>

formChanges

Form changes emitter.

Type
EventEmitter<any>

Configuration

TOKEN FINANCIAL_RECORD_DETAILS_DOCUMENTS_CONFIGS

To customize the BfmFinancialRecordDocumentsComponent, you can inject the FINANCIAL_RECORD_DETAILS_DOCUMENTS_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
positionAddDocument	Position of the "Add Document" button. Can be 'outside' or 'inside'.	'outside'
showDocumentDataForm	Whether to show the document data form.	true
showDocumentTitle	Whether to show the document title.	true
showReadOCRButton	Whether to show the "Read OCR" button.	true
showRowSeparator	Whether to show a separator between rows.	true
pdfAssetsFolder	Path to the folder containing PDF library assets.	'assets'

The FINANCIAL_RECORD_DETAILS_DOCUMENTS_CONFIGS default values are:

{
  positionAddDocument: 'outside',
  showDocumentDataForm: true,
  showDocumentTitle: true,
  showReadOCRButton: true,
  showRowSeparator: true,
  pdfAssetsFolder: 'assets',
}

Example

To customize the BfmFinancialRecordDocumentsComponent, you can inject the FINANCIAL_RECORD_DETAILS_DOCUMENTS_CONFIGS token in your module.

app.config.ts

import { ApplicationConfig } from '@angular/core';

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

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: FINANCIAL_RECORD_DETAILS_DOCUMENTS_CONFIGS,
      useValue: {
        positionAddDocument: 'inside',
        showDocumentDataForm: false,
        showDocumentTitle: false,
        showReadOCRButton: false,
        showRowSeparator: false,
        pdfAssetsFolder: 'https://my-cdn.com/assets',
      },
    },
  ],
};

TOKEN FINANCIAL_RECORD_DETAILS_DOCUMENTS_LIST_COMPONENT

To customize the BfmFinancialRecordDocumentsComponent, you can inject the FINANCIAL_RECORD_DETAILS_DOCUMENTS_LIST_COMPONENT token in your module. This token is used to provide a custom component for the document list. If it is not provided, the default component will be used.

Example

To customize the BfmFinancialRecordDocumentsComponent, you can inject the FINANCIAL_RECORD_DETAILS_DOCUMENTS_LIST_COMPONENT token in your module.

app.config.ts

import { ApplicationConfig } from '@angular/core';

import { FINANCIAL_RECORD_DETAILS_DOCUMENTS_LIST_COMPONENT } from '@celerofinancas/ui-cash-flow';
export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: FINANCIAL_RECORD_DETAILS_DOCUMENTS_LIST_COMPONENT,
      useValue: CustomDocumentsListComponent, // Replace with your custom component
    },
  ],
};

Document List Component Interface

The custom component should implement the DocumentsListComponent interface, which includes the following properties and methods:

import { DocumentsListComponent } from '@celerofinancas/design-system';

export class CustomDocumentsListComponent implements DocumentsListComponent {
  /**
   * Documents list
   */
  documents: Document[];
  /**
   * Loading controller
   */
  loading: boolean | null;
  /**
   * Whether deletion will be displayed conditionally
   */
  validateDeletion: boolean;
  /**
   * Whether the add button will be displayed conditionally
   */
  showAddButton: boolean;
  /**
   * Document input event emitter
   */
  newDocument: EventEmitter<any>;
  /**
   * Document selection event emitter
   */
  selection: EventEmitter<number>;
  /**
   * Document selection event emitter
   */
  deletion: EventEmitter<number>;
  /**
   * Selected index controller
   */
  selectedIndex$: BehaviorSubject<number>;
  /**
   * Controls the state of an input file dragged over upload section
   */
  fileHover$: BehaviorSubject<boolean>;

  /**
   * Get document thumbnail based on his documentType or mimeType
   *
   * @param document Document object
   *
   * @returns image file path
   */
  getDocumentThumbnail({ document_type, mime_type, status }: any): string {
    // Implementation to return the thumbnail path based on document type or mime type
  };
  /**
   * Handles new document input event
   *
   * @param document Document file input
   */
  onDocumentInput({ type, file }: any): void {
    // Implementation to handle new document input
  };
  /**
   * Handles document item selection event
   *
   * @param index List index
   */
  selectDocument(index: number): void {
    // Implementation to handle document selection
  }
  /**
   * Delete document
   *
   * @param index List index to be deleted
   */
  deleteDocument(index: number): void {
    // Implementation to handle document deletion
  }
}