openiis-ui
Version:
Una librería moderna de componentes UI para Angular con temas personalizables
115 lines (114 loc) • 4.12 kB
TypeScript
import { EventEmitter, OnInit, OnChanges, ChangeDetectorRef, ElementRef } from '@angular/core';
import * as i0 from "@angular/core";
/**
* Interface para las opciones del dropdown con búsqueda
*/
export interface SearchableDropdownOption {
value: string;
label: string;
description?: string;
}
/**
* Tamaños disponibles para el dropdown con búsqueda
*/
export type SearchableDropdownSize = 'sm' | 'md' | 'lg';
export declare class OpeniisSearchableDropdownComponent implements OnInit, OnChanges {
private cdr;
/** Referencia al input de búsqueda */
searchInput?: ElementRef<HTMLInputElement>;
/** Tamaño del dropdown */
size: SearchableDropdownSize;
/** Opciones del dropdown */
options: SearchableDropdownOption[];
/** Valor actualmente seleccionado */
selectedValue: string;
/** Placeholder del input */
placeholder: string;
/** Texto del tooltip */
tooltip?: string;
/** Estado deshabilitado */
disabled: boolean;
/** Permite búsqueda por descripción también */
searchInDescription: boolean;
/** Variante del dropdown */
variant: 'default' | 'danger';
/** Posición del tooltip */
tooltipPosition: 'top' | 'bottom' | 'left' | 'right';
/** Emite cuando cambia la selección */
selectionChanged: EventEmitter<string>;
/** Emite cuando cambia el término de búsqueda */
searchChanged: EventEmitter<string>;
/** Estado del dropdown */
isOpen: boolean;
/** Término de búsqueda actual */
searchTerm: string;
/** Opciones filtradas */
filteredOptions: SearchableDropdownOption[];
/** Índice de la opción resaltada */
highlightedIndex: number;
/** Estado del tooltip */
showTooltip: boolean;
/** Valor para mostrar en el input */
displayValue: string;
constructor(cdr: ChangeDetectorRef);
ngOnInit(): void;
ngOnChanges(): void;
/**
* Maneja el cambio en el input de búsqueda
*/
onSearchChange(event: Event): void;
/**
* Filtra las opciones según el término de búsqueda
*/
private filterOptions;
/**
* Selecciona una opción
*/
selectOption(option: SearchableDropdownOption, event?: Event): void;
/**
* Alterna el estado del dropdown
*/
toggleDropdown(event?: Event): void;
/**
* Maneja el foco del input
*/
onFocus(): void;
/**
* Maneja cuando se pierde el foco
*/
onBlur(): void;
/**
* Maneja las teclas de navegación
*/
onKeyDown(event: KeyboardEvent): void;
/**
* Navega hacia abajo en la lista
*/
private navigateDown;
/**
* Navega hacia arriba en la lista
*/
private navigateUp;
/**
* Selecciona la opción resaltada
*/
private selectHighlightedOption;
/**
* Actualiza el valor mostrado en el input
*/
private updateDisplayValue;
/**
* Obtiene la clase CSS según el tamaño configurado
*/
getSizeClass(): string;
/** Muestra el tooltip */
onMouseEnter(): void;
/** Oculta el tooltip */
onMouseLeave(): void;
/**
* Escucha clics fuera del componente para cerrarlo
*/
onDocumentClick(event: Event): void;
static ɵfac: i0.ɵɵFactoryDeclaration<OpeniisSearchableDropdownComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<OpeniisSearchableDropdownComponent, "openiis-searchable-dropdown", never, { "size": { "alias": "size"; "required": false; }; "options": { "alias": "options"; "required": false; }; "selectedValue": { "alias": "selectedValue"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "searchInDescription": { "alias": "searchInDescription"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; }; }, { "selectionChanged": "selectionChanged"; "searchChanged": "searchChanged"; }, never, never, true, never>;
}