@guajiritos/general-autocomplete 0.1.5 → 0.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +146 -145
- package/esm2022/lib/guachos-general-autocomplete.component.mjs +34 -28
- package/esm2022/public-api.mjs +1 -1
- package/esm2022/utils/interfaces/interfaces.mjs +1 -1
- package/esm2022/utils/pipes/duration.pipe.mjs +4 -4
- package/esm2022/utils/pipes/humanize-duration.pipe.mjs +3 -3
- package/esm2022/utils/pipes/i18n-field.pipe.mjs +3 -3
- package/esm2022/utils/pipes/ida-return.pipe.mjs +4 -4
- package/esm2022/utils/pipes/pipes.module.mjs +5 -5
- package/esm2022/utils/pipes/resolve-property-path.pipe.mjs +3 -3
- package/esm2022/utils/pipes/show-roles.pipe.mjs +4 -4
- package/esm2022/utils/pipes/show-segments.pipe.mjs +4 -4
- package/esm2022/utils/pipes/show-transport-types.pipe.mjs +4 -4
- package/esm2022/utils/services/autocomplete.service.mjs +3 -3
- package/esm2022/utils/services/utils.service.mjs +3 -3
- package/fesm2022/guajiritos-general-autocomplete.mjs +64 -58
- package/fesm2022/guajiritos-general-autocomplete.mjs.map +1 -1
- package/lib/guachos-general-autocomplete.component.d.ts +6 -3
- package/package.json +1 -1
- package/theme.scss +14 -14
package/README.md
CHANGED
|
@@ -1,145 +1,146 @@
|
|
|
1
|
-
# Guajiritos General Autocomplete
|
|
2
|
-
|
|
3
|
-
`Guajiritos General Autocomplete` es una librería para Angular que proporciona un componente con una funcionalidad de
|
|
4
|
-
autocompletar elementos con peticiones a un API-REST.
|
|
5
|
-
|
|
6
|
-
## Instalación
|
|
7
|
-
|
|
8
|
-
Con `npm`
|
|
9
|
-
|
|
10
|
-
```sh
|
|
11
|
-
npm i @guajiritos/general-autocomplete --save
|
|
12
|
-
```
|
|
13
|
-
|
|
14
|
-
Con `yarn`
|
|
15
|
-
|
|
16
|
-
```sh
|
|
17
|
-
yarn add @guajiritos/general-autocomplete
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
* `
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
* `
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
...
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
* `
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
* `
|
|
102
|
-
* `
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
* `
|
|
112
|
-
* `
|
|
113
|
-
* `
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
1
|
+
# Guajiritos General Autocomplete
|
|
2
|
+
|
|
3
|
+
`Guajiritos General Autocomplete` es una librería para Angular que proporciona un componente con una funcionalidad de
|
|
4
|
+
autocompletar elementos con peticiones a un API-REST.
|
|
5
|
+
|
|
6
|
+
## Instalación
|
|
7
|
+
|
|
8
|
+
Con `npm`
|
|
9
|
+
|
|
10
|
+
```sh
|
|
11
|
+
npm i @guajiritos/general-autocomplete --save
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
Con `yarn`
|
|
15
|
+
|
|
16
|
+
```sh
|
|
17
|
+
yarn add @guajiritos/general-autocomplete
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
Con `pnpm`
|
|
21
|
+
|
|
22
|
+
```sh
|
|
23
|
+
pnpm add @guajiritos/general-autocomplete
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
Importar la dependencia en tu proyecto.
|
|
27
|
+
|
|
28
|
+
```ts
|
|
29
|
+
import {GuajiritosGeneralAutocomplete} from '@guajiritos/general-autocomplete';
|
|
30
|
+
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
|
|
31
|
+
|
|
32
|
+
@NgModule({
|
|
33
|
+
imports: [
|
|
34
|
+
GuajiritosGeneralAutocomplete,
|
|
35
|
+
BrowserAnimationsModule
|
|
36
|
+
]
|
|
37
|
+
})
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
Importar la etiqueta en el componente correspondiente.
|
|
41
|
+
|
|
42
|
+
```html
|
|
43
|
+
...
|
|
44
|
+
<guajiritos-general-autocomplete></guajiritos-general-autocomplete>
|
|
45
|
+
...
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
## Entrada
|
|
49
|
+
|
|
50
|
+
Como elementos opcionales se pueden introducir los siguientes campos:
|
|
51
|
+
|
|
52
|
+
* `floatLabel` - Corresponde a un valor `FloatLabelType` de @angular/material. Por defecto toma valor `auto`
|
|
53
|
+
|
|
54
|
+
```html
|
|
55
|
+
...
|
|
56
|
+
<guajiritos-general-autocomplete [floatLabel]="'always'"></guajiritos-general-autocomplete>
|
|
57
|
+
...
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
* `bodyRequest` - Corresponde a un valor de la interfaz `ApiFormData`.
|
|
61
|
+
* `debounceTimeValue` - Valor numérico para el tiempo de espera entre peticiones con la entrada de datos de búsqueda. Por defecto 250 ms.
|
|
62
|
+
* `detailsTemplate` - Corresponde a un valor `TemplateRef`.
|
|
63
|
+
* `label` - Corresponde al texto a mostrar en el componente del `input`.
|
|
64
|
+
* `showLabel` - Muestra u oculta el label.
|
|
65
|
+
* `showSuffix` - Muestra u oculta el ícono del input.
|
|
66
|
+
* `suffixIcon` - Nombre del ícono de material usado como sufijo del input. Se muestra si `showSuffix` está activo y por defecto tiene valor `search`.
|
|
67
|
+
|
|
68
|
+
```html
|
|
69
|
+
...
|
|
70
|
+
<guajiritos-general-autocomplete [label]="Hoteles"></guajiritos-general-autocomplete>
|
|
71
|
+
...
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
* `placeholder` - Corresponde al texto del placeholder a mostrar en el componente del `input`.
|
|
75
|
+
|
|
76
|
+
```html
|
|
77
|
+
...
|
|
78
|
+
<guajiritos-general-autocomplete [placeholder]="Seleccione un hotel"></guajiritos-general-autocomplete>
|
|
79
|
+
...
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
* `field` - Un arreglo de valores correspondiente a la ruta del campo a mostrar en el componente de `autocomplete`.
|
|
83
|
+
|
|
84
|
+
```html
|
|
85
|
+
...
|
|
86
|
+
<guajiritos-general-autocomplete [field]="['hotel', 'name']"></guajiritos-general-autocomplete>
|
|
87
|
+
...
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
* `filterString` - Corresponde a los posibles filtros que se pueden enviar en las peticiones.
|
|
91
|
+
* `displayOptions` - Corresponde a un valor de la interfaz `DisplayOption`.
|
|
92
|
+
* `withoutPaddingBottom` - Si elimina el relleno del componente.
|
|
93
|
+
* `valueId` - Si el valor a manejar es el `id` del objeto. Por defector toma valor `false`.
|
|
94
|
+
|
|
95
|
+
```html
|
|
96
|
+
...
|
|
97
|
+
<guajiritos-general-autocomplete [valueId]="true"></guajiritos-general-autocomplete>
|
|
98
|
+
...
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
* `order` - Parámetro para ordenar la respuesta de las peticiones.
|
|
102
|
+
* `removeProperties` - Eliminar propiedades de las peticiones.
|
|
103
|
+
* `url` - Ruta para las peticiones API.
|
|
104
|
+
|
|
105
|
+
```html
|
|
106
|
+
...
|
|
107
|
+
<guajiritos-general-autocomplete [url]="https://www.guajiritos.com/"></guajiritos-general-autocomplete>
|
|
108
|
+
...
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
* `clearData` - Limpia los valores del formulario reactivo.
|
|
112
|
+
* `initialValue` - Valor inicial del formulario reactivo.
|
|
113
|
+
* `restrictions` - Restricciones de las peticiones.
|
|
114
|
+
* `isRequired` - Es requerida la selección de algún valor. Por defecto toma valor `false`.
|
|
115
|
+
|
|
116
|
+
```html
|
|
117
|
+
...
|
|
118
|
+
<guajiritos-general-autocomplete [isRequired]="true"></guajiritos-general-autocomplete>
|
|
119
|
+
...
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
* `doFocus` - Activa la propiedad focus del elemento.
|
|
123
|
+
|
|
124
|
+
## Salida
|
|
125
|
+
|
|
126
|
+
Salida del componente
|
|
127
|
+
|
|
128
|
+
* `SelectElement` - Elemento seleccionado
|
|
129
|
+
|
|
130
|
+
### Entrada de formulario reactivo
|
|
131
|
+
|
|
132
|
+
Este componente permite la entrada de un formulario reactivo para el manejo de los valores.
|
|
133
|
+
|
|
134
|
+
```html
|
|
135
|
+
...
|
|
136
|
+
<guajiritos-general-autocomplete [formControl]="control"></guajiritos-general-autocomplete>
|
|
137
|
+
...
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
o
|
|
141
|
+
|
|
142
|
+
```html
|
|
143
|
+
...
|
|
144
|
+
<guajiritos-general-autocomplete formControlName="controlName"></guajiritos-general-autocomplete>
|
|
145
|
+
...
|
|
146
|
+
```
|