@guajiritos/general-autocomplete 0.1.7 → 0.1.9

package/fesm2022/guajiritos-general-autocomplete.mjs

@@ -9,8 +9,7 @@ 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 * as i5 from '@angular/common';
-import { CurrencyPipe, UpperCasePipe, NgClass, NgIf, NgForOf, NgStyle, NgTemplateOutlet } from '@angular/common';
+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';
@@ -23,19 +22,7 @@ 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 i5$1 from '@angular/material/core';
-
-var CustomPipes;
-(function (CustomPipes) {
-    CustomPipes["SHOW_SEGMENTS"] = "showSegments";
-    CustomPipes["DURATION_TIME"] = "durationTime";
-    CustomPipes["HUMANIZE_DURATION"] = "humanizeDuration";
-    CustomPipes["SHOW_TRANSPORT_TYPES"] = "showTransportTypes";
-    CustomPipes["SHOW_ROLES"] = "showRoles";
-    CustomPipes["IDA_RETURN"] = "idaReturn";
-    CustomPipes["CURRENCY"] = "currency";
-    CustomPipes["UPPERCASE"] = "uppercase";
-})(CustomPipes || (CustomPipes = {}));
+import * as i5 from '@angular/material/core';
 
 const GENERAL_DISPLAY_OPTIONS = {
     firthLabel: [
@@ -48,10 +35,22 @@ const GENERAL_DISPLAY_OPTIONS = {
 };
 
 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 () => {
@@ -89,6 +88,13 @@ class AutocompleteService {
             }, 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('[');
@@ -100,6 +106,13 @@ class AutocompleteService {
         });
         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(']', '');
@@ -117,6 +130,18 @@ class AutocompleteService {
             }
         }
     }
+    /**
+     * 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');
@@ -204,35 +229,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImpor
 
 class UtilsService {
     /**
-     * Convierte el tiempo pasado por parámetro en horas y minutos
-     *
-     * @param time - Tiempo
-     * @returns Devuelve las horas y minutos
-     */
-    static getTime(time) {
-        const hours = parseInt(Number(time) / 3600 + '', 10);
-        time = Number(time) - (hours * 3600);
-        const minutes = parseInt(Number(time) / 60 + '', 10);
-        return { hours, minutes };
-    }
-    /**
-     * Devuelve el tiempo en formato 'hh:mm'
-     *
-     * @param time - Tiempo
-     */
-    static getTimePretty(time) {
-        const { hours, minutes } = UtilsService.getTime(time);
-        return (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes);
-    }
-    /**
-     * Devuelve el tiempo en formato 'hhh : mmm'
+     * Resolves the value of a property in an object by providing a path.
      *
-     * @param time - Tiempo
+     * @param {any} obj - The object to traverse.
+     * @param {string[]} path - An array of strings representing the path to the desired property.
+     * @return {any} The value of the property at the given path, or null if the path is invalid.
      */
-    static humanizeDuration(time) {
-        const { hours, minutes } = UtilsService.getTime(time);
-        return (hours < 10 ? '0' + hours : hours) + 'h : ' + (minutes < 10 ? '0' + minutes : minutes) + 'm';
-    }
     static resolvePropertyByPath(obj, path) {
         return path.reduce((prev, curr) => {
             return prev ? prev[curr] : null;
@@ -248,36 +250,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImpor
                 }]
         }] });
 
-class DurationTimePipe {
-    transform(value) {
-        return UtilsService.getTimePretty(value);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: DurationTimePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.1", ngImport: i0, type: DurationTimePipe, name: "durationTime" }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: DurationTimePipe }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: DurationTimePipe, decorators: [{
-            type: Injectable
-        }, {
-            type: Pipe,
-            args: [{ name: 'durationTime' }]
-        }] });
-
-class HumanizeDurationPipe {
-    transform(input) {
-        return UtilsService.humanizeDuration(input);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: HumanizeDurationPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.1", ngImport: i0, type: HumanizeDurationPipe, name: "humanizeDuration" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: HumanizeDurationPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'humanizeDuration'
-                }]
-        }] });
-
 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 '';
