@guajiritos/general-autocomplete 0.1.9 → 1.0.1
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/esm2022/lib/guachos-general-autocomplete.component.mjs +46 -50
- package/esm2022/public-api.mjs +2 -3
- package/esm2022/utils/constants/constants.mjs +11 -0
- package/esm2022/utils/pipes/resolve-property-path.pipe.mjs +8 -5
- package/esm2022/utils/services/utils.service.mjs +4 -4
- package/fesm2022/guajiritos-general-autocomplete.mjs +55 -310
- package/fesm2022/guajiritos-general-autocomplete.mjs.map +1 -1
- package/lib/guachos-general-autocomplete.component.d.ts +6 -8
- package/package.json +8 -7
- package/public-api.d.ts +1 -2
- package/utils/constants/{contacts.d.ts → constants.d.ts} +1 -1
- package/utils/pipes/resolve-property-path.pipe.d.ts +2 -2
- package/esm2022/utils/constants/contacts.mjs +0 -10
- package/esm2022/utils/interfaces/interfaces.mjs +0 -2
- package/esm2022/utils/pipes/i18n-field.pipe.mjs +0 -35
- package/esm2022/utils/pipes/pipes.module.mjs +0 -32
- package/esm2022/utils/services/autocomplete.service.mjs +0 -199
- package/utils/interfaces/interfaces.d.ts +0 -22
- package/utils/pipes/i18n-field.pipe.d.ts +0 -14
- package/utils/pipes/pipes.module.d.ts +0 -8
- package/utils/services/autocomplete.service.d.ts +0 -53
|
@@ -1,232 +1,38 @@
|
|
|
1
|
+
import * as i1 from '@guajiritos/services';
|
|
2
|
+
import { DisplayOptionItemType, ObservableDestroy, I18nPipe } from '@guajiritos/services';
|
|
3
|
+
import * as i3 from '@angular/common';
|
|
4
|
+
import { CommonModule } from '@angular/common';
|
|
1
5
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, Pipe,
|
|
3
|
-
import * as
|
|
6
|
+
import { Injectable, Pipe, signal, EventEmitter, forwardRef, Component, ChangeDetectionStrategy, ViewChild, Input, Output } from '@angular/core';
|
|
7
|
+
import * as i6 from '@angular/forms';
|
|
4
8
|
import { UntypedFormControl, Validators, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
|
|
5
|
-
import * as
|
|
9
|
+
import * as i10 from '@angular/material/autocomplete';
|
|
6
10
|
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
|
7
|
-
import * as i3 from '@angular/material/form-field';
|
|
8
|
-
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
9
|
-
import * as i2 from '@ngx-translate/core';
|
|
10
|
-
import { TranslateModule } from '@ngx-translate/core';
|
|
11
|
-
import { Subject, takeUntil, debounceTime } from 'rxjs';
|
|
12
|
-
import { NgIf, NgForOf, NgStyle, NgTemplateOutlet, NgClass } from '@angular/common';
|
|
13
|
-
import * as i6 from '@angular/material/input';
|
|
14
|
-
import { MatInputModule } from '@angular/material/input';
|
|
15
11
|
import * as i8 from '@angular/material/button';
|
|
16
12
|
import { MatButtonModule } from '@angular/material/button';
|
|
17
|
-
import * as
|
|
13
|
+
import * as i4 from '@angular/material/form-field';
|
|
14
|
+
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
15
|
+
import * as i5 from '@angular/material/icon';
|
|
18
16
|
import { MatIconModule } from '@angular/material/icon';
|
|
19
|
-
import * as
|
|
17
|
+
import * as i7 from '@angular/material/input';
|
|
18
|
+
import { MatInputModule } from '@angular/material/input';
|
|
19
|
+
import * as i9 from '@angular/material/progress-spinner';
|
|
20
20
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
21
|
-
import * as
|
|
22
|
-
import {
|
|
23
|
-
import {
|
|
24
|
-
import
|
|
25
|
-
import * as i5 from '@angular/material/core';
|
|
21
|
+
import * as i2 from '@ngx-translate/core';
|
|
22
|
+
import { TranslateModule } from '@ngx-translate/core';
|
|
23
|
+
import { debounceTime } from 'rxjs';
|
|
24
|
+
import * as i11 from '@angular/material/core';
|
|
26
25
|
|
|
27
26
|
const GENERAL_DISPLAY_OPTIONS = {
|
|
28
27
|
firthLabel: [
|
|
29
28
|
{
|
|
30
|
-
type:
|
|
29
|
+
type: DisplayOptionItemType.PATH,
|
|
31
30
|
path: ['name']
|
|
32
31
|
}
|
|
33
32
|
],
|
|
34
33
|
applyTranslate: true
|
|
35
34
|
};
|
|
36
35
|
|
|
37
|
-
class AutocompleteService {
|
|
38
|
-
/**
|
|
39
|
-
* Constructor function for the class.
|
|
40
|
-
*
|
|
41
|
-
* @param {HttpClient} _httpClient - The HttpClient instance to be used by the class.
|
|
42
|
-
*/
|
|
43
|
-
constructor(_httpClient) {
|
|
44
|
-
this._httpClient = _httpClient;
|
|
45
|
-
this.httpOptions = {};
|
|
46
|
-
}
|
|
47
|
-
/**
|
|
48
|
-
* Processes the parameters and returns a Promise that resolves with the filter object.
|
|
49
|
-
*
|
|
50
|
-
* @param {string[] | string | undefined} filters - The filters to process.
|
|
51
|
-
* @param {string} value - The value to process the filters with.
|
|
52
|
-
* @return {Promise<any>} A Promise that resolves with the filter object.
|
|
53
|
-
*/
|
|
54
|
-
processParams(filters, value) {
|
|
55
|
-
return new Promise((resolve, reject) => {
|
|
56
|
-
setTimeout(async () => {
|
|
57
|
-
let filter = {};
|
|
58
|
-
if (Array.isArray(filters)) {
|
|
59
|
-
for (const f of filters) {
|
|
60
|
-
await this.processFilterString(f, value).then((resp) => {
|
|
61
|
-
if (Object.keys(filter)?.length) {
|
|
62
|
-
merge(filter, resp);
|
|
63
|
-
}
|
|
64
|
-
else {
|
|
65
|
-
filter = {
|
|
66
|
-
...filter,
|
|
67
|
-
...resp
|
|
68
|
-
};
|
|
69
|
-
}
|
|
70
|
-
if (f === filters[filters?.length - 1]) {
|
|
71
|
-
resolve(filter);
|
|
72
|
-
}
|
|
73
|
-
});
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
else if (typeof filters === 'string') {
|
|
77
|
-
await this.processFilterString(filters, value).then((resp) => {
|
|
78
|
-
filter = {
|
|
79
|
-
...filter,
|
|
80
|
-
...resp
|
|
81
|
-
};
|
|
82
|
-
resolve(filter);
|
|
83
|
-
});
|
|
84
|
-
}
|
|
85
|
-
else {
|
|
86
|
-
reject(null);
|
|
87
|
-
}
|
|
88
|
-
}, 100);
|
|
89
|
-
});
|
|
90
|
-
}
|
|
91
|
-
/**
|
|
92
|
-
* Processes the filter string and returns the result.
|
|
93
|
-
*
|
|
94
|
-
* @param {string} filter - The filter string to process.
|
|
95
|
-
* @param {string} value - The value to use in the processing.
|
|
96
|
-
* @return {Promise<any>} - A promise that resolves to the processed result.
|
|
97
|
-
*/
|
|
98
|
-
async processFilterString(filter, value) {
|
|
99
|
-
let f = {};
|
|
100
|
-
const arrayFilters = filter?.split('[');
|
|
101
|
-
if (arrayFilters?.findIndex((a) => a === 'filter') >= 0) {
|
|
102
|
-
arrayFilters?.splice(0, 1);
|
|
103
|
-
}
|
|
104
|
-
await this.createObjectFilters(arrayFilters, value).then((data) => {
|
|
105
|
-
f = data;
|
|
106
|
-
});
|
|
107
|
-
return f;
|
|
108
|
-
}
|
|
109
|
-
/**
|
|
110
|
-
* Creates object filters based on the given array and value.
|
|
111
|
-
*
|
|
112
|
-
* @param {string[]} array - The array of filters.
|
|
113
|
-
* @param {string} value - The value to be filtered.
|
|
114
|
-
* @return {Promise<any>} - A promise that resolves to the filtered object.
|
|
115
|
-
*/
|
|
116
|
-
async createObjectFilters(array, value) {
|
|
117
|
-
for (let filter of array) {
|
|
118
|
-
filter = filter?.replace(']', '');
|
|
119
|
-
if (array.length > 1) {
|
|
120
|
-
array.splice(0, 1);
|
|
121
|
-
return { [filter]: await this.createObjectFilters(array, value) };
|
|
122
|
-
}
|
|
123
|
-
else {
|
|
124
|
-
if (filter === '$like') {
|
|
125
|
-
return { [filter]: '%' + value + '%' };
|
|
126
|
-
}
|
|
127
|
-
else {
|
|
128
|
-
return { [filter]: value };
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
/**
|
|
134
|
-
* Retrieves autocomplete suggestions based on the provided text and other optional parameters.
|
|
135
|
-
*
|
|
136
|
-
* @param {string} url - The URL to send the request to.
|
|
137
|
-
* @param {string} [text] - The text to use for autocomplete suggestions. Defaults to an empty string.
|
|
138
|
-
* @param {string[] | string} [field] - The field(s) to filter the autocomplete suggestions by.
|
|
139
|
-
* @param {RestrictionFilter[]} [restrictions] - The restriction filters to apply to the autocomplete suggestions.
|
|
140
|
-
* @param {string[]} [removeProperties] - The properties to remove from the autocomplete suggestions.
|
|
141
|
-
* @param {string} [order] - The order in which to retrieve the autocomplete suggestions.
|
|
142
|
-
* @param {ApiFormData} [bodyRequest] - The request body for the autocomplete suggestions.
|
|
143
|
-
* @return {Promise<Observable<any>>} - A promise that resolves to an observable containing the autocomplete suggestions.
|
|
144
|
-
*/
|
|
145
|
-
async getAutocompleteByText(url, text, field, restrictions, removeProperties, order, bodyRequest) {
|
|
146
|
-
let httpParams = new HttpParams().set('offset', '0');
|
|
147
|
-
httpParams = httpParams.append('limit', '20');
|
|
148
|
-
if (order) {
|
|
149
|
-
httpParams = httpParams.append('order', order);
|
|
150
|
-
}
|
|
151
|
-
if (!text) {
|
|
152
|
-
text = '';
|
|
153
|
-
}
|
|
154
|
-
if (bodyRequest) {
|
|
155
|
-
let body = {};
|
|
156
|
-
if (text && text !== '') {
|
|
157
|
-
await this.processParams(field, text)
|
|
158
|
-
.then((data) => {
|
|
159
|
-
body = {
|
|
160
|
-
...bodyRequest,
|
|
161
|
-
filter: data
|
|
162
|
-
};
|
|
163
|
-
});
|
|
164
|
-
}
|
|
165
|
-
else {
|
|
166
|
-
body = JSON.parse(JSON.stringify(bodyRequest));
|
|
167
|
-
}
|
|
168
|
-
if (restrictions?.length) {
|
|
169
|
-
for (let r of restrictions) {
|
|
170
|
-
await this.processParams(r?.filter, r?.value?.toString())
|
|
171
|
-
.then((data) => {
|
|
172
|
-
let filtersAux = { ...body?.filter };
|
|
173
|
-
merge(filtersAux, data);
|
|
174
|
-
body = {
|
|
175
|
-
...body,
|
|
176
|
-
filter: filtersAux
|
|
177
|
-
};
|
|
178
|
-
httpParams = httpParams.set('form', JSON.stringify(body));
|
|
179
|
-
});
|
|
180
|
-
}
|
|
181
|
-
}
|
|
182
|
-
else {
|
|
183
|
-
httpParams = httpParams.append('form', JSON.stringify(body));
|
|
184
|
-
}
|
|
185
|
-
}
|
|
186
|
-
else {
|
|
187
|
-
if (text && text !== '') {
|
|
188
|
-
if (Array.isArray(field)) {
|
|
189
|
-
for (const f of field) {
|
|
190
|
-
httpParams = httpParams.append(f, '%' + text + '%');
|
|
191
|
-
}
|
|
192
|
-
}
|
|
193
|
-
else {
|
|
194
|
-
if (field?.includes('$like')) {
|
|
195
|
-
httpParams = httpParams.append(field, '%' + text + '%');
|
|
196
|
-
}
|
|
197
|
-
else if (field) {
|
|
198
|
-
httpParams = httpParams.append(field, text);
|
|
199
|
-
}
|
|
200
|
-
}
|
|
201
|
-
}
|
|
202
|
-
restrictions?.forEach((restriction) => {
|
|
203
|
-
if (restriction?.value) {
|
|
204
|
-
httpParams = httpParams.append(restriction?.filter, restriction.value?.toString());
|
|
205
|
-
}
|
|
206
|
-
});
|
|
207
|
-
}
|
|
208
|
-
this.httpOptions = { params: httpParams };
|
|
209
|
-
return this._httpClient
|
|
210
|
-
.get(url, this.httpOptions)
|
|
211
|
-
.pipe(map((result) => {
|
|
212
|
-
result?.data?.map((item) => {
|
|
213
|
-
removeProperties?.forEach((property) => {
|
|
214
|
-
delete item[property];
|
|
215
|
-
});
|
|
216
|
-
});
|
|
217
|
-
return result;
|
|
218
|
-
}));
|
|
219
|
-
}
|
|
220
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: AutocompleteService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
221
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: AutocompleteService, providedIn: 'root' }); }
|
|
222
|
-
}
|
|
223
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: AutocompleteService, decorators: [{
|
|
224
|
-
type: Injectable,
|
|
225
|
-
args: [{
|
|
226
|
-
providedIn: 'root'
|
|
227
|
-
}]
|
|
228
|
-
}], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
|
|
229
|
-
|
|
230
36
|
class UtilsService {
|
|
231
37
|
/**
|
|
232
38
|
* Resolves the value of a property in an object by providing a path.
|
|
@@ -240,49 +46,16 @@ class UtilsService {
|
|
|
240
46
|
return prev ? prev[curr] : null;
|
|
241
47
|
}, obj || self);
|
|
242
48
|
}
|
|
243
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.
|
|
244
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.
|
|
49
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
50
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UtilsService, providedIn: 'root' }); }
|
|
245
51
|
}
|
|
246
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.
|
|
52
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UtilsService, decorators: [{
|
|
247
53
|
type: Injectable,
|
|
248
54
|
args: [{
|
|
249
55
|
providedIn: 'root'
|
|
250
56
|
}]
|
|
251
57
|
}] });
|
|
252
58
|
|
|
253
|
-
class I18nFieldPipe {
|
|
254
|
-
/**
|
|
255
|
-
* Transforms a value based on the specified language.
|
|
256
|
-
*
|
|
257
|
-
* @param {any} value - The value to be transformed.
|
|
258
|
-
* @param {string} lang - The language to use for transformation.
|
|
259
|
-
* @return {string} The transformed value.
|
|
260
|
-
*/
|
|
261
|
-
transform(value, lang) {
|
|
262
|
-
if (!value) {
|
|
263
|
-
return '';
|
|
264
|
-
}
|
|
265
|
-
if (typeof value === 'string') {
|
|
266
|
-
return value;
|
|
267
|
-
}
|
|
268
|
-
const keys = Object.keys(value);
|
|
269
|
-
if (!value[lang]) {
|
|
270
|
-
let i = 0;
|
|
271
|
-
while (i < keys?.length && (value[keys[i]] === null || value[keys[i]] === '')) {
|
|
272
|
-
i++;
|
|
273
|
-
}
|
|
274
|
-
return keys?.length > i ? value[keys[i]] : 'No está definido';
|
|
275
|
-
}
|
|
276
|
-
return value[lang] || 'No está definido';
|
|
277
|
-
}
|
|
278
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: I18nFieldPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
279
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.1", ngImport: i0, type: I18nFieldPipe, name: "i18nField" }); }
|
|
280
|
-
}
|
|
281
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: I18nFieldPipe, decorators: [{
|
|
282
|
-
type: Pipe,
|
|
283
|
-
args: [{ name: 'i18nField' }]
|
|
284
|
-
}] });
|
|
285
|
-
|
|
286
59
|
class ResolvePropertyPath {
|
|
287
60
|
/**
|
|
288
61
|
* Transforms the given object based on the provided path and returns the transformed string.
|
|
@@ -305,39 +78,14 @@ class ResolvePropertyPath {
|
|
|
305
78
|
});
|
|
306
79
|
return result;
|
|
307
80
|
}
|
|
308
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.
|
|
309
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.
|
|
81
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResolvePropertyPath, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
82
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ResolvePropertyPath, isStandalone: true, name: "resolvePropertyPath" }); }
|
|
310
83
|
}
|
|
311
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.
|
|
84
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResolvePropertyPath, decorators: [{
|
|
312
85
|
type: Pipe,
|
|
313
|
-
args: [{ name: 'resolvePropertyPath' }]
|
|
314
|
-
}] });
|
|
315
|
-
|
|
316
|
-
class PipesModule {
|
|
317
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: PipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
318
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.1", ngImport: i0, type: PipesModule, declarations: [I18nFieldPipe,
|
|
319
|
-
ResolvePropertyPath], exports: [I18nFieldPipe,
|
|
320
|
-
ResolvePropertyPath] }); }
|
|
321
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: PipesModule, providers: [
|
|
322
|
-
I18nFieldPipe,
|
|
323
|
-
ResolvePropertyPath
|
|
324
|
-
] }); }
|
|
325
|
-
}
|
|
326
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: PipesModule, decorators: [{
|
|
327
|
-
type: NgModule,
|
|
328
86
|
args: [{
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
ResolvePropertyPath
|
|
332
|
-
],
|
|
333
|
-
exports: [
|
|
334
|
-
I18nFieldPipe,
|
|
335
|
-
ResolvePropertyPath
|
|
336
|
-
],
|
|
337
|
-
providers: [
|
|
338
|
-
I18nFieldPipe,
|
|
339
|
-
ResolvePropertyPath
|
|
340
|
-
]
|
|
87
|
+
name: 'resolvePropertyPath',
|
|
88
|
+
standalone: true
|
|
341
89
|
}]
|
|
342
90
|
}] });
|
|
343
91
|
|
|
@@ -348,7 +96,6 @@ class GuajiritosGeneralAutocomplete {
|
|
|
348
96
|
this.translateService = translateService;
|
|
349
97
|
this.wasSelected = signal(false);
|
|
350
98
|
this.firstCall = signal(true);
|
|
351
|
-
this.unsubscribeAll$ = new Subject();
|
|
352
99
|
this.selectedElement = signal(null);
|
|
353
100
|
this._url = signal(null);
|
|
354
101
|
this.restrictionsFilters = signal([]);
|
|
@@ -374,6 +121,7 @@ class GuajiritosGeneralAutocomplete {
|
|
|
374
121
|
this.withoutPaddingBottom = true;
|
|
375
122
|
this.valueId = false;
|
|
376
123
|
this.showSuffix = false;
|
|
124
|
+
this.requireSelection = false;
|
|
377
125
|
this.suffixIcon = 'search';
|
|
378
126
|
this.removeProperties = [];
|
|
379
127
|
this.SelectElement = new EventEmitter();
|
|
@@ -394,7 +142,7 @@ class GuajiritosGeneralAutocomplete {
|
|
|
394
142
|
this.displayOptions = GENERAL_DISPLAY_OPTIONS;
|
|
395
143
|
}
|
|
396
144
|
this.displayOptions?.firthLabel?.forEach((field) => {
|
|
397
|
-
if (field?.type ===
|
|
145
|
+
if (field?.type === DisplayOptionItemType.PATH) {
|
|
398
146
|
displayText += UtilsService.resolvePropertyByPath(value, field?.path);
|
|
399
147
|
}
|
|
400
148
|
else {
|
|
@@ -415,7 +163,7 @@ class GuajiritosGeneralAutocomplete {
|
|
|
415
163
|
this.clearData$ = value;
|
|
416
164
|
if (this.clearData$) {
|
|
417
165
|
this.clearData$
|
|
418
|
-
.pipe(
|
|
166
|
+
.pipe(ObservableDestroy.unregisterFn())
|
|
419
167
|
.subscribe({
|
|
420
168
|
next: () => {
|
|
421
169
|
this.component.setValue(null, { emitEvent: false });
|
|
@@ -467,7 +215,7 @@ class GuajiritosGeneralAutocomplete {
|
|
|
467
215
|
this.doFocusSubject$ = focusSubject;
|
|
468
216
|
if (this.doFocusSubject$) {
|
|
469
217
|
this.doFocusSubject$
|
|
470
|
-
.pipe(
|
|
218
|
+
.pipe(ObservableDestroy.unregisterFn())
|
|
471
219
|
.subscribe({
|
|
472
220
|
next: () => {
|
|
473
221
|
this._zone.run(() => {
|
|
@@ -494,9 +242,9 @@ class GuajiritosGeneralAutocomplete {
|
|
|
494
242
|
* Subscripción a los cambios del input de búsqueda
|
|
495
243
|
*/
|
|
496
244
|
subscribeComponentChanges() {
|
|
497
|
-
this.component
|
|
498
|
-
|
|
499
|
-
|
|
245
|
+
this.component.valueChanges
|
|
246
|
+
.pipe(debounceTime(this.debounceTimeValue), ObservableDestroy.unregisterFn())
|
|
247
|
+
.subscribe({
|
|
500
248
|
next: () => {
|
|
501
249
|
if (!this.firstCall() && !this.wasSelected()) {
|
|
502
250
|
this.getAutocompleteByTextHandler(this.getAutocompleteSearchText());
|
|
@@ -533,18 +281,18 @@ class GuajiritosGeneralAutocomplete {
|
|
|
533
281
|
getAutocompleteSearchText() {
|
|
534
282
|
this.loading.set(true);
|
|
535
283
|
let text = '';
|
|
536
|
-
if (this.component
|
|
284
|
+
if (this.component.value) {
|
|
537
285
|
if (typeof this.component.value === 'object') {
|
|
538
|
-
const componentValue = this.component?.
|
|
286
|
+
const componentValue = this.component.value?.[this.field?.[0]];
|
|
539
287
|
if (typeof componentValue === 'object') {
|
|
540
288
|
let lang = 'es';
|
|
541
|
-
if (this.field[1]) {
|
|
542
|
-
lang = this.field[1];
|
|
289
|
+
if (this.field?.[1]) {
|
|
290
|
+
lang = this.field?.[1];
|
|
543
291
|
}
|
|
544
|
-
text = componentValue[lang];
|
|
292
|
+
text = componentValue?.[lang];
|
|
545
293
|
}
|
|
546
294
|
}
|
|
547
|
-
else if (typeof this.component
|
|
295
|
+
else if (typeof this.component.value === 'string') {
|
|
548
296
|
text = this.component.value;
|
|
549
297
|
}
|
|
550
298
|
}
|
|
@@ -620,44 +368,39 @@ class GuajiritosGeneralAutocomplete {
|
|
|
620
368
|
}
|
|
621
369
|
}
|
|
622
370
|
}
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
}
|
|
627
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: GuajiritosGeneralAutocomplete, deps: [{ token: AutocompleteService }, { token: i0.NgZone }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
628
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: GuajiritosGeneralAutocomplete, isStandalone: true, selector: "guajiritos-general-autocomplete", inputs: { floatLabel: "floatLabel", bodyRequest: "bodyRequest", debounceTimeValue: "debounceTimeValue", detailsTemplate: "detailsTemplate", label: "label", showLabel: "showLabel", appearance: "appearance", color: "color", subscriptSizing: "subscriptSizing", placeholder: "placeholder", field: "field", filterString: "filterString", displayOptions: "displayOptions", withoutPaddingBottom: "withoutPaddingBottom", valueId: "valueId", showSuffix: "showSuffix", order: "order", suffixIcon: "suffixIcon", removeProperties: "removeProperties", url: "url", clearData: "clearData", initialValue: "initialValue", restrictions: "restrictions", isRequired: "isRequired", doFocus: "doFocus" }, outputs: { SelectElement: "SelectElement" }, providers: [
|
|
371
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GuajiritosGeneralAutocomplete, deps: [{ token: i1.AutocompleteService }, { token: i0.NgZone }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
372
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GuajiritosGeneralAutocomplete, isStandalone: true, selector: "guajiritos-general-autocomplete", inputs: { floatLabel: "floatLabel", bodyRequest: "bodyRequest", debounceTimeValue: "debounceTimeValue", detailsTemplate: "detailsTemplate", label: "label", showLabel: "showLabel", appearance: "appearance", color: "color", subscriptSizing: "subscriptSizing", placeholder: "placeholder", field: "field", filterString: "filterString", displayOptions: "displayOptions", withoutPaddingBottom: "withoutPaddingBottom", valueId: "valueId", showSuffix: "showSuffix", requireSelection: "requireSelection", order: "order", suffixIcon: "suffixIcon", removeProperties: "removeProperties", url: "url", clearData: "clearData", initialValue: "initialValue", restrictions: "restrictions", isRequired: "isRequired", doFocus: "doFocus" }, outputs: { SelectElement: "SelectElement" }, providers: [
|
|
373
|
+
ObservableDestroy,
|
|
629
374
|
{
|
|
630
375
|
provide: NG_VALUE_ACCESSOR,
|
|
631
376
|
useExisting: forwardRef(() => GuajiritosGeneralAutocomplete),
|
|
632
377
|
multi: true
|
|
633
378
|
}
|
|
634
|
-
], viewQueries: [{ propertyName: "inputText", first: true, predicate: ["inputText"], descendants: true, static: true }], ngImport: i0, template: "<mat-form-field [floatLabel]=\"floatLabel\" class=\"w-100\" [appearance]=\"appearance\" [color]=\"color\"\r\n [subscriptSizing]=\"subscriptSizing\">\r\n\r\n <mat-label *ngIf=\"showLabel\">{{ label | translate }}</mat-label>\r\n <mat-icon matSuffix *ngIf=\"showSuffix\">{{ suffixIcon ?? \"search\" }}</mat-icon>\r\n <input #inputText #trigger=\"matAutocompleteTrigger\" (focus)=\"onFocus()\" [formControl]=\"component\"\r\n [matAutocomplete]=\"autocomplete\" [placeholder]=\"placeholder | translate\" aria-label=\"autocomplete\"\r\n autocomplete=\"off\" matInput type=\"text\" [required]=\"required()\">\r\n <button (click)=\"clear(trigger)\" *ngIf=\"!loading() && component
|
|
379
|
+
], viewQueries: [{ propertyName: "inputText", first: true, predicate: ["inputText"], descendants: true, static: true }], ngImport: i0, template: "<mat-form-field [floatLabel]=\"floatLabel\" class=\"w-100\" [appearance]=\"appearance\" [color]=\"color\"\r\n [subscriptSizing]=\"subscriptSizing\">\r\n\r\n <mat-label *ngIf=\"showLabel\">{{ label | translate }}</mat-label>\r\n <mat-icon matSuffix *ngIf=\"showSuffix\">{{ suffixIcon ?? \"search\" }}</mat-icon>\r\n <input #inputText #trigger=\"matAutocompleteTrigger\" (focus)=\"onFocus()\" [formControl]=\"component\"\r\n [matAutocomplete]=\"autocomplete\" [placeholder]=\"placeholder | translate\" aria-label=\"autocomplete\"\r\n autocomplete=\"off\" matInput type=\"text\" [required]=\"required()\">\r\n <button (click)=\"clear(trigger)\" *ngIf=\"!loading() && component.value\" [disabled]=\"disabledButton()\"\r\n aria-label=\"Clear\" mat-icon-button matSuffix>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n <button *ngIf=\"loading()\" aria-label=\"search\" mat-icon-button matSuffix>\r\n <mat-spinner [value]=\"90\" color=\"accent\" diameter=\"25\"></mat-spinner>\r\n </button>\r\n <mat-autocomplete #autocomplete=\"matAutocomplete\" [displayWith]=\"displayFn\" [requireSelection]=\"requireSelection\"\r\n (optionSelected)=\"optionSelected($event)\">\r\n <mat-option *ngFor=\"let option of filteredOptions()\" [value]=\"option\">\r\n\r\n <ng-container *ngIf=\"!displayOptions && !detailsTemplate\">\r\n {{ option?.name | i18n: translateService.currentLang }}\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!detailsTemplate\">\r\n <div class=\"display-options\">\r\n <span [ngStyle]=\"{'line-height': displayOptions?.secondLabel ? '16px' : ''}\">\r\n {{ option | resolvePropertyPath:displayOptions.firthLabel | i18n: translateService.currentLang }}\r\n </span>\r\n <span *ngIf=\"displayOptions?.secondLabel\" class=\"mat-caption\">\r\n {{ option | resolvePropertyPath: displayOptions.secondLabel | i18n: translateService.currentLang }}\r\n </span>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"detailsTemplate\">\r\n <ng-container *ngTemplateOutlet=\"detailsTemplate;context:{$implicit: option }\"></ng-container>\r\n </ng-container>\r\n </mat-option>\r\n </mat-autocomplete>\r\n\r\n <mat-error *ngIf=\"component.invalid\">\r\n {{ 'Este campo es requerido.' | translate }}\r\n </mat-error>\r\n</mat-form-field>\r\n", styles: [".w-100{width:100%}.display-options{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i10.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i10.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }, { kind: "pipe", type: ResolvePropertyPath, name: "resolvePropertyPath" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
635
380
|
}
|
|
636
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.
|
|
381
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GuajiritosGeneralAutocomplete, decorators: [{
|
|
637
382
|
type: Component,
|
|
638
383
|
args: [{ selector: 'guajiritos-general-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
384
|
+
CommonModule,
|
|
639
385
|
MatFormFieldModule,
|
|
640
|
-
NgClass,
|
|
641
386
|
TranslateModule,
|
|
642
|
-
|
|
643
|
-
MatInputModule,
|
|
387
|
+
MatIconModule,
|
|
644
388
|
ReactiveFormsModule,
|
|
389
|
+
MatInputModule,
|
|
645
390
|
MatButtonModule,
|
|
646
|
-
MatIconModule,
|
|
647
391
|
MatProgressSpinnerModule,
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
PipesModule,
|
|
652
|
-
NgTemplateOutlet
|
|
392
|
+
MatAutocompleteModule,
|
|
393
|
+
I18nPipe,
|
|
394
|
+
ResolvePropertyPath
|
|
653
395
|
], providers: [
|
|
396
|
+
ObservableDestroy,
|
|
654
397
|
{
|
|
655
398
|
provide: NG_VALUE_ACCESSOR,
|
|
656
399
|
useExisting: forwardRef(() => GuajiritosGeneralAutocomplete),
|
|
657
400
|
multi: true
|
|
658
401
|
}
|
|
659
|
-
], template: "<mat-form-field [floatLabel]=\"floatLabel\" class=\"w-100\" [appearance]=\"appearance\" [color]=\"color\"\r\n [subscriptSizing]=\"subscriptSizing\">\r\n\r\n <mat-label *ngIf=\"showLabel\">{{ label | translate }}</mat-label>\r\n <mat-icon matSuffix *ngIf=\"showSuffix\">{{ suffixIcon ?? \"search\" }}</mat-icon>\r\n <input #inputText #trigger=\"matAutocompleteTrigger\" (focus)=\"onFocus()\" [formControl]=\"component\"\r\n [matAutocomplete]=\"autocomplete\" [placeholder]=\"placeholder | translate\" aria-label=\"autocomplete\"\r\n autocomplete=\"off\" matInput type=\"text\" [required]=\"required()\">\r\n <button (click)=\"clear(trigger)\" *ngIf=\"!loading() && component
|
|
660
|
-
}], ctorParameters: function () { return [{ type: AutocompleteService }, { type: i0.NgZone }, { type: i2.TranslateService }]; }, propDecorators: { inputText: [{
|
|
402
|
+
], template: "<mat-form-field [floatLabel]=\"floatLabel\" class=\"w-100\" [appearance]=\"appearance\" [color]=\"color\"\r\n [subscriptSizing]=\"subscriptSizing\">\r\n\r\n <mat-label *ngIf=\"showLabel\">{{ label | translate }}</mat-label>\r\n <mat-icon matSuffix *ngIf=\"showSuffix\">{{ suffixIcon ?? \"search\" }}</mat-icon>\r\n <input #inputText #trigger=\"matAutocompleteTrigger\" (focus)=\"onFocus()\" [formControl]=\"component\"\r\n [matAutocomplete]=\"autocomplete\" [placeholder]=\"placeholder | translate\" aria-label=\"autocomplete\"\r\n autocomplete=\"off\" matInput type=\"text\" [required]=\"required()\">\r\n <button (click)=\"clear(trigger)\" *ngIf=\"!loading() && component.value\" [disabled]=\"disabledButton()\"\r\n aria-label=\"Clear\" mat-icon-button matSuffix>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n <button *ngIf=\"loading()\" aria-label=\"search\" mat-icon-button matSuffix>\r\n <mat-spinner [value]=\"90\" color=\"accent\" diameter=\"25\"></mat-spinner>\r\n </button>\r\n <mat-autocomplete #autocomplete=\"matAutocomplete\" [displayWith]=\"displayFn\" [requireSelection]=\"requireSelection\"\r\n (optionSelected)=\"optionSelected($event)\">\r\n <mat-option *ngFor=\"let option of filteredOptions()\" [value]=\"option\">\r\n\r\n <ng-container *ngIf=\"!displayOptions && !detailsTemplate\">\r\n {{ option?.name | i18n: translateService.currentLang }}\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!detailsTemplate\">\r\n <div class=\"display-options\">\r\n <span [ngStyle]=\"{'line-height': displayOptions?.secondLabel ? '16px' : ''}\">\r\n {{ option | resolvePropertyPath:displayOptions.firthLabel | i18n: translateService.currentLang }}\r\n </span>\r\n <span *ngIf=\"displayOptions?.secondLabel\" class=\"mat-caption\">\r\n {{ option | resolvePropertyPath: displayOptions.secondLabel | i18n: translateService.currentLang }}\r\n </span>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"detailsTemplate\">\r\n <ng-container *ngTemplateOutlet=\"detailsTemplate;context:{$implicit: option }\"></ng-container>\r\n </ng-container>\r\n </mat-option>\r\n </mat-autocomplete>\r\n\r\n <mat-error *ngIf=\"component.invalid\">\r\n {{ 'Este campo es requerido.' | translate }}\r\n </mat-error>\r\n</mat-form-field>\r\n", styles: [".w-100{width:100%}.display-options{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}\n"] }]
|
|
403
|
+
}], ctorParameters: function () { return [{ type: i1.AutocompleteService }, { type: i0.NgZone }, { type: i2.TranslateService }]; }, propDecorators: { inputText: [{
|
|
661
404
|
type: ViewChild,
|
|
662
405
|
args: ['inputText', { static: true }]
|
|
663
406
|
}], floatLabel: [{
|
|
@@ -692,6 +435,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImpor
|
|
|
692
435
|
type: Input
|
|
693
436
|
}], showSuffix: [{
|
|
694
437
|
type: Input
|
|
438
|
+
}], requireSelection: [{
|
|
439
|
+
type: Input
|
|
695
440
|
}], order: [{
|
|
696
441
|
type: Input
|
|
697
442
|
}], suffixIcon: [{
|