npm package: @guajiritos/general-autocomplete
Description: `Guajiritos General Autocomplete` es una librería para Angular que proporciona un componente con una funcionalidad de autocompletar elementos con peticiones a un API-REST.
Author: Guajiritos SRL
Latest version: 20.0.2

# Guajiritos General Autocomplete

`Guajiritos General Autocomplete` es una librería para Angular que proporciona un componente con una funcionalidad de
autocompletar elementos con peticiones a un API-REST.

## Instalación

Con `npm`

```sh
npm i @guajiritos/general-autocomplete --save
```

Con `yarn`

```sh
yarn add @guajiritos/general-autocomplete
```

Con `pnpm`

```sh
pnpm add @guajiritos/general-autocomplete
```

Importar la dependencia en tu proyecto.

```ts
import {GuajiritosGeneralAutocomplete} from '@guajiritos/general-autocomplete';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    GuajiritosGeneralAutocomplete,
    BrowserAnimationsModule
  ]
})
```

Importar la etiqueta en el componente correspondiente.

```html
...
<guajiritos-general-autocomplete></guajiritos-general-autocomplete>
...
```

## Entrada

Como elementos opcionales se pueden introducir los siguientes campos:

* `floatLabel` - Corresponde a un valor `FloatLabelType` de @angular/material. Por defecto toma valor `auto`

```html
...
<guajiritos-general-autocomplete [floatLabel]="'always'"></guajiritos-general-autocomplete>
...
```

* `bodyRequest` - Corresponde a un valor de la interfaz `ApiFormData`.
* `debounceTimeValue` - Valor numérico para el tiempo de espera entre peticiones con la entrada de datos de búsqueda. Por defecto 250 ms.
* `detailsTemplate` - Corresponde a un valor `TemplateRef`.
* `label` - Corresponde al texto a mostrar en el componente del `input`.
* `showLabel` - Muestra u oculta el label.
* `showSuffix` - Muestra u oculta el ícono del input.
* `suffixIcon` - Nombre del ícono de material usado como sufijo del input. Se muestra si `showSuffix` está activo y por defecto tiene valor `search`.

```html
...
<guajiritos-general-autocomplete [label]="Hoteles"></guajiritos-general-autocomplete>
...
```

* `placeholder` - Corresponde al texto del placeholder a mostrar en el componente del `input`.

```html
...
<guajiritos-general-autocomplete [placeholder]="Seleccione un hotel"></guajiritos-general-autocomplete>
...
```

* `field` - Un arreglo de valores correspondiente a la ruta del campo a mostrar en el componente de `autocomplete`. 

```html
...
<guajiritos-general-autocomplete [field]="['hotel', 'name']"></guajiritos-general-autocomplete>
...
```

* `filterString` - Corresponde a los posibles filtros que se pueden enviar en las peticiones.
* `displayOptions` - Corresponde a un valor de la interfaz `DisplayOption`.
* `withoutPaddingBottom` - Si elimina el relleno del componente.
* `valueId` - Si el valor a manejar es el `id` del objeto. Por defector toma valor `false`.

```html
...
<guajiritos-general-autocomplete [valueId]="true"></guajiritos-general-autocomplete>
...
```

* `order` - Parámetro para ordenar la respuesta de las peticiones.
* `removeProperties` - Eliminar propiedades de las peticiones.
* `url` - Ruta para las peticiones API.

```html
...
<guajiritos-general-autocomplete [url]="https://www.guajiritos.com/"></guajiritos-general-autocomplete>
...
```

* `clearData` - Limpia los valores del formulario reactivo.
* `initialValue` - Valor inicial del formulario reactivo.
* `restrictions` - Restricciones de las peticiones.
* `isRequired` - Es requerida la selección de algún valor. Por defecto toma valor `false`.

```html
...
<guajiritos-general-autocomplete [isRequired]="true"></guajiritos-general-autocomplete>
...
```

* `doFocus` - Activa la propiedad focus del elemento.

## Salida

Salida del componente

* `SelectElement` - Elemento seleccionado

### Entrada de formulario reactivo

Este componente permite la entrada de un formulario reactivo para el manejo de los valores.

```html
...
<guajiritos-general-autocomplete [formControl]="control"></guajiritos-general-autocomplete>
...
```

o

```html
...
<guajiritos-general-autocomplete formControlName="controlName"></guajiritos-general-autocomplete>
...
```