@@ -303,103 +283,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImpor
             args: [{ name: 'i18nField' }]
         }] });
 
-class IdaReturnPipe {
-    transform(value) {
-        if (value === CustomPipes.IDA_RETURN) {
-            return 'Ida y Vuelta';
-        }
-        else {
-            return 'solo Ida';
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: IdaReturnPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.1", ngImport: i0, type: IdaReturnPipe, name: "idaReturn" }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: IdaReturnPipe }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: IdaReturnPipe, decorators: [{
-            type: Injectable
-        }, {
-            type: Pipe,
-            args: [{ name: 'idaReturn' }]
-        }] });
-
-class ShowRolesPipe {
-    transform(value) {
-        let result = '';
-        if (value?.length) {
-            value.forEach(item => {
-                result += item?.Rol?.name + ', ';
-            });
-            result = result.substring(0, result?.length - 2);
-        }
-        return result;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ShowRolesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.1", ngImport: i0, type: ShowRolesPipe, name: "showSegments" }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ShowRolesPipe }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ShowRolesPipe, decorators: [{
-            type: Injectable
-        }, {
-            type: Pipe,
-            args: [{ name: 'showSegments' }]
-        }] });
-
-class ShowSegmentsPipe {
-    transform(value) {
-        let result = '';
-        if (value?.length) {
-            value.forEach(item => {
-                result += item?.Segment?.PlaceOrigin?.alpha3 + '-' + item?.Segment?.PlaceDestination?.alpha3 + ', ';
-            });
-            result = result.substring(0, result?.length - 2);
-        }
-        return result;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ShowSegmentsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.1", ngImport: i0, type: ShowSegmentsPipe, name: "showSegments" }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ShowSegmentsPipe }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ShowSegmentsPipe, decorators: [{
-            type: Injectable
-        }, {
-            type: Pipe,
-            args: [{ name: 'showSegments' }]
-        }] });
-
-class ShowTransportTypesPipe {
-    transform(value) {
-        let result = '';
-        if (value?.length) {
-            value.forEach(item => {
-                result += item?.TransportType?.name['es'] + ', ';
-            });
-            result = result.substring(0, result?.length - 2);
-        }
-        return result;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ShowTransportTypesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.1", ngImport: i0, type: ShowTransportTypesPipe, name: "showTransportTypes" }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ShowTransportTypesPipe }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ShowTransportTypesPipe, decorators: [{
-            type: Injectable
-        }, {
-            type: Pipe,
-            args: [{ name: 'showTransportTypes' }]
-        }] });
-
 class ResolvePropertyPath {
-    constructor(_showSegmentPipe, _showRolesPipe, _showTransportTypesPipe, _idaReturnPipe, _currencyPipe, _humanizeDurationPipe, _upperCasePipe, _durationPipe) {
-        this._showSegmentPipe = _showSegmentPipe;
-        this._showRolesPipe = _showRolesPipe;
-        this._showTransportTypesPipe = _showTransportTypesPipe;
-        this._idaReturnPipe = _idaReturnPipe;
-        this._currencyPipe = _currencyPipe;
-        this._humanizeDurationPipe = _humanizeDurationPipe;
-        this._upperCasePipe = _upperCasePipe;
-        this._durationPipe = _durationPipe;
-    }
+    /**
+     * Transforms the given object based on the provided path and returns the transformed string.
+     *
+     * @param {any} obj - The object to be transformed.
+     * @param {DisplayOptionItem[]} path - The array of display option items used for transformation.
+     * @return {string} The transformed string.
+     */
     transform(obj, path) {
         let result = '';
         path?.forEach((item) => {
@@ -408,118 +299,44 @@ class ResolvePropertyPath {
             }
             else {
                 if (item?.path) {
-                    let value = UtilsService.resolvePropertyByPath(obj, item.path);
-                    switch (item?.customPipe) {
-                        case CustomPipes.SHOW_SEGMENTS:
-                            value = this._showSegmentPipe.transform(value);
-                            break;
-                        case CustomPipes.DURATION_TIME:
-                            value = this._durationPipe.transform(value);
-                            break;
-                        case CustomPipes.HUMANIZE_DURATION:
-                            value = this._humanizeDurationPipe.transform(value);
-                            break;
-                        case CustomPipes.SHOW_TRANSPORT_TYPES:
-                            value = this._showTransportTypesPipe.transform(value);
-                            break;
-                        case CustomPipes.SHOW_ROLES:
-                            value = this._showRolesPipe.transform(value);
-                            break;
-                        case CustomPipes.IDA_RETURN:
-                            value = this._idaReturnPipe.transform(value);
-                            break;
-                        case CustomPipes.CURRENCY:
-                            value = this._currencyPipe.transform(value);
-                            break;
-                        case CustomPipes.UPPERCASE:
-                            value = this._upperCasePipe.transform(value);
-                            break;
-                        default:
-                            break;
-                    }
-                    result += value;
+                    result += UtilsService.resolvePropertyByPath(obj, item.path);
                 }
             }
         });
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ResolvePropertyPath, deps: [{ token: ShowSegmentsPipe }, { token: ShowRolesPipe }, { token: ShowTransportTypesPipe }, { token: IdaReturnPipe }, { token: i5.CurrencyPipe }, { token: HumanizeDurationPipe }, { token: i5.UpperCasePipe }, { token: DurationTimePipe }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    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" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ResolvePropertyPath, decorators: [{
             type: Pipe,
             args: [{ name: 'resolvePropertyPath' }]
-        }], ctorParameters: function () { return [{ type: ShowSegmentsPipe }, { type: ShowRolesPipe }, { type: ShowTransportTypesPipe }, { type: IdaReturnPipe }, { type: i5.CurrencyPipe }, { type: HumanizeDurationPipe }, { type: i5.UpperCasePipe }, { type: DurationTimePipe }]; } });
+        }] });
 
 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: [DurationTimePipe,
-            HumanizeDurationPipe,
-            I18nFieldPipe,
-            IdaReturnPipe,
-            ResolvePropertyPath,
-            ShowRolesPipe,
-            ShowSegmentsPipe,
-            ShowTransportTypesPipe], imports: [CurrencyPipe,
-            UpperCasePipe], exports: [DurationTimePipe,
-            HumanizeDurationPipe,
-            I18nFieldPipe,
-            IdaReturnPipe,
-            ResolvePropertyPath,
-            ShowRolesPipe,
-            ShowSegmentsPipe,
-            ShowTransportTypesPipe] }); }
+    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: [
-            DurationTimePipe,
-            HumanizeDurationPipe,
             I18nFieldPipe,
-            IdaReturnPipe,
-            ResolvePropertyPath,
-            ShowRolesPipe,
-            ShowSegmentsPipe,
-            ShowTransportTypesPipe,
-            CurrencyPipe,
-            UpperCasePipe
+            ResolvePropertyPath
         ] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: PipesModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
