Offered Services Autocomplete

This section describes the BfmOfferedServicesAutocompleteComponent component.

Usage

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

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

@Component({
  standalone: true,
  selector: 'offered-services-autocomplete',
  imports: [BfmOfferedServicesAutocompleteComponent],
  templateUrl: './offered-services-autocomplete.component.html',
  styleUrls: ['./offered-services-autocomplete.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class OfferedServicesAutocompleteComponent {}

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

<bfm-offered-services-autocomplete 
  [companyPk]="'companyPkValue'"
  [isActive]="true"
  [labelTemplate]="'[reference] - [name]'"
  [notFoundMessage]="'No matching service found.'"
  [placeholder]="'Search by Reference Code or Name...'"
  [value]="null"
  (registerNewService)="handleRegisterNewService($event)"
  (search)="handleSearch($event)"
  (selection)="handleSelection($event)"
/>

Inputs

The BfmOfferedServicesAutocompleteComponent component has the following inputs:

companyPk

Parent Company Primary Key.

Type	Default
string	''

isActive

is_active autocomplete query param.

Type	Default
boolean	true

labelTemplate

Label template for the autocomplete options.

Type	Default
string	'[reference] - [name]'

notFoundMessage

Not found message.

Type	Default
string	'No matching service found.'

placeholder

Placeholder text for the input.

Type	Default
string	'Search by Reference Code or Name...'

value

Autocomplete selected value.

Type	Default
OfferedServicesAutocompleteResponse	null

Events

The BfmOfferedServicesAutocompleteComponent component has the following events:

registerNewService

When custom option is selected.

Type
EventEmitter

search

Search string emitter that emits as the user types (keyup).

Type
EventEmitter

selection

Output key.

Type
EventEmitter