@telcomdev/ui 0.1.9 → 0.1.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telcomdev/ui",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "Librería UI reutilizable para los sistemas TelcomDev.",
   "keywords": [
     "angular",
@@ -47,6 +47,7 @@
     "rxjs": "~7.8.0"
   },
   "dependencies": {
+    "pdfjs-dist": "^6.1.200",
     "tslib": "^2.3.0"
   },
   "sideEffects": false,

package/types/telcomdev-ui.d.ts

@@ -2,7 +2,7 @@ import * as _angular_core from '@angular/core';
 import { AfterContentChecked, EventEmitter, ModelSignal, OutputEmitterRef, OnChanges, OnDestroy, SimpleChanges, InjectionToken, Type, AfterViewInit, TemplateRef, AfterContentInit } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { FormCheckboxControl, WithOptionalFieldTree, DisabledReason, ValidationError, FormValueControl } from '@angular/forms/signals';
-import { ScrollStrategy, ConnectedPosition } from '@angular/cdk/overlay';
+import { ScrollStrategy, CdkConnectedOverlay, ConnectedPosition } from '@angular/cdk/overlay';
 import { Observable } from 'rxjs';
 import { DialogRef } from '@angular/cdk/dialog';
 import * as _telcomdev_ui from '@telcomdev/ui';
@@ -127,14 +127,28 @@ declare class TdCheckbox implements ControlValueAccessor, FormCheckboxControl {
 }
 
 type TdDataTableAlineacion = 'inicio' | 'centro' | 'fin';
-type TdDataTableTipoColumna = 'texto' | 'numero' | 'booleano' | 'estado' | 'chip';
+type TdDataTableTipoColumna = 'texto' | 'numero' | 'decimal' | 'moneda' | 'porcentaje' | 'fecha' | 'fechaHora' | 'hora' | 'booleano' | 'estado' | 'chip' | 'imagen';
 type TdDataTableTono = 'neutro' | 'primario' | 'exito' | 'advertencia' | 'peligro';
+type TdDataTableImagenForma = 'cuadrada' | 'redondeada' | 'circular';
+interface TdDataTableImagenConfig<T> {
+    src?: (valor: unknown, fila: T, indice: number) => string | null | undefined;
+    alt?: (valor: unknown, fila: T, indice: number) => string;
+    placeholder?: string;
+    forma?: TdDataTableImagenForma;
+    clickeable?: boolean;
+}
 interface TdDataTableColumna<T> {
     clave: keyof T & string;
     encabezado: string;
     ancho?: string;
     tipo?: TdDataTableTipoColumna;
     alineacion?: TdDataTableAlineacion;
+    imagen?: TdDataTableImagenConfig<T>;
+    locale?: string;
+    moneda?: string;
+    decimales?: number;
+    formatoFecha?: Intl.DateTimeFormatOptions;
+    formatoNumero?: Intl.NumberFormatOptions;
     formatear?: (valor: unknown, fila: T, indice: number) => string;
     tono?: (valor: unknown, fila: T) => TdDataTableTono;
 }
@@ -143,6 +157,7 @@ interface TdDataTableAccion<T> {
     etiqueta: string;
     icono: string | ((fila: T) => string);
     tono?: TdDataTableTono | ((fila: T) => TdDataTableTono);
+    condicion?: (fila: T) => boolean;
     visible?: (fila: T) => boolean;
     deshabilitada?: (fila: T) => boolean;
 }
@@ -151,6 +166,13 @@ interface TdDataTableAccionEvento<T> {
     fila: T;
     indice: number;
 }
