@jvsoft/utils 0.0.13-alpha.5 → 1.0.0-alpha.10

package/README.md

@@ -58,6 +58,11 @@ ng e2e
 
 Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
 
+## Documentación
+
+- [Directiva JvAutocomplete](./docs/autocomplete.md): Guía detallada de uso, ejemplos y referencia de la API.
+- [Utilidades de Logging](./docs/logging.md): Guía para el uso de logs en desarrollo.
+
 ## Additional Resources
 
 For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/directives/auto-select-first.directive.d.ts

@@ -0,0 +1,13 @@
+import * as i0 from "@angular/core";
+export declare class AutoSelectFirstDirective {
+    private readonly ngControl;
+    private readonly fcName;
+    private readonly toastr;
+    options: import("@angular/core").InputSignal<any[] | null>;
+    jvsIdKey: import("@angular/core").InputSignal<string | string[] | null>;
+    jvsEmptyMsg: import("@angular/core").InputSignal<string>;
+    onAutoSelect: import("@angular/core").OutputEmitterRef<any>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<AutoSelectFirstDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AutoSelectFirstDirective, "[jvsAutoSelectFirst]", never, { "options": { "alias": "jvsAutoSelectFirst"; "required": false; "isSignal": true; }; "jvsIdKey": { "alias": "jvsIdKey"; "required": false; "isSignal": true; }; "jvsEmptyMsg": { "alias": "jvsEmptyMsg"; "required": false; "isSignal": true; }; }, { "onAutoSelect": "onAutoSelect"; }, never, never, true, never>;
+}

package/directives/autocomplete-match-validator.directive.d.ts