-                        DurationTimePipe,
-                        HumanizeDurationPipe,
                         I18nFieldPipe,
-                        IdaReturnPipe,
-                        ResolvePropertyPath,
-                        ShowRolesPipe,
-                        ShowSegmentsPipe,
-                        ShowTransportTypesPipe,
-                    ],
-                    imports: [
-                        CurrencyPipe,
-                        UpperCasePipe
+                        ResolvePropertyPath
                     ],
                     exports: [
-                        DurationTimePipe,
-                        HumanizeDurationPipe,
                         I18nFieldPipe,
-                        IdaReturnPipe,
-                        ResolvePropertyPath,
-                        ShowRolesPipe,
-                        ShowSegmentsPipe,
-                        ShowTransportTypesPipe
+                        ResolvePropertyPath
                     ],
                     providers: [
-                        DurationTimePipe,
-                        HumanizeDurationPipe,
                         I18nFieldPipe,
-                        IdaReturnPipe,
-                        ResolvePropertyPath,
-                        ShowRolesPipe,
-                        ShowSegmentsPipe,
-                        ShowTransportTypesPipe,
-                        CurrencyPipe,
-                        UpperCasePipe
+                        ResolvePropertyPath
                     ]
                 }]
         }] });
@@ -549,6 +366,7 @@ class GuajiritosGeneralAutocomplete {
         this.showLabel = true;
         this.appearance = 'outline';
         this.color = 'accent';
+        this.subscriptSizing = 'dynamic';
         this.placeholder = 'Seleccione un elemento';
         this.field = ['name'];
         this.filterString = 'filter[$and][name][$like]';
@@ -605,7 +423,7 @@ class GuajiritosGeneralAutocomplete {
                     this.SelectElement.emit(null);
                     this.filteredOptions.set([]);
                     this.propagateChange(null);
-                },
+                }
             });
         }
     }