+interface TdDataTableImagenEvento<T> {
+    columna: TdDataTableColumna<T>;
+    fila: T;
+    indice: number;
+    src: string;
+    alt: string;
+}
 interface TdDataTableBoton {
     id: string;
     etiqueta: string;
@@ -160,8 +182,13 @@ interface TdDataTableBoton {
     deshabilitado?: boolean;
 }
 
+interface TdDataTableImagenActiva {
+    src: string;
+    alt: string;
+}
 declare class TdDataTable<T extends object> implements OnChanges, OnDestroy {
     private viewport?;
+    private imagenDialog?;
     datos: T[];
     columnas: TdDataTableColumna<T>[];
     acciones: TdDataTableAccion<T>[];
@@ -183,9 +210,11 @@ declare class TdDataTable<T extends object> implements OnChanges, OnDestroy {
     debounceBusqueda: number;
     readonly busquedaChange: EventEmitter<string>;
     readonly accion: EventEmitter<TdDataTableAccionEvento<T>>;
+    readonly imagenClick: EventEmitter<TdDataTableImagenEvento<T>>;
     readonly botonClick: EventEmitter<TdDataTableBoton>;
     readonly cargarMas: EventEmitter<void>;
     protected busqueda: string;
+    protected imagenActiva: TdDataTableImagenActiva | null;
     private timeoutBusqueda;
     private datosAnteriores;
     private recalculoPendiente;
@@ -198,6 +227,9 @@ declare class TdDataTable<T extends object> implements OnChanges, OnDestroy {
     protected limpiarBusqueda(): void;
     protected valor(fila: T, clave: keyof T & string): unknown;
     protected textoCelda(columna: TdDataTableColumna<T>, fila: T, indice: number): string;
+    protected imagenSrc(columna: TdDataTableColumna<T>, fila: T, indice: number): string;
+    protected imagenAlt(columna: TdDataTableColumna<T>, fila: T, indice: number): string;
+    protected imagenForma(columna: TdDataTableColumna<T>): string;
     protected tonoCelda(columna: TdDataTableColumna<T>, fila: T): TdDataTableTono;
     protected accionesVisibles(fila: T): TdDataTableAccion<T>[];
     protected iconoAccion(accion: TdDataTableAccion<T>, fila: T): string;
@@ -205,6 +237,9 @@ declare class TdDataTable<T extends object> implements OnChanges, OnDestroy {
     protected botonesVisibles(): TdDataTableBoton[];
     protected usaVirtualizacion(): boolean;
     protected ejecutarAccion(accion: TdDataTableAccion<T>, fila: T, indice: number): void;
+    protected abrirImagen(columna: TdDataTableColumna<T>, fila: T, indice: number): void;
+    protected cerrarImagen(): void;
+    protected cerrarImagenSiBackdrop(event: MouseEvent): void;
     protected marcarScrollUsuario(): void;
     protected alDesplazarViewport(): void;
     protected alDesplazarLista(event: Event): void;
@@ -213,8 +248,11 @@ declare class TdDataTable<T extends object> implements OnChanges, OnDestroy {
     private debeVolverAlInicio;
     private claveFila;
     private intentarCargarMas;
+    private formatearFecha;
+    private normalizarFecha;
+    private formatearNumero;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TdDataTable<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TdDataTable<any>, "td-data-table", never, { "datos": { "alias": "datos"; "required": false; }; "columnas": { "alias": "columnas"; "required": false; }; "acciones": { "alias": "acciones"; "required": false; }; "botones": { "alias": "botones"; "required": false; }; "total": { "alias": "total"; "required": false; }; "cargando": { "alias": "cargando"; "required": false; }; "puedeCargarMas": { "alias": "puedeCargarMas"; "required": false; }; "virtualizar": { "alias": "virtualizar"; "required": false; }; "virtualizarDesde": { "alias": "virtualizarDesde"; "required": false; }; "itemSize": { "alias": "itemSize"; "required": false; }; "filasAntesDeCargar": { "alias": "filasAntesDeCargar"; "required": false; }; "altura": { "alias": "altura"; "required": false; }; "campoId": { "alias": "campoId"; "required": false; }; "oscuro": { "alias": "oscuro"; "required": false; }; "mostrarBusqueda": { "alias": "mostrarBusqueda"; "required": false; }; "placeholderBusqueda": { "alias": "placeholderBusqueda"; "required": false; }; "textoVacio": { "alias": "textoVacio"; "required": false; }; "descripcionVacio": { "alias": "descripcionVacio"; "required": false; }; "debounceBusqueda": { "alias": "debounceBusqueda"; "required": false; }; }, { "busquedaChange": "busquedaChange"; "accion": "accion"; "botonClick": "botonClick"; "cargarMas": "cargarMas"; }, never, ["[tdDataTableFilters]", "[tdDataTableActions]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TdDataTable<any>, "td-data-table", never, { "datos": { "alias": "datos"; "required": false; }; "columnas": { "alias": "columnas"; "required": false; }; "acciones": { "alias": "acciones"; "required": false; }; "botones": { "alias": "botones"; "required": false; }; "total": { "alias": "total"; "required": false; }; "cargando": { "alias": "cargando"; "required": false; }; "puedeCargarMas": { "alias": "puedeCargarMas"; "required": false; }; "virtualizar": { "alias": "virtualizar"; "required": false; }; "virtualizarDesde": { "alias": "virtualizarDesde"; "required": false; }; "itemSize": { "alias": "itemSize"; "required": false; }; "filasAntesDeCargar": { "alias": "filasAntesDeCargar"; "required": false; }; "altura": { "alias": "altura"; "required": false; }; "campoId": { "alias": "campoId"; "required": false; }; "oscuro": { "alias": "oscuro"; "required": false; }; "mostrarBusqueda": { "alias": "mostrarBusqueda"; "required": false; }; "placeholderBusqueda": { "alias": "placeholderBusqueda"; "required": false; }; "textoVacio": { "alias": "textoVacio"; "required": false; }; "descripcionVacio": { "alias": "descripcionVacio"; "required": false; }; "debounceBusqueda": { "alias": "debounceBusqueda"; "required": false; }; }, { "busquedaChange": "busquedaChange"; "accion": "accion"; "imagenClick": "imagenClick"; "botonClick": "botonClick"; "cargarMas": "cargarMas"; }, never, ["[tdDataTableFilters]", "[tdDataTableActions]"], true, never>;
 }
 
 interface TdDateRange {
@@ -232,6 +270,7 @@ interface CalendarDay {
     disabled: boolean;
 }
 type CalendarView = 'dias' | 'meses' | 'anios';
+type TdDatePickerLimit = string | number | TdDateRange | null | undefined;
 declare class TdDatePicker implements ControlValueAccessor, FormValueControl<TdDatePickerValue> {
     private readonly cdr;
     private readonly formBridge;
@@ -258,8 +297,8 @@ declare class TdDatePicker implements ControlValueAccessor, FormValueControl<TdD
     readonly touch: _angular_core.OutputEmitterRef<void>;
     readonly error: _angular_core.InputSignal<string>;
     readonly errorDisplay: _angular_core.InputSignal<TdErrorDisplay>;
-    minDate: string | number | null | undefined;
-    maxDate: string | number | null | undefined;
+    minDate: TdDatePickerLimit;
+    maxDate: TdDatePickerLimit;
     clearable: boolean;
     dark: boolean;
     readonly value: _angular_core.ModelSignal<TdDatePickerValue>;
@@ -421,6 +460,66 @@ declare class TdFooter {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TdFooter, "td-footer", never, { "empresa": { "alias": "empresa"; "required": false; }; "texto": { "alias": "texto"; "required": false; }; "version": { "alias": "version"; "required": false; }; "oscuro": { "alias": "oscuro"; "required": false; }; "compacto": { "alias": "compacto"; "required": false; }; "anio": { "alias": "anio"; "required": false; }; }, {}, never, ["[tdFooterLinks]", "[tdFooterActions]"], true, never>;
 }
 
+type TdFileViewerKind = 'imagen' | 'pdf' | 'excel' | 'xml' | 'zip' | 'archivo';
+interface TdFileAttachment {
+    id: string | number;
+    nombre: string;
+    url: string;
+    tipo?: string;
+    tamano?: string | number | null;
+    descripcion?: string;
+    thumbnailUrl?: string;
+    descargable?: boolean;
+}
+
+declare class TdFileViewer {
+    private readonly cdr;
+    private visorDialog?;
+    private pdfCanvas?;
+    archivos: TdFileAttachment[];
+    titulo: string;
+    descripcion: string;
+    oscuro: boolean;
+    compacto: boolean;
+    readonly seleccionar: EventEmitter<TdFileAttachment>;
+    readonly descargar: EventEmitter<TdFileAttachment>;
+    protected seleccionado: TdFileAttachment | null;
+    protected zoom: number;
+    protected rotacion: number;
+    protected pdfCargando: boolean;
+    protected pdfError: string;
+    protected pdfPaginaActual: number;
+    protected pdfTotalPaginas: number;
+    private pdfJs?;
+    private pdfDocumento?;
+    private pdfRenderTask?;
+    private pdfRenderToken;
+    protected abrir(archivo: TdFileAttachment): void;
+    protected cerrar(): void;
+    protected cerrarSiBackdrop(event: MouseEvent): void;
+    protected descargarArchivo(archivo: TdFileAttachment, event?: MouseEvent): void;
+    protected tipoArchivo(archivo: TdFileAttachment): TdFileViewerKind;
+    protected iconoArchivo(archivo: TdFileAttachment): string;
+    protected esImagen(archivo: TdFileAttachment | null): boolean;
+    protected esPdf(archivo: TdFileAttachment | null): boolean;
+    protected tieneVistaPrevia(archivo: TdFileAttachment): boolean;
+    protected indiceSeleccionado(): number;
+    protected seleccionarAnterior(): void;
+    protected seleccionarSiguiente(): void;
+    protected cambiarZoom(delta: number): void;
+    protected restablecerZoom(): void;
+    protected rotar(): void;
+    protected paginaPdfAnterior(): void;
+    protected paginaPdfSiguiente(): void;
+    protected tamanoLegible(archivo: TdFileAttachment): string;
+    private cargarPdf;
+    private renderizarPaginaPdf;
+    private obtenerPdfJs;
+    private limpiarPdf;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TdFileViewer, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TdFileViewer, "td-file-viewer", never, { "archivos": { "alias": "archivos"; "required": false; }; "titulo": { "alias": "titulo"; "required": false; }; "descripcion": { "alias": "descripcion"; "required": false; }; "oscuro": { "alias": "oscuro"; "required": false; }; "compacto": { "alias": "compacto"; "required": false; }; }, { "seleccionar": "seleccionar"; "descargar": "descargar"; }, never, never, true, never>;
+}
+
 interface TdHeaderNotificacion {
     id: string | number;
     titulo: string;
@@ -798,7 +897,7 @@ declare class TdInput implements ControlValueAccessor, FormValueControl<TdInputV
     protected readonly hasValue: _angular_core.Signal<boolean>;
     protected readonly labelFloating: _angular_core.Signal<boolean>;
     protected readonly resolvedPattern: _angular_core.Signal<string | null>;
-    protected readonly resolvedInputMode: _angular_core.Signal<"numeric" | "decimal" | null>;
+    protected readonly resolvedInputMode: _angular_core.Signal<"decimal" | "numeric" | null>;
     protected readonly focused: _angular_core.WritableSignal<boolean>;
     protected passwordVisible: boolean;
     protected get inputId(): string;
@@ -914,6 +1013,47 @@ declare class TdTextarea implements AfterViewInit, ControlValueAccessor, FormVal
     static ngAcceptInputType_autoResize: unknown;
 }
 
+type TdMenuTono = 'neutro' | 'primario' | 'exito' | 'advertencia' | 'peligro';
+type TdMenuPosicion = 'abajo-inicio' | 'abajo-fin' | 'arriba-inicio' | 'arriba-fin';
+interface TdMenuItem<T = unknown> {
+    id: string;
+    etiqueta: string;
+    icono?: string;
+    descripcion?: string;
+    tono?: TdMenuTono;
+    data?: T;
+    separadorAntes?: boolean;
+    visible?: boolean;
+    deshabilitado?: boolean;
+}
+interface TdMenuSeleccion<T = unknown> {
+    item: TdMenuItem<T>;
+    id: string;
+    data?: T;
+}
+
+declare class TdMenu<T = unknown> {
+    items: TdMenuItem<T>[];
+    etiqueta: string;
+    icono: string;
+    posicion: TdMenuPosicion;
+    ancho: string;
+    disabled: boolean;
+    oscuro: boolean;
+    ariaLabel: string;
+    readonly seleccion: EventEmitter<TdMenuSeleccion<T>>;
+    readonly abiertoChange: EventEmitter<boolean>;
+    protected abierto: boolean;
+    protected get itemsVisibles(): TdMenuItem<T>[];
+    protected alternar(): void;
+    protected cerrar(): void;
+    protected seleccionar(item: TdMenuItem<T>): void;
+    protected posiciones(): CdkConnectedOverlay['positions'];
+    private establecerAbierto;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TdMenu<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TdMenu<any>, "td-menu", never, { "items": { "alias": "items"; "required": false; }; "etiqueta": { "alias": "etiqueta"; "required": false; }; "icono": { "alias": "icono"; "required": false; }; "posicion": { "alias": "posicion"; "required": false; }; "ancho": { "alias": "ancho"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "oscuro": { "alias": "oscuro"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; }, { "seleccion": "seleccion"; "abiertoChange": "abiertoChange"; }, never, never, true, never>;
+}
+
 interface TdSelectOption<T = unknown> {
     value: T;
     label: string;
@@ -939,6 +1079,7 @@ declare class TdAutocompleteSelect<T = unknown> implements ControlValueAccessor,
     placeholder: string;
     options: TdSelectOption<T>[];
     hint: string;
+    hideLabel: boolean;
     readonly name: _angular_core.InputSignal<string>;
     readonly disabled: _angular_core.InputSignal<boolean>;
     readonly disabledReasons: _angular_core.InputSignal<readonly WithOptionalFieldTree<DisabledReason>[]>;
@@ -978,6 +1119,8 @@ declare class TdAutocompleteSelect<T = unknown> implements ControlValueAccessor,
     protected readonly overlayPositions: ConnectedPosition[];
     protected get inputId(): string;
     protected get listId(): string;
+    protected get hasVisibleLabel(): boolean;
+    protected get accessibleLabel(): string;
     protected get filteredOptions(): TdSelectOption<T>[];
     protected get labelFloating(): boolean;
     private changed;
@@ -1005,7 +1148,7 @@ declare class TdAutocompleteSelect<T = unknown> implements ControlValueAccessor,
     private scheduleOverflowTextMeasurement;
     private measureOverflowText;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TdAutocompleteSelect<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TdAutocompleteSelect<any>, "td-autocomplete-select", never, { "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "options": { "alias": "options"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disabledReasons": { "alias": "disabledReasons"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "pending": { "alias": "pending"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "errorDisplay": { "alias": "errorDisplay"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "dark": { "alias": "dark"; "required": false; }; "scrollBehavior": { "alias": "scrollBehavior"; "required": false; }; "overflowText": { "alias": "overflowText"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "minimumCharacters": { "alias": "minimumCharacters"; "required": false; }; "filterWith": { "alias": "filterWith"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "touched": "touchedChange"; "touch": "touch"; "selectionChange": "selectionChange"; "searchChange": "searchChange"; "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TdAutocompleteSelect<any>, "td-autocomplete-select", never, { "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "options": { "alias": "options"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "hideLabel": { "alias": "hideLabel"; "required": false; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disabledReasons": { "alias": "disabledReasons"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "pending": { "alias": "pending"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "errorDisplay": { "alias": "errorDisplay"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "dark": { "alias": "dark"; "required": false; }; "scrollBehavior": { "alias": "scrollBehavior"; "required": false; }; "overflowText": { "alias": "overflowText"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "minimumCharacters": { "alias": "minimumCharacters"; "required": false; }; "filterWith": { "alias": "filterWith"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "touched": "touchedChange"; "touch": "touch"; "selectionChange": "selectionChange"; "searchChange": "searchChange"; "value": "valueChange"; }, never, never, true, never>;
 }
 
 declare class TdSelect<T = unknown> implements ControlValueAccessor, FormValueControl<T | null> {
@@ -1022,6 +1165,7 @@ declare class TdSelect<T = unknown> implements ControlValueAccessor, FormValueCo
     placeholder: string;
     options: TdSelectOption<T>[];
     hint: string;
+    hideLabel: boolean;
     readonly name: _angular_core.InputSignal<string>;
     readonly disabled: _angular_core.InputSignal<boolean>;
     readonly disabledReasons: _angular_core.InputSignal<readonly WithOptionalFieldTree<DisabledReason>[]>;
@@ -1055,6 +1199,8 @@ declare class TdSelect<T = unknown> implements ControlValueAccessor, FormValueCo
     protected readonly scrollStrategy: ScrollStrategy;
     protected readonly overlayPositions: ConnectedPosition[];
     protected get labelId(): string;
+    protected get hasVisibleLabel(): boolean;
+    protected get accessibleLabel(): string;
     protected get listId(): string;
     protected get selectedOption(): TdSelectOption<T> | undefined;
     private onChange;
@@ -1081,7 +1227,7 @@ declare class TdSelect<T = unknown> implements ControlValueAccessor, FormValueCo
     private scheduleOverflowTextMeasurement;
     private measureOverflowText;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TdSelect<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TdSelect<any>, "td-select", never, { "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "options": { "alias": "options"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disabledReasons": { "alias": "disabledReasons"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "pending": { "alias": "pending"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "errorDisplay": { "alias": "errorDisplay"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "dark": { "alias": "dark"; "required": false; }; "scrollBehavior": { "alias": "scrollBehavior"; "required": false; }; "overflowText": { "alias": "overflowText"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "touched": "touchedChange"; "touch": "touch"; "selectionChange": "selectionChange"; "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TdSelect<any>, "td-select", never, { "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "options": { "alias": "options"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "hideLabel": { "alias": "hideLabel"; "required": false; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disabledReasons": { "alias": "disabledReasons"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "pending": { "alias": "pending"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "errorDisplay": { "alias": "errorDisplay"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "dark": { "alias": "dark"; "required": false; }; "scrollBehavior": { "alias": "scrollBehavior"; "required": false; }; "overflowText": { "alias": "overflowText"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "touched": "touchedChange"; "touch": "touch"; "selectionChange": "selectionChange"; "value": "valueChange"; }, never, never, true, never>;
 }
 
 interface MenuSidebar {
@@ -1205,5 +1351,5 @@ declare class TdThemeService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<TdThemeService>;
 }
 
-export { TD_DIALOG_CONFIG, TD_DIALOG_DATA, TD_ICONOS, TD_ICONOS_NOMBRES, TD_THEME_DARK_COLORS, TD_THEME_LIGHT_COLORS, TdAlerta, TdAutocompleteSelect, TdButton, TdCheckbox, TdDataTable, TdDatePicker, TdDialog, TdDialogActions, TdDialogClose, TdDialogPrimary, TdDialogRef, TdFooter, TdHeader, TdIcon, TdIconoRegistry, TdInput, TdSelect, TdSidebar, TdTab, TdTabs, TdTextarea, TdThemeService, TelcomdevUi, createTdFormControlBridge };
-export type { MenuSidebar, TdAlertaOpciones, TdAlertaTipo, TdButtonSize, TdButtonTone, TdButtonType, TdButtonVariant, TdDataTableAccion, TdDataTableAccionEvento, TdDataTableAlineacion, TdDataTableBoton, TdDataTableColumna, TdDataTableTipoColumna, TdDataTableTono, TdDatePickerMode, TdDatePickerValue, TdDateRange, TdDialogConfig, TdDialogPanelData, TdDialogRefLike, TdDialogTamano, TdErrorDisplay, TdFormControlBridge, TdHeaderAccionPerfil, TdHeaderNotificacion, TdIconoDefinicion, TdIconoNombre, TdIconoPersonalizado, TdInputEmptyValue, TdInputMask, TdInputSanitize, TdInputSanitizeFn, TdInputSanitizePreset, TdInputValue, TdSelectAppearance, TdSelectOption, TdSelectOverflowText, TdSelectScrollBehavior, TdSidebarModoCerrado, TdSidebarSeleccion, TdTabsAlignment, TdTabsVariant, TdTextareaEmptyValue, TdTextareaValue, TdThemeMode, TdThemePaletteColor };
+export { TD_DIALOG_CONFIG, TD_DIALOG_DATA, TD_ICONOS, TD_ICONOS_NOMBRES, TD_THEME_DARK_COLORS, TD_THEME_LIGHT_COLORS, TdAlerta, TdAutocompleteSelect, TdButton, TdCheckbox, TdDataTable, TdDatePicker, TdDialog, TdDialogActions, TdDialogClose, TdDialogPrimary, TdDialogRef, TdFileViewer, TdFooter, TdHeader, TdIcon, TdIconoRegistry, TdInput, TdMenu, TdSelect, TdSidebar, TdTab, TdTabs, TdTextarea, TdThemeService, TelcomdevUi, createTdFormControlBridge };
+export type { MenuSidebar, TdAlertaOpciones, TdAlertaTipo, TdButtonSize, TdButtonTone, TdButtonType, TdButtonVariant, TdDataTableAccion, TdDataTableAccionEvento, TdDataTableAlineacion, TdDataTableBoton, TdDataTableColumna, TdDataTableImagenConfig, TdDataTableImagenEvento, TdDataTableImagenForma, TdDataTableTipoColumna, TdDataTableTono, TdDatePickerMode, TdDatePickerValue, TdDateRange, TdDialogConfig, TdDialogPanelData, TdDialogRefLike, TdDialogTamano, TdErrorDisplay, TdFileAttachment, TdFileViewerKind, TdFormControlBridge, TdHeaderAccionPerfil, TdHeaderNotificacion, TdIconoDefinicion, TdIconoNombre, TdIconoPersonalizado, TdInputEmptyValue, TdInputMask, TdInputSanitize, TdInputSanitizeFn, TdInputSanitizePreset, TdInputValue, TdMenuItem, TdMenuPosicion, TdMenuSeleccion, TdMenuTono, TdSelectAppearance, TdSelectOption, TdSelectOverflowText, TdSelectScrollBehavior, TdSidebarModoCerrado, TdSidebarSeleccion, TdTabsAlignment, TdTabsVariant, TdTextareaEmptyValue, TdTextareaValue, TdThemeMode, TdThemePaletteColor };