@guajiritos/general-autocomplete 0.1.8 → 1.0.0

package/fesm2022/guajiritos-general-autocomplete.mjs

@@ -1,5 +1,7 @@
+import * as i1 from '@guajiritos/services';
+import { DisplayOptionItemType, I18nPipe } from '@guajiritos/services';
 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';
@@ -9,8 +11,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';
@@ -19,387 +20,49 @@ import * as i9 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 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 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: [
         {
-            type: 'path',
+            type: DisplayOptionItemType.PATH,
             path: ['name']
         }
     ],
     applyTranslate: true
 };
 
-class AutocompleteService {
-    constructor(_httpClient) {
-        this._httpClient = _httpClient;
-        this.httpOptions = {};
-    }
-    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);
-        });
-    }
-    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;
-    }
-    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 };
-                }
-            }
-        }
-    }
-    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 {
     /**
-     * Convierte el tiempo pasado por parámetro en horas y minutos
+     * Resolves the value of a property in an object by providing a path.
      *
-     * @param time - Tiempo
-     * @returns Devuelve las horas y minutos
+     * @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 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'
-     *
-     * @param time - Tiempo
-     */
-    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;
         }, 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: "16.2.12", ngImport: i0, type: UtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", 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: "16.2.12", ngImport: i0, type: UtilsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
         }] });
 
-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 {
-    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 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,119 +71,20 @@ 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.ɵ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: "16.2.12", ngImport: i0, type: ResolvePropertyPath, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", 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: "16.2.12", 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.ɵ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
-        ] }); }
-}
-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
-                    ],
-                    exports: [
-                        DurationTimePipe,
-                        HumanizeDurationPipe,
-                        I18nFieldPipe,
-                        IdaReturnPipe,
-                        ResolvePropertyPath,
-                        ShowRolesPipe,
-                        ShowSegmentsPipe,
-                        ShowTransportTypesPipe
-                    ],
-                    providers: [
-                        DurationTimePipe,
-                        HumanizeDurationPipe,
-                        I18nFieldPipe,
-                        IdaReturnPipe,
-                        ResolvePropertyPath,
-                        ShowRolesPipe,
-                        ShowSegmentsPipe,
-                        ShowTransportTypesPipe,
-                        CurrencyPipe,
-                        UpperCasePipe
-                    ]
+                    name: 'resolvePropertyPath',
+                    standalone: true
                 }]
         }] });
 
@@ -535,7 +99,6 @@ class GuajiritosGeneralAutocomplete {
         this.selectedElement = signal(null);
         this._url = signal(null);
         this.restrictionsFilters = signal([]);
-        this.validators = signal([]);
         this.disabledButton = signal(false);
         this.loading = signal(false);
         this.required = signal(false);
@@ -550,6 +113,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]';
@@ -606,7 +170,7 @@ class GuajiritosGeneralAutocomplete {
                     this.SelectElement.emit(null);
                     this.filteredOptions.set([]);
                     this.propagateChange(null);
-                },
+                }
             });
         }
     }
@@ -658,24 +222,8 @@ class GuajiritosGeneralAutocomplete {
                             this.inputText?.nativeElement?.focus();
                         }, 500);
                     });
-                },
-            });
-        }
-    }
-    /**
-     * Set custom validators for autocomplete
-     *
-     * @param validators - A list of customs validators
-     */
-    set customValidators(validators) {
-        if (validators?.length) {
-            validators.forEach((validator) => {
-                this.component.addValidators(validator.validator);
+                }
             });
-            this.validators.set(validators);
-        }
-        else {
-            this.validators.set([]);
         }
     }
     /**
@@ -704,7 +252,7 @@ class GuajiritosGeneralAutocomplete {
                     this.firstCall.set(false);
                 }
                 this.wasSelected.set(false);
-            },
+            }
         });
     }
     /**
@@ -720,7 +268,7 @@ class GuajiritosGeneralAutocomplete {
                 next: (result) => {
                     this.filteredOptions.set(result?.payload?.data ?? result?.data);
                     this.loading.set(false);
-                },
+                }
             });
         });
     }
@@ -806,36 +354,33 @@ 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);
+            }
         }
     }
     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", customValidators: "customValidators" }, outputs: { SelectElement: "SelectElement" }, providers: [
+    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 }); }
+    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", 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.hasError('required')\">\r\n    {{'Este campo es requerido.' | translate}}\r\n  </mat-error>\r\n\r\n  <mat-error *ngIf=\"component.hasError('invalidSelection')\">\r\n    {{'Debe seleccionar un elemento.' | translate}}\r\n  </mat-error>\r\n\r\n  <ng-container *ngFor=\"let validator of validators()\">\r\n    <mat-error *ngIf=\"component.hasError(validator.key)\">\r\n      {{validator.message | translate}}\r\n    </mat-error>\r\n  </ng-container>\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 | 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: ["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: "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: "16.2.12", ngImport: i0, type: GuajiritosGeneralAutocomplete, decorators: [{
             type: Component,
             args: [{ selector: 'guajiritos-general-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         MatFormFieldModule,
@@ -850,16 +395,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImpor
                         NgIf,
                         NgForOf,
                         NgStyle,
-                        PipesModule,
                         NgTemplateOutlet,
+                        I18nPipe,
+                        ResolvePropertyPath
                     ], 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.hasError('required')\">\r\n    {{'Este campo es requerido.' | translate}}\r\n  </mat-error>\r\n\r\n  <mat-error *ngIf=\"component.hasError('invalidSelection')\">\r\n    {{'Debe seleccionar un elemento.' | translate}}\r\n  </mat-error>\r\n\r\n  <ng-container *ngFor=\"let validator of validators()\">\r\n    <mat-error *ngIf=\"component.hasError(validator.key)\">\r\n      {{validator.message | translate}}\r\n    </mat-error>\r\n  </ng-container>\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: [{
+                            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 | 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: function () { return [{ type: i1.AutocompleteService }, { type: i0.NgZone }, { type: i2.TranslateService }]; }, propDecorators: { inputText: [{
                 type: ViewChild,
                 args: ['inputText', { static: true }]
             }], floatLabel: [{
@@ -878,6 +424,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImpor
                 type: Input
             }], color: [{
                 type: Input
+            }], subscriptSizing: [{
+                type: Input
             }], placeholder: [{
                 type: Input
             }], field: [{
@@ -912,8 +460,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImpor
                 type: Input
             }], doFocus: [{
                 type: Input
-            }], customValidators: [{
-                type: Input
             }] } });
 
 /*
@@ -924,5 +470,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