@@ -657,7 +475,7 @@ class GuajiritosGeneralAutocomplete {
                             this.inputText?.nativeElement?.focus();
                         }, 500);
                     });
-                },
+                }
             });
         }
     }
@@ -687,7 +505,7 @@ class GuajiritosGeneralAutocomplete {
                     this.firstCall.set(false);
                 }
                 this.wasSelected.set(false);
-            },
+            }
         });
     }
     /**
@@ -703,7 +521,7 @@ class GuajiritosGeneralAutocomplete {
                 next: (result) => {
                     this.filteredOptions.set(result?.payload?.data ?? result?.data);
                     this.loading.set(false);
-                },
+                }
             });
         });
     }
@@ -789,37 +607,31 @@ class GuajiritosGeneralAutocomplete {
             this.getAutocompleteByTextHandler(this.getAutocompleteSearchText());
         }
     }
-    /**
-     * Acción al seleccionar un elemento
-     *
-     * @param item - Elemento seleccionado
-     */
-    onSelectElement(item) {
-        this.wasSelected.set(true);
-        this.selectedElement.set(item);
-        this.SelectElement.emit(item);
-        if (this.valueId) {
-            this.propagateChange(typeof item === 'object' ? item?.id : item);
-        }
-        else {
-            this.propagateChange(item);
+    optionSelected($event) {
+        if ($event?.option?.value) {
+            this.wasSelected.set(true);
+            this.selectedElement.set($event.option.value);
+            this.SelectElement.emit($event.option.value);
+            if (this.valueId) {
+                this.propagateChange(typeof $event.option.value === 'object' ? $event.option.value?.id : $event.option.value);
+            }
+            else {
+                this.propagateChange($event.option.value);
+            }
         }
     }
-    ngOnInit() {
-        // this.component.markAllAsTouched();
-    }
     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", 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.ɵ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: [
             {
                 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\" [ngClass]=\"{'without-padding-bottom': withoutPaddingBottom}\" class=\"w-100\"\r\n                [appearance]=\"appearance\" [color]=\"color\">\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\">\r\n    <mat-option *ngFor=\"let option of filteredOptions()\" [value]=\"option\" (onSelectionChange)=\"onSelectElement(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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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$1.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 }); }
+                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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: GuajiritosGeneralAutocomplete, decorators: [{
             type: Component,
@@ -837,14 +649,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImpor
                         NgForOf,
                         NgStyle,
                         PipesModule,
-                        NgTemplateOutlet,
+                        NgTemplateOutlet
                     ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => GuajiritosGeneralAutocomplete),
-                            multi: true,
-                        },
-                    ], template: "<mat-form-field [floatLabel]=\"floatLabel\" [ngClass]=\"{'without-padding-bottom': withoutPaddingBottom}\" class=\"w-100\"\r\n                [appearance]=\"appearance\" [color]=\"color\">\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\">\r\n    <mat-option *ngFor=\"let option of filteredOptions()\" [value]=\"option\" (onSelectionChange)=\"onSelectElement(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"] }]
+                            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: [{
                 type: ViewChild,
                 args: ['inputText', { static: true }]
@@ -864,6 +676,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImpor
                 type: Input
             }], color: [{
                 type: Input
+            }], subscriptSizing: [{
+                type: Input
             }], placeholder: [{
                 type: Input
             }], field: [{
@@ -908,5 +722,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CustomPipes, GENERAL_DISPLAY_OPTIONS, GuajiritosGeneralAutocomplete };
+export { GENERAL_DISPLAY_OPTIONS, GuajiritosGeneralAutocomplete };
 //# sourceMappingURL=guajiritos-general-autocomplete.mjs.map