@guajiritos/general-autocomplete 0.1.9 → 2.0.0

package/fesm2022/guajiritos-general-autocomplete.mjs

@@ -1,232 +1,37 @@
+import * as i1 from '@guajiritos/services';
+import { DisplayOptionItemType, ObservableDestroy, I18nPipe } from '@guajiritos/services';
+import { NgIf, NgForOf, NgStyle, NgTemplateOutlet, NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, Pipe, NgModule, signal, EventEmitter, forwardRef, Component, ChangeDetectionStrategy, ViewChild, Input, Output } from '@angular/core';
+import { Injectable, Pipe, signal, EventEmitter, forwardRef, Component, ChangeDetectionStrategy, ViewChild, Input, Output } from '@angular/core';
 import * as i7 from '@angular/forms';
 import { UntypedFormControl, Validators, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
 import * as i4 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i3 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i2 from '@ngx-translate/core';
-import { TranslateModule } from '@ngx-translate/core';
-import { Subject, takeUntil, debounceTime } from 'rxjs';
-import { NgIf, NgForOf, NgStyle, NgTemplateOutlet, NgClass } from '@angular/common';
-import * as i6 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
 import * as i8 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
+import * as i3 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i9 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
+import * as i6 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
 import * as i10 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i1 from '@angular/common/http';
-import { HttpParams } from '@angular/common/http';
-import { map } from 'rxjs/operators';
-import merge from 'lodash.merge';
+import * as i2 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { debounceTime } from 'rxjs';
 import * as i5 from '@angular/material/core';
 
 const GENERAL_DISPLAY_OPTIONS = {
     firthLabel: [
         {
-            type: 'path',
+            type: DisplayOptionItemType.PATH,
             path: ['name']
         }
     ],
     applyTranslate: true
 };
 
-class AutocompleteService {
-    /**
-     * Constructor function for the class.
-     *
-     * @param {HttpClient} _httpClient - The HttpClient instance to be used by the class.
-     */
-    constructor(_httpClient) {
-        this._httpClient = _httpClient;
-        this.httpOptions = {};
-    }
-    /**
-     * Processes the parameters and returns a Promise that resolves with the filter object.
-     *
-     * @param {string[] | string | undefined} filters - The filters to process.
-     * @param {string} value - The value to process the filters with.
-     * @return {Promise<any>} A Promise that resolves with the filter object.
-     */
-    processParams(filters, value) {
-        return new Promise((resolve, reject) => {
-            setTimeout(async () => {
-                let filter = {};
-                if (Array.isArray(filters)) {
-                    for (const f of filters) {
-                        await this.processFilterString(f, value).then((resp) => {
-                            if (Object.keys(filter)?.length) {
-                                merge(filter, resp);
-                            }
-                            else {
-                                filter = {
-                                    ...filter,
-                                    ...resp
-                                };
-                            }
-                            if (f === filters[filters?.length - 1]) {
-                                resolve(filter);
-                            }
-                        });
-                    }
-                }
-                else if (typeof filters === 'string') {
-                    await this.processFilterString(filters, value).then((resp) => {
-                        filter = {
-                            ...filter,
-                            ...resp
-                        };
-                        resolve(filter);
-                    });
-                }
-                else {
-                    reject(null);
-                }
-            }, 100);
-        });
-    }
-    /**
-     * Processes the filter string and returns the result.
-     *
-     * @param {string} filter - The filter string to process.
-     * @param {string} value - The value to use in the processing.
-     * @return {Promise<any>} - A promise that resolves to the processed result.
-     */
-    async processFilterString(filter, value) {
-        let f = {};
-        const arrayFilters = filter?.split('[');
-        if (arrayFilters?.findIndex((a) => a === 'filter') >= 0) {
-            arrayFilters?.splice(0, 1);
-        }
-        await this.createObjectFilters(arrayFilters, value).then((data) => {
-            f = data;
-        });
-        return f;
-    }
-    /**
-     * Creates object filters based on the given array and value.
-     *
-     * @param {string[]} array - The array of filters.
-     * @param {string} value - The value to be filtered.
-     * @return {Promise<any>} - A promise that resolves to the filtered object.
-     */
-    async createObjectFilters(array, value) {
-        for (let filter of array) {
-            filter = filter?.replace(']', '');
-            if (array.length > 1) {
-                array.splice(0, 1);
-                return { [filter]: await this.createObjectFilters(array, value) };
-            }
-            else {
-                if (filter === '$like') {
-                    return { [filter]: '%' + value + '%' };
-                }
-                else {
-                    return { [filter]: value };
-                }
-            }
-        }
-    }
-    /**
-     * Retrieves autocomplete suggestions based on the provided text and other optional parameters.
-     *
-     * @param {string} url - The URL to send the request to.
-     * @param {string} [text] - The text to use for autocomplete suggestions. Defaults to an empty string.
-     * @param {string[] | string} [field] - The field(s) to filter the autocomplete suggestions by.
-     * @param {RestrictionFilter[]} [restrictions] - The restriction filters to apply to the autocomplete suggestions.
-     * @param {string[]} [removeProperties] - The properties to remove from the autocomplete suggestions.
-     * @param {string} [order] - The order in which to retrieve the autocomplete suggestions.
-     * @param {ApiFormData} [bodyRequest] - The request body for the autocomplete suggestions.
-     * @return {Promise<Observable<any>>} - A promise that resolves to an observable containing the autocomplete suggestions.
-     */
-    async getAutocompleteByText(url, text, field, restrictions, removeProperties, order, bodyRequest) {
-        let httpParams = new HttpParams().set('offset', '0');
-        httpParams = httpParams.append('limit', '20');
-        if (order) {
-            httpParams = httpParams.append('order', order);
-        }
-        if (!text) {
-            text = '';
-        }
-        if (bodyRequest) {
-            let body = {};
-            if (text && text !== '') {
-                await this.processParams(field, text)
-                    .then((data) => {
-                    body = {
-                        ...bodyRequest,
-                        filter: data
-                    };
-                });
-            }
-            else {
-                body = JSON.parse(JSON.stringify(bodyRequest));
-            }
-            if (restrictions?.length) {
-                for (let r of restrictions) {
-                    await this.processParams(r?.filter, r?.value?.toString())
-                        .then((data) => {
-                        let filtersAux = { ...body?.filter };
-                        merge(filtersAux, data);
-                        body = {
-                            ...body,
-                            filter: filtersAux
-                        };
-                        httpParams = httpParams.set('form', JSON.stringify(body));
-                    });
-                }
-            }
-            else {
-                httpParams = httpParams.append('form', JSON.stringify(body));
-            }
-        }
-        else {
-            if (text && text !== '') {
-                if (Array.isArray(field)) {
-                    for (const f of field) {
-                        httpParams = httpParams.append(f, '%' + text + '%');
-                    }
-                }
-                else {
-                    if (field?.includes('$like')) {
-                        httpParams = httpParams.append(field, '%' + text + '%');
-                    }
-                    else if (field) {
-                        httpParams = httpParams.append(field, text);
-                    }
-                }
-            }
-            restrictions?.forEach((restriction) => {
-                if (restriction?.value) {
-                    httpParams = httpParams.append(restriction?.filter, restriction.value?.toString());
-                }
-            });
-        }
-        this.httpOptions = { params: httpParams };
-        return this._httpClient
-            .get(url, this.httpOptions)
-            .pipe(map((result) => {
-            result?.data?.map((item) => {
-                removeProperties?.forEach((property) => {
-                    delete item[property];
-                });
-            });
-            return result;
-        }));
-    }
-    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 }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: AutocompleteService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: AutocompleteService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
-
 class UtilsService {
     /**
      * Resolves the value of a property in an object by providing a path.
@@ -240,49 +45,16 @@ class UtilsService {
             return prev ? prev[curr] : null;
         }, obj || self);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: UtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: UtilsService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: UtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: UtilsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: UtilsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: UtilsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
         }] });
 
-class I18nFieldPipe {
-    /**
-     * Transforms a value based on the specified language.
-     *
-     * @param {any} value - The value to be transformed.
-     * @param {string} lang - The language to use for transformation.
-     * @return {string} The transformed value.
-     */
-    transform(value, lang) {
-        if (!value) {
-            return '';
-        }
-        if (typeof value === 'string') {
-            return value;
-        }
-        const keys = Object.keys(value);
-        if (!value[lang]) {
-            let i = 0;
-            while (i < keys?.length && (value[keys[i]] === null || value[keys[i]] === '')) {
-                i++;
-            }
-            return keys?.length > i ? value[keys[i]] : 'No está definido';
-        }
-        return value[lang] || 'No está definido';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: I18nFieldPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.1", ngImport: i0, type: I18nFieldPipe, name: "i18nField" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: I18nFieldPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'i18nField' }]
-        }] });
-
 class ResolvePropertyPath {
     /**
      * Transforms the given object based on the provided path and returns the transformed string.
@@ -294,7 +66,7 @@ class ResolvePropertyPath {
     transform(obj, path) {
         let result = '';
         path?.forEach((item) => {
-            if (item?.type === 'divider') {
+            if (item?.type === DisplayOptionItemType.DIVIDER) {
                 result += item?.divider;
             }
             else {
@@ -305,39 +77,14 @@ class ResolvePropertyPath {
         });
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ResolvePropertyPath, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.1", ngImport: i0, type: ResolvePropertyPath, name: "resolvePropertyPath" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ResolvePropertyPath, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: ResolvePropertyPath, isStandalone: true, name: "resolvePropertyPath" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ResolvePropertyPath, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ResolvePropertyPath, decorators: [{
             type: Pipe,
-            args: [{ name: 'resolvePropertyPath' }]
-        }] });
-
-class PipesModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: PipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.1", ngImport: i0, type: PipesModule, declarations: [I18nFieldPipe,
-            ResolvePropertyPath], exports: [I18nFieldPipe,
-            ResolvePropertyPath] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: PipesModule, providers: [
-            I18nFieldPipe,
-            ResolvePropertyPath
-        ] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: PipesModule, decorators: [{
-            type: NgModule,
             args: [{
-                    declarations: [
-                        I18nFieldPipe,
-                        ResolvePropertyPath
-                    ],
-                    exports: [
-                        I18nFieldPipe,
-                        ResolvePropertyPath
-                    ],
-                    providers: [
-                        I18nFieldPipe,
-                        ResolvePropertyPath
-                    ]
+                    name: 'resolvePropertyPath',
+                    standalone: true
                 }]
         }] });
 
@@ -348,7 +95,6 @@ class GuajiritosGeneralAutocomplete {
         this.translateService = translateService;
         this.wasSelected = signal(false);
         this.firstCall = signal(true);
-        this.unsubscribeAll$ = new Subject();
         this.selectedElement = signal(null);
         this._url = signal(null);
         this.restrictionsFilters = signal([]);
@@ -394,7 +140,7 @@ class GuajiritosGeneralAutocomplete {
                     this.displayOptions = GENERAL_DISPLAY_OPTIONS;
                 }
                 this.displayOptions?.firthLabel?.forEach((field) => {
-                    if (field?.type === 'path') {
+                    if (field?.type === DisplayOptionItemType.PATH) {
                         displayText += UtilsService.resolvePropertyByPath(value, field?.path);
                     }
                     else {
@@ -415,7 +161,7 @@ class GuajiritosGeneralAutocomplete {
         this.clearData$ = value;
         if (this.clearData$) {
             this.clearData$
-                .pipe(takeUntil(this.unsubscribeAll$))
+                .pipe(ObservableDestroy.unregisterFn())
                 .subscribe({
                 next: () => {
                     this.component.setValue(null, { emitEvent: false });
@@ -467,7 +213,7 @@ class GuajiritosGeneralAutocomplete {
         this.doFocusSubject$ = focusSubject;
         if (this.doFocusSubject$) {
             this.doFocusSubject$
-                .pipe(takeUntil(this.unsubscribeAll$))
+                .pipe(ObservableDestroy.unregisterFn())
                 .subscribe({
                 next: () => {
                     this._zone.run(() => {
@@ -495,7 +241,7 @@ class GuajiritosGeneralAutocomplete {
      */
     subscribeComponentChanges() {
         this.component?.valueChanges
-            ?.pipe(debounceTime(this.debounceTimeValue), takeUntil(this.unsubscribeAll$))
+            ?.pipe(debounceTime(this.debounceTimeValue), ObservableDestroy.unregisterFn())
             ?.subscribe({
             next: () => {
                 if (!this.firstCall() && !this.wasSelected()) {
@@ -509,7 +255,7 @@ class GuajiritosGeneralAutocomplete {
         });
     }
     /**
-     * Búsqueda de los elementos a mostrar en el componente de autocompletamiento
+     * Búsqueda de los elementos a mostrar en el componente de auto completamiento
      *
      * @param text - Texto a buscar
      */
@@ -620,20 +366,16 @@ class GuajiritosGeneralAutocomplete {
             }
         }
     }
-    ngOnDestroy() {
-        this.unsubscribeAll$.next();
-        this.unsubscribeAll$.complete();
-    }
-    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 }); }
-    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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: GuajiritosGeneralAutocomplete, deps: [{ token: i1.AutocompleteService }, { token: i0.NgZone }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => GuajiritosGeneralAutocomplete),
                 multi: true
             }