@@ -0,0 +1,10 @@
+import { AbstractControl, ValidationErrors, Validator } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare class AutocompleteMatchValidatorDirective implements Validator {
+    opciones: import("@angular/core").InputSignal<any[]>;
+    formControlName: import("@angular/core").InputSignal<any>;
+    idLista: import("@angular/core").InputSignal<string | undefined>;
+    validate(control: AbstractControl): ValidationErrors | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AutocompleteMatchValidatorDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AutocompleteMatchValidatorDirective, "[jvsAutocompleteMatch]", never, { "opciones": { "alias": "jvsAutocompleteMatch"; "required": false; "isSignal": true; }; "formControlName": { "alias": "formControlName"; "required": false; "isSignal": true; }; "idLista": { "alias": "idLista"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/directives/autocomplete.directive.d.ts

@@ -0,0 +1,23 @@
+import { OnInit } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class JvsAutocompleteDirective implements OnInit {
+    private readonly destroyRef;
+    private readonly ngControl;
+    private readonly focus$;
+    data: import("@angular/core").InputSignal<any[] | null>;
+    fields: import("@angular/core").InputSignal<string | string[]>;
+    typeReq: import("@angular/core").InputSignal<string>;
+    queryService: import("@angular/core").InputSignal<any>;
+    minLength: import("@angular/core").InputSignal<number>;
+    dataExtra: import("@angular/core").InputSignal<any>;
+    anonimo: import("@angular/core").InputSignal<boolean>;
+    debounce: import("@angular/core").InputSignal<number>;
+    filtered: import("@angular/core").OutputEmitterRef<any[]>;
+    loading: import("@angular/core").OutputEmitterRef<boolean>;
+    onFocus(): void;
+    ngOnInit(): void;
+    private filterLocal;
+    private fetchApi;
+    static ɵfac: i0.ɵɵFactoryDeclaration<JvsAutocompleteDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<JvsAutocompleteDirective, "[jvsAutocomplete]", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "fields": { "alias": "fields"; "required": false; "isSignal": true; }; "typeReq": { "alias": "typeReq"; "required": false; "isSignal": true; }; "queryService": { "alias": "queryService"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "dataExtra": { "alias": "dataExtra"; "required": false; "isSignal": true; }; "anonimo": { "alias": "anonimo"; "required": false; "isSignal": true; }; "debounce": { "alias": "debounce"; "required": false; "isSignal": true; }; }, { "filtered": "filtered"; "loading": "loading"; }, never, never, true, never>;
+}

package/{src/functions → directives}/index.d.ts

@@ -1,5 +1,5 @@
 /**
  * Generated bundle index. Do not edit.
  */
-/// <amd-module name="@jvsoft/utils/src/functions" />
+/// <amd-module name="@jvsoft/utils/directives" />
 export * from './public-api';

package/directives/popover/popover-listener.directive.d.ts

@@ -0,0 +1,12 @@
+import * as i0 from "@angular/core";
+export declare class JvsPopoverListenerDirective {
+    private readonly popoverService;
+    private readonly elementRef;
+    trigger: import("@angular/core").InputSignal<"hover" | "click" | "focus">;
+    onMouseOver(event: MouseEvent): void;
+    onMouseOut(event: MouseEvent): void;
+    onClick(event: MouseEvent): void;
+    private findPopoverTarget;
+    static ɵfac: i0.ɵɵFactoryDeclaration<JvsPopoverListenerDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<JvsPopoverListenerDirective, "[jvsPopoverListener]", never, { "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/directives/popover/popover-panel.component.d.ts

@@ -0,0 +1,13 @@
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class JvsPopoverPanelComponent {
+    content: import("@angular/core").InputSignal<string | null>;
+    templateContent: import("@angular/core").InputSignal<TemplateRef<any> | null>;
+    context: import("@angular/core").InputSignal<any>;
+    customClass: import("@angular/core").InputSignal<string>;
+    private readonly baseClasses;
+    combinedClasses: import("@angular/core").Signal<string>;
+    isTemplate(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<JvsPopoverPanelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<JvsPopoverPanelComponent, "jvs-popover-panel", never, { "content": { "alias": "content"; "required": false; "isSignal": true; }; "templateContent": { "alias": "templateContent"; "required": false; "isSignal": true; }; "context": { "alias": "context"; "required": false; "isSignal": true; }; "customClass": { "alias": "customClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/directives/popover/popover.directive.d.ts

@@ -0,0 +1,23 @@
+import { OnDestroy, TemplateRef } from '@angular/core';
+import { JvsPopoverTrigger } from './popover.interface';
+import * as i0 from "@angular/core";
+export declare class JvsPopoverDirective implements OnDestroy {
+    private readonly popoverService;
+    private readonly elementRef;
+    private readonly viewContainerRef;
+    content: import("@angular/core").InputSignal<string | TemplateRef<any> | null>;
+    context: import("@angular/core").InputSignal<any>;
+    trigger: import("@angular/core").InputSignal<JvsPopoverTrigger>;
+    position: import("@angular/core").InputSignal<"top" | "bottom" | "left" | "right">;
+    customClass: import("@angular/core").InputSignal<string>;
+    onMouseEnter(): void;
+    onMouseLeave(): void;
+    onClick(): void;
+    onFocus(): void;
+    onBlur(): void;
+    ngOnDestroy(): void;
+    show(): void;
+    hide(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<JvsPopoverDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<JvsPopoverDirective, "[jvsPopover]", never, { "content": { "alias": "jvsPopover"; "required": false; "isSignal": true; }; "context": { "alias": "context"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "customClass": { "alias": "customClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/directives/popover/popover.interface.d.ts

@@ -0,0 +1,8 @@
+export type JvsPopoverTrigger = 'hover' | 'click' | 'focus' | 'manual';
+export interface JvsPopoverConfig {
+    trigger?: JvsPopoverTrigger;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    showDelay?: number;
+    hideDelay?: number;
+    customClass?: string;
+}

package/directives/popover/popover.service.d.ts

@@ -0,0 +1,17 @@
+import { TemplateRef, ViewContainerRef } from '@angular/core';
+import { OverlayRef } from '@angular/cdk/overlay';
+import * as i0 from "@angular/core";
+export declare class JvsPopoverService {
+    private readonly overlay;
+    private readonly overlayPositionBuilder;
+    private overlayRef;
+    open(element: HTMLElement, content: string | TemplateRef<any>, options?: {
+        position?: 'top' | 'bottom' | 'left' | 'right';
+        customClass?: string;
+        viewContainerRef?: ViewContainerRef;
+        context?: any;
+    }): OverlayRef;
+    close(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<JvsPopoverService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<JvsPopoverService>;
+}

package/directives/public-api.d.ts

@@ -0,0 +1,8 @@
+export * from './autocomplete-match-validator.directive';
+export * from './popover/popover.directive';
+export * from './popover/popover-listener.directive';
+export * from './popover/popover.interface';
+export * from './popover/popover-panel.component';
+export * from './popover/popover.service';
+export * from './autocomplete.directive';
+export * from './auto-select-first.directive';

package/fesm2022/jvsoft-utils-directives.mjs

@@ -0,0 +1,459 @@
+import * as i0 from '@angular/core';
+import { input, forwardRef, Directive, computed, Component, inject, TemplateRef, Injectable, ElementRef, ViewContainerRef, HostListener, DestroyRef, output, effect, untracked } from '@angular/core';
+import { NG_VALIDATORS, NgControl, FormControlName } from '@angular/forms';
+import { Overlay, OverlayPositionBuilder } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { Subject, merge, debounceTime, startWith, distinctUntilChanged, tap, switchMap, of, map, finalize } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ToastrService } from 'ngx-toastr';
+
+class AutocompleteMatchValidatorDirective {
+    opciones = input([], { alias: 'jvsAutocompleteMatch' });
+    formControlName = input();
+    idLista = input();
+    validate(control) {
+        const idLista = this.idLista() ?? this.formControlName();
+        const value = control.value;
+        const opciones = this.opciones();
+        if (!value)
+            return null;
+        if (!opciones) {
+            console.error('Debe definir opciones para el validador jvsAutocompleteMatch');
+            return { itemSelected: true };
+        }
+        const encontrado = opciones.some(item => typeof value === 'object'
+            ? item[idLista] === value[idLista]
+            : item[idLista] === value);
+        return encontrado ? null : { itemSelected: true };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AutocompleteMatchValidatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.14", type: AutocompleteMatchValidatorDirective, isStandalone: true, selector: "[jvsAutocompleteMatch]", inputs: { opciones: { classPropertyName: "opciones", publicName: "jvsAutocompleteMatch", isSignal: true, isRequired: false, transformFunction: null }, formControlName: { classPropertyName: "formControlName", publicName: "formControlName", isSignal: true, isRequired: false, transformFunction: null }, idLista: { classPropertyName: "idLista", publicName: "idLista", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => AutocompleteMatchValidatorDirective),
+                multi: true,
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AutocompleteMatchValidatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[jvsAutocompleteMatch]',
+                    providers: [
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => AutocompleteMatchValidatorDirective),
+                            multi: true,
+                        },
+                    ],
+                    standalone: true
+                }]
+        }] });
+
+class JvsPopoverPanelComponent {
+    content = input(null);
+    templateContent = input(null);
+    context = input(null);
+    customClass = input('');
+    baseClasses = 'bg-white shadow-md rounded border-sm border-gray-700 p-1 mat-elevation-z4';
+    combinedClasses = computed(() => {
+        return `${this.baseClasses} ${this.customClass()}`.trim();
+    });
+    isTemplate() {
+        return !!this.templateContent();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: JvsPopoverPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: JvsPopoverPanelComponent, isStandalone: true, selector: "jvs-popover-panel", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, templateContent: { classPropertyName: "templateContent", publicName: "templateContent", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+        <div [class]="combinedClasses()">
+            <ng-container *ngIf="isTemplate(); else htmlContent">
+                <ng-container *ngTemplateOutlet="templateContent(); context: context()"></ng-container>
+            </ng-container>
+            <ng-template #htmlContent>
+                <div [innerHTML]="content()"></div>
+            </ng-template>
+        </div>
+    `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: JvsPopoverPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jvs-popover-panel', standalone: true, imports: [CommonModule], template: `
+        <div [class]="combinedClasses()">
+            <ng-container *ngIf="isTemplate(); else htmlContent">
+                <ng-container *ngTemplateOutlet="templateContent(); context: context()"></ng-container>
+            </ng-container>
+            <ng-template #htmlContent>
+                <div [innerHTML]="content()"></div>
+            </ng-template>
+        </div>
+    `, styles: [":host{display:block}\n"] }]
+        }] });
+
+class JvsPopoverService {
+    overlay = inject(Overlay);
+    overlayPositionBuilder = inject(OverlayPositionBuilder);
+    overlayRef = null;
+    open(element, content, options = {}) {
+        this.close();
+        const positionStrategy = this.overlayPositionBuilder
+            .flexibleConnectedTo(element)
+            .withPositions([
+            {
+                originX: 'center',
+                originY: options.position === 'top' ? 'top' : 'bottom',
+                overlayX: 'center',
+                overlayY: options.position === 'top' ? 'bottom' : 'top',
+                offsetY: options.position === 'top' ? -8 : 8
+            }
+        ]);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            hasBackdrop: false
+        });
+        const portal = new ComponentPortal(JvsPopoverPanelComponent, options.viewContainerRef);
+        const containerRef = this.overlayRef.attach(portal);
+        if (content instanceof TemplateRef) {
+            containerRef.setInput('templateContent', content);
+        }
+        else {
+            containerRef.setInput('content', content);
+        }
+        if (options.customClass) {
+            containerRef.setInput('customClass', options.customClass);
+        }
+        if (options.context) {
+            containerRef.setInput('context', options.context);
+        }
+        return this.overlayRef;
+    }
+    close() {
+        if (this.overlayRef) {
+            this.overlayRef.detach();
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: JvsPopoverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: JvsPopoverService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: JvsPopoverService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class JvsPopoverDirective {
+    popoverService = inject(JvsPopoverService);
+    elementRef = inject(ElementRef);
+    viewContainerRef = inject(ViewContainerRef);
+    content = input(null, { alias: 'jvsPopover' });
+    context = input(null);
+    trigger = input('hover');
+    position = input('bottom');
+    customClass = input('');
+    onMouseEnter() {
+        if (this.trigger() === 'hover') {
+            this.show();
+        }
+    }
+    onMouseLeave() {
+        if (this.trigger() === 'hover') {
+            this.hide();
+        }
+    }
+    onClick() {
+        if (this.trigger() === 'click') {
+            this.show();
+        }
+    }
+    onFocus() {
+        if (this.trigger() === 'focus') {
+            this.show();
+        }
+    }
+    onBlur() {
+        if (this.trigger() === 'focus') {
+            this.hide();
+        }
+    }
+    ngOnDestroy() {
+        this.hide();
+    }
+    show() {
+        const content = this.content();
+        if (!content)
+            return;
+        this.popoverService.open(this.elementRef.nativeElement, content, {
+            position: this.position(),
+            customClass: this.customClass(),
+            viewContainerRef: this.viewContainerRef,
+            context: this.context()
+        });
+    }
+    hide() {
+        this.popoverService.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: JvsPopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.14", type: JvsPopoverDirective, isStandalone: true, selector: "[jvsPopover]", inputs: { content: { classPropertyName: "content", publicName: "jvsPopover", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "click": "onClick()", "focusin": "onFocus()", "focusout": "onBlur()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: JvsPopoverDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[jvsPopover]',
+                    standalone: true
+                }]
+        }], propDecorators: { onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }], onFocus: [{
+                type: HostListener,
+                args: ['focusin']
+            }], onBlur: [{
+                type: HostListener,
+                args: ['focusout']
+            }] } });
+
+class JvsPopoverListenerDirective {
+    popoverService = inject(JvsPopoverService);
+    elementRef = inject(ElementRef);
+    trigger = input('hover');
+    onMouseOver(event) {
+        if (this.trigger() !== 'hover')
+            return;
+        const target = this.findPopoverTarget(event.target);
+        if (target) {
+            const content = target.getAttribute('data-jvs-popover');
+            if (content) {
+                this.popoverService.open(target, content, {
+                    position: target.getAttribute('data-jvs-position') || 'bottom',
+                    customClass: target.getAttribute('data-jvs-class') || ''
+                });
+            }
+        }
+    }
+    onMouseOut(event) {
+        if (this.trigger() !== 'hover')
+            return;
+        this.popoverService.close();
+    }
+    onClick(event) {
+        if (this.trigger() !== 'click')
+            return;
+        const target = this.findPopoverTarget(event.target);
+        if (target) {
+            const content = target.getAttribute('data-jvs-popover');
+            if (content) {
+                this.popoverService.open(target, content, {
+                    position: target.getAttribute('data-jvs-position') || 'bottom',
+                    customClass: target.getAttribute('data-jvs-class') || ''
+                });
+            }
+        }
+    }
+    findPopoverTarget(el) {
+        while (el && el !== this.elementRef.nativeElement) {
+            if (el.hasAttribute('data-jvs-popover')) {
+                return el;
+            }
+            el = el.parentElement;
+        }
+        return null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: JvsPopoverListenerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.14", type: JvsPopoverListenerDirective, isStandalone: true, selector: "[jvsPopoverListener]", inputs: { trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseover": "onMouseOver($event)", "mouseout": "onMouseOut($event)", "click": "onClick($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: JvsPopoverListenerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[jvsPopoverListener]',
+                    standalone: true
+                }]
+        }], propDecorators: { onMouseOver: [{
+                type: HostListener,
+                args: ['mouseover', ['$event']]
+            }], onMouseOut: [{
+                type: HostListener,
+                args: ['mouseout', ['$event']]
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+class JvsAutocompleteDirective {
+    destroyRef = inject(DestroyRef);
+    ngControl = inject(NgControl, { optional: true });
+    focus$ = new Subject();
+    // Signal-based Inputs
+    data = input(null);
+    fields = input('');
+    typeReq = input('');
+    queryService = input(null);
+    minLength = input(3);
+    dataExtra = input({});
+    anonimo = input(false);
+    debounce = input(300);
+    // Modern Outputs
+    filtered = output();
+    loading = output();
+    onFocus() {
+        this.focus$.next();
+    }
+    ngOnInit() {
+        const control = this.ngControl;
+        if (!control || !control.valueChanges) {
+            console.warn('JvsAutocompleteDirective: No se encontró ngControl o valueChanges. Asegúrate de que el input tenga un formControl o formControlName.');
+            return;
+        }
+        // Si es data local, bajamos el debounce por defecto a 0 si no se ha especificado
+        const isLocal = this.data() && !this.typeReq();
+        const actualDebounce = (isLocal && this.debounce() === 300) ? 0 : this.debounce();
+        merge(control.valueChanges.pipe(debounceTime(actualDebounce)), this.focus$).pipe(takeUntilDestroyed(this.destroyRef), startWith(control.value), distinctUntilChanged(), tap(() => {
+            if (this.typeReq())
+                this.loading.emit(true);
+        }), switchMap(() => {
+            const value = control.value;
+            // Si el valor es un objeto (proviene de seleccionar una opción), no volvemos a filtrar
+            if (typeof value === 'object' && value !== null) {
+                if (this.typeReq())
+                    this.loading.emit(false);
+                return of(null);
+            }
+            if (this.typeReq() && this.queryService()) {
+                return this.fetchApi(value?.toString() || '');
+            }
+            else if (this.data()) {
+                const res = this.filterLocal(value?.toString() || '');
+                return of(res);
+            }
+            if (this.typeReq())
+                this.loading.emit(false);
+            return of([]);
+        })).subscribe((result) => {
+            if (result !== null) {
+                this.filtered.emit(result);
+            }
+        });
+    }
+    filterLocal(value) {
+        const data = this.data();
+        if (!value)
+            return data || [];
+        const search = value.toLowerCase();
+        const rawFields = this.fields();
+        const fields = Array.isArray(rawFields) ? rawFields : [rawFields];
+        return (data || []).filter(item => {
+            return fields.some(field => {
+                const val = item[field];
+                return val && val.toString().toLowerCase().includes(search);
+            });
+        });
+    }
+    fetchApi(value) {
+        const typeReq = this.typeReq();
+        const queryService = this.queryService();
+        if (!value || value.length < this.minLength()) {
+            this.loading.emit(false);
+            return of([]);
+        }
+        return queryService.getDataMethod('GET', typeReq, {
+            ...this.dataExtra(),
+            txtBuscar: value
+        }, this.anonimo()).pipe(map((res) => res[typeReq] ?? []), finalize(() => this.loading.emit(false)));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: JvsAutocompleteDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.14", type: JvsAutocompleteDirective, isStandalone: true, selector: "[jvsAutocomplete]", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null }, typeReq: { classPropertyName: "typeReq", publicName: "typeReq", isSignal: true, isRequired: false, transformFunction: null }, queryService: { classPropertyName: "queryService", publicName: "queryService", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, dataExtra: { classPropertyName: "dataExtra", publicName: "dataExtra", isSignal: true, isRequired: false, transformFunction: null }, anonimo: { classPropertyName: "anonimo", publicName: "anonimo", isSignal: true, isRequired: false, transformFunction: null }, debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filtered: "filtered", loading: "loading" }, host: { listeners: { "focus": "onFocus()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: JvsAutocompleteDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[jvsAutocomplete]',
+                    standalone: true
+                }]
+        }], propDecorators: { onFocus: [{
+                type: HostListener,
+                args: ['focus']
+            }] } });
+
+class AutoSelectFirstDirective {
+    ngControl = inject(NgControl, { optional: true });
+    fcName = inject(FormControlName, { optional: true });
+    toastr = inject(ToastrService, { optional: true });
+    // Inputs using Signals
+    options = input(null, { alias: 'jvsAutoSelectFirst' });
+    jvsIdKey = input(null);
+    jvsEmptyMsg = input('Lista sin elementos');
+    onAutoSelect = output();
+    constructor() {
+        effect(() => {
+            const currentOptions = this.options();
+            const idKey = this.jvsIdKey();
+            const emptyMsg = this.jvsEmptyMsg();
+            if (currentOptions === null)
+                return;
+            const optionsArray = Array.isArray(currentOptions) ? currentOptions : [];
+            if (optionsArray.length > 0) {
+                untracked(() => {
+                    const control = this.ngControl?.control;
+                    const currentValue = control?.value;
+                    // Only autoselect if empty
+                    if (control && (currentValue === null || currentValue === undefined || currentValue === '')) {
+                        const firstItem = optionsArray[0];
+                        let valueToSet;
+                        // Resolve key
+                        let effectiveKey = idKey;
+                        // Default to formControlName if not provided
+                        if (!effectiveKey && this.fcName) {
+                            effectiveKey = this.fcName.name;
+                        }
+                        if (effectiveKey) {
+                            if (Array.isArray(effectiveKey)) {
+                                // Composite key: build an object with the specified keys
+                                valueToSet = {};
+                                effectiveKey.forEach(key => {
+                                    valueToSet[key] = firstItem[key];
+                                });
+                            }
+                            else {
+                                valueToSet = firstItem[effectiveKey];
+                            }
+                        }
+                        else {
+                            // Use whole item if no key resolution possible
+                            valueToSet = firstItem;
+                        }
+                        control.setValue(valueToSet);
+                        this.onAutoSelect.emit(firstItem);
+                    }
+                });
+            }
+            else if (emptyMsg && this.toastr) {
+                this.toastr.warning(emptyMsg, 'Filtrado');
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AutoSelectFirstDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.14", type: AutoSelectFirstDirective, isStandalone: true, selector: "[jvsAutoSelectFirst]", inputs: { options: { classPropertyName: "options", publicName: "jvsAutoSelectFirst", isSignal: true, isRequired: false, transformFunction: null }, jvsIdKey: { classPropertyName: "jvsIdKey", publicName: "jvsIdKey", isSignal: true, isRequired: false, transformFunction: null }, jvsEmptyMsg: { classPropertyName: "jvsEmptyMsg", publicName: "jvsEmptyMsg", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAutoSelect: "onAutoSelect" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AutoSelectFirstDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[jvsAutoSelectFirst]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AutoSelectFirstDirective, AutocompleteMatchValidatorDirective, JvsAutocompleteDirective, JvsPopoverDirective, JvsPopoverListenerDirective, JvsPopoverPanelComponent, JvsPopoverService };
+//# sourceMappingURL=jvsoft-utils-directives.mjs.map