-        ], 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\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 | i18nField: 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 | i18nField: translateService.currentLang }}\r\n          </span>\r\n          <span *ngIf=\"displayOptions?.secondLabel\" class=\"mat-caption\">\r\n            {{ option | resolvePropertyPath: displayOptions.secondLabel | i18nField: 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: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.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: ReactiveFormsModule }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i10.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: PipesModule }, { kind: "pipe", type: I18nFieldPipe, name: "i18nField" }, { kind: "pipe", type: ResolvePropertyPath, name: "resolvePropertyPath" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], 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\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: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.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: ReactiveFormsModule }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i10.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }, { kind: "pipe", type: ResolvePropertyPath, name: "resolvePropertyPath" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: GuajiritosGeneralAutocomplete, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: GuajiritosGeneralAutocomplete, decorators: [{
             type: Component,
             args: [{ selector: 'guajiritos-general-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         MatFormFieldModule,
@@ -648,16 +390,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImpor
                         NgIf,
                         NgForOf,
                         NgStyle,
-                        PipesModule,
-                        NgTemplateOutlet
+                        NgTemplateOutlet,
+                        I18nPipe,
+                        ResolvePropertyPath
                     ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => GuajiritosGeneralAutocomplete),
                             multi: true
                         }
-                    ], 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\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 | i18nField: 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 | i18nField: translateService.currentLang }}\r\n          </span>\r\n          <span *ngIf=\"displayOptions?.secondLabel\" class=\"mat-caption\">\r\n            {{ option | resolvePropertyPath: displayOptions.secondLabel | i18nField: 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"] }]
-        }], ctorParameters: function () { return [{ type: AutocompleteService }, { type: i0.NgZone }, { type: i2.TranslateService }]; }, propDecorators: { inputText: [{
+                    ], 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\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"] }]
+        }], ctorParameters: () => [{ type: i1.AutocompleteService }, { type: i0.NgZone }, { type: i2.TranslateService }], propDecorators: { inputText: [{
                 type: ViewChild,
                 args: ['inputText', { static: true }]
             }], floatLabel: [{