Matriz de características de sgcHTML — Todos los componentes

Componente	Clase	Descripción	Ayuda
NavBar	`TsgcHTMLComponent_NavBar`	Barra de navegación superior responsive con marca y elementos de menú plegables.	Docs
Sidebar	`TsgcHTMLComponent_Sidebar`	Navegación lateral vertical con iconos, cabeceras, separadores y un pie.	Docs
Breadcrumb	`TsgcHTMLComponent_Breadcrumb`	Ruta de navegación que muestra la ubicación actual dentro de una jerarquía.	Docs
Tabs	`TsgcHTMLComponent_Tabs`	Conjunto de pestañas (tab, pill o subrayado) con paneles de contenido intercambiables.	Docs
Pagination	`TsgcHTMLComponent_Pagination`	Control de navegación de páginas derivado del número de elementos o de páginas.	Docs
Toolbar	`TsgcHTMLComponent_Toolbar`	Barra de herramientas que agrupa botones con separadores y tooltips.	Docs
TreeView	`TsgcHTMLComponent_TreeView`	Árbol jerárquico plegable, cargable desde un dataset.	Docs
Stepper	`TsgcHTMLComponent_Stepper`	Indicador de asistente / progreso por pasos, horizontal o vertical.	Docs
Dropdown	`TsgcHTMLComponent_Dropdown`	Botón desplegable con un menú de enlaces, cabeceras y separadores.	Docs
ButtonGroup	`TsgcHTMLComponent_ButtonGroup`	Conjunto segmentado de botones, horizontal o vertical.	Docs
ListGroup	`TsgcHTMLComponent_ListGroup`	Grupo de lista de enlaces o elementos con insignias y contenido adicional.	Docs
DashboardLayout	`TsgcHTMLDashboardLayout`	Estructura completa de panel con una barra lateral fija y secciones de contenido.	Docs
Site	`TsgcHTMLComponent_Site`	Estructura completa de página — cabecera, menú de navegación, contenido y pie — con una plantilla de disposición intercambiable.	Docs
Splitter	`TsgcHTMLComponent_Splitter`	Dos paneles redimensionables con una barra divisoria arrastrable, horizontal o vertical, con posición persistida opcional.	Docs

Datos y Tablas

Grids, calendarios y tableros que renderizan tus datasets directamente.

Componente	Clase	Descripción	Ayuda
Grid	`TsgcHTMLComponent_Grid`	Tabla con muchas funciones: orden, filtrado, exportación a CSV/PDF, edición en línea, agrupación, scroll virtual y consultas con IA.	Docs
DataTable	`TsgcHTMLComponent_DataTable`	Tabla de datos de más alto nivel que envuelve Grid + Pagination con una barra de herramientas, búsqueda y recuento de filas.	Docs
Calendar	`TsgcHTMLComponent_Calendar`	Calendario en cuadrícula mensual con puntos de eventos y navegación anterior/siguiente.	Docs
Scheduler	`TsgcHTMLComponent_Scheduler`	Planificador de calendario (vistas de mes / semana) que renderiza eventos por fecha.	Docs
Timeline	`TsgcHTMLComponent_Timeline`	Línea de tiempo vertical de eventos con fecha, cargable desde un dataset.	Docs
KanbanBoard	`TsgcHTMLComponent_KanbanBoard`	Tablero Kanban de columnas y tarjetas arrastrables.	Docs
Gantt	`TsgcHTMLComponent_Gantt`	Diagrama de Gantt de cronograma de proyecto con barras de progreso de tareas.	Docs
TreeGrid	`TsgcHTMLComponent_TreeGrid`	Tabla Bootstrap con filas jerárquicas plegables construidas a partir de pares de nodos Id/ParentId.	Docs
PivotTable	`TsgcHTMLComponent_PivotTable`	Tabla dinámica (pivot) Bootstrap que agrupa filas y columnas y agrega medidas con totales de fila, columna y gran total.	Docs
ActivityFeed	`TsgcHTMLComponent_ActivityFeed`	Feed de actividad en directo, con lo más reciente primero, marcas de tiempo relativas y envío out-of-band por WebSocket.	Docs
AuditTrail	`TsgcHTMLComponent_AuditTrail`	Feed cronológico de registro de auditoría de acciones de usuario y del sistema con actor, acción, objetivo y marca de tiempo.	Docs

Gráficos y Visualización

Visualizaciones basadas en datos creadas a partir de tus propios números.

Componente	Clase	Descripción	Ayuda
Chart	`TsgcHTMLComponent_Chart`	Gráfico Chart.js: líneas, barras, circular, anillo, radar, polar, burbujas y dispersión.	Docs
Gauge	`TsgcHTMLComponent_Gauge`	Medidor SVG semicircular con umbrales de color bajo / medio / alto.	Docs
Diagram	`TsgcHTMLComponent_Diagram`	Diagrama de flujo de nodos y flechas renderizado como SVG en línea.	Docs
Map	`TsgcHTMLComponent_Map`	Mapa interactivo Leaflet.js (mosaicos de OpenStreetMap / CartoDB) con marcadores.	Docs
Heatmap	`TsgcHTMLComponent_Heatmap`	Cuadrícula de mapa de calor SVG con escala de color a partir de valores de celda o un dataset vinculado, con leyenda y etiquetas de fila/columna.	Docs
Sparkline	`TsgcHTMLComponent_Sparkline`	Sparkline SVG compacto en línea, de líneas, barras o área, a partir de una serie de valores o un dataset vinculado.	Docs
CandlestickChart	`TsgcHTMLComponent_CandlestickChart`	Gráfico de velas OHLC en SVG con mechas, colores de subida/bajada y una franja de volumen opcional.	Docs
QRCode	`TsgcHTMLComponent_QRCode`	Código QR SVG ISO/IEC 18004 en Pascal puro a partir de cualquier texto o URL, con nivel de corrección de errores seleccionable.	Docs
Barcode	`TsgcHTMLComponent_Barcode`	Código de barras Code 128 SVG en Pascal puro a partir de cualquier texto ASCII, con leyenda legible opcional.	Docs
TreeMap	`TsgcHTMLComponent_TreeMap`	Treemap squarified renderizado como SVG en línea autocontenido y generado en el servidor, sin necesidad de biblioteca de gráficos.	Docs

Formularios y Entradas

Todo lo que necesitas para capturar datos, con validación y vinculación a datasets.

Componente	Clase	Descripción	Ayuda
Form	`TsgcHTMLComponent_Form`	Constructor de formularios basado en datos con validación, diseños y generación de formularios con IA.	Docs
Edit	`TsgcHTMLComponent_Edit`	Campo de texto de una sola línea con etiqueta, texto de ayuda y vinculación a dataset.	Docs
Memo	`TsgcHTMLComponent_Memo`	Campo de área de texto multilínea con etiqueta y texto de ayuda.	Docs
CheckBox	`TsgcHTMLComponent_CheckBox`	Casilla de verificación con etiqueta y estado marcado.	Docs
RadioGroup	`TsgcHTMLComponent_RadioGroup`	Grupo de opciones de radio mutuamente excluyentes.	Docs
Select	`TsgcHTMLComponent_Select`	Lista desplegable con grupos de opciones, selección múltiple y vinculación a dataset.	Docs
InputGroup	`TsgcHTMLComponent_InputGroup`	Campo con texto complementario antepuesto / añadido.	Docs
AutoComplete	`TsgcHTMLComponent_AutoComplete`	Campo de texto respaldado por un datalist HTML5 de sugerencias.	Docs
DatePicker	`TsgcHTMLComponent_DatePicker`	Campo nativo de entrada de fecha / hora / fecha y hora.	Docs
FileUpload	`TsgcHTMLComponent_FileUpload`	Zona de subida de archivos por arrastrar y soltar con envío de formulario multipart.	Docs
RichEditor	`TsgcHTMLComponent_RichEditor`	Editor de texto enriquecido WYSIWYG basado en Quill con campo de formulario oculto.	Docs
Rating	`TsgcHTMLComponent_Rating`	Visualización o entrada de valoración con estrellas (símbolos).	Docs
MultiSelect	`TsgcHTMLComponent_MultiSelect`	Desplegable Bootstrap de selección múltiple con búsqueda, chips, opciones agrupadas y vinculación a dataset.	Docs
ColorPicker	`TsgcHTMLComponent_ColorPicker`	Entrada de color HTML5 nativa con campo de texto hexadecimal opcional y muestras predefinidas.	Docs
Slider	`TsgcHTMLComponent_Slider`	Control deslizante de rango Bootstrap con una insignia de valor en vivo, etiquetas mín/máx y estilo de color.	Docs
TimePicker	`TsgcHTMLComponent_TimePicker`	Entrada de hora HTML5 nativa con límites mín/máx y granularidad de segundos.	Docs
SignaturePad	`TsgcHTMLComponent_SignaturePad`	Panel de firma en canvas basado en eventos de puntero, con acciones Borrar, Deshacer y Guardar.	Docs
Transfer	`TsgcHTMLComponent_Transfer`	Widget de doble lista para mover elementos entre un panel disponible y uno asignado, con filtrado y vinculación a dataset.	Docs
DateTimePicker	`TsgcHTMLComponent_DateTimePicker`	Selector de fecha y hora HTML5 nativo que combina calendario y reloj en un solo campo.	Docs
DateRangePicker	`TsgcHTMLComponent_DateRangePicker`	Campos emparejados de fecha inicial y final para elegir un rango de fechas, con límites mín/máx.	Docs
RangeSlider	`TsgcHTMLComponent_RangeSlider`	Control deslizante de doble manija que selecciona un par de valores mínimo/máximo, con insignias de valor en vivo.	Docs
CameraScanner	`TsgcHTMLComponent_CameraScanner`	Panel de cámara en vivo que escanea códigos de barras y códigos QR con el BarcodeDetector nativo del navegador, sin biblioteca de terceros.	Docs
NumPad	`TsgcHTMLComponent_NumPad`	Teclado numérico y de moneda táctil para la entrada en punto de venta, con botones de importe rápido y un formato independiente del idioma.	Docs

Contenido y Diseño

Tarjetas, multimedia y mosaicos de KPI para componer una página.

Componente	Clase	Descripción	Ayuda
Panel	`TsgcHTMLComponent_Panel`	Panel de tarjeta Bootstrap con cabecera / cuerpo / pie, plegable y desplazable.	Docs
StatCard	`TsgcHTMLComponent_StatCard`	Tarjeta de KPI / estadística para paneles con icono, flecha de tendencia y degradado opcional.	Docs
Accordion	`TsgcHTMLComponent_Accordion`	Acordeón de colapso vertical con paneles expandibles apilados.	Docs
Carousel	`TsgcHTMLComponent_Carousel`	Pase de diapositivas / carrusel de imágenes con indicadores, controles y reproducción automática.	Docs
Image	`TsgcHTMLComponent_Image`	Imagen con forma, responsive / carga diferida, enlace a lightbox y pie de foto.	Docs
Avatar	`TsgcHTMLComponent_Avatar`	Avatar de usuario (imagen o iniciales) con tamaño, forma y punto de estado de presencia.	Docs
Video	`TsgcHTMLComponent_Video`	Reproductor de vídeo / audio HTML5 más un ayudante para incrustar YouTube.	Docs
Badge	`TsgcHTMLComponent_Badge`	Insignia Bootstrap individual con color, forma de píldora, un icono en línea y un modo de punto de notificación posicionado.	Docs
PDFViewer	`TsgcHTMLComponent_PDFViewer`	Visor de PDF integrado en la página basado en pdf.js, con navegación de páginas, zoom, búsqueda, descarga e impresión.	Docs
Chip	`TsgcHTMLComponent_Chip`	Chip / etiqueta compacta con un icono opcional, color y un botón de cierre eliminable.	Docs

Superposiciones y Avisos

Diálogos, superficies de estado y estados de carga.

Componente	Clase	Descripción	Ayuda
Modal	`TsgcHTMLComponent_Modal`	Diálogo modal con título / cuerpo / pie, tamaños, centrado y fondo estático.	Docs
Offcanvas	`TsgcHTMLComponent_Offcanvas`	Panel deslizante off-canvas desde la izquierda, la derecha, arriba o abajo.	Docs
Popover	`TsgcHTMLComponent_Popover`	Burbuja de popover sobre un elemento disparador (clic / hover / foco).	Docs
Toast	`TsgcHTMLComponent_Toast`	Notificación toast con cabecera, cuerpo, marca de tiempo y ocultación automática.	Docs
Snackbar	`TsgcHTMLComponent_Snackbar`	Snackbar transitorio de estilo Material con una acción opcional.	Docs
Notification	`TsgcHTMLComponent_Notification`	Centro de notificaciones desplegable con icono de campana e insignia de no leídas.	Docs
Spinner	`TsgcHTMLComponent_Spinner`	Spinner de carga (borde / crecimiento), con tamaño y color.	Docs
Placeholder	`TsgcHTMLComponent_Placeholder`	Tarjeta de carga esqueleto / placeholder con un brillo animado.	Docs
ContextMenu	`TsgcHTMLComponent_ContextMenu`	Menú desplegable de clic derecho acotado a un selector CSS, con iconos, separadores, cabeceras y acciones enrutadas al servidor.	Docs
JobProgress	`TsgcHTMLComponent_JobProgress`	Lista en directo de barras de progreso de tareas en segundo plano con insignias de estado, botones de cancelar y actualizaciones de fragmento out-of-band.	Docs
LogViewer	`TsgcHTMLComponent_LogViewer`	Visor de log / terminal en streaming con filtro de nivel, búsqueda y desplazamiento automático.	Docs
ProgressBar	`TsgcHTMLComponent_ProgressBar`	Barra de progreso Bootstrap, rayada y animada, de segmento único o apilada en varios segmentos.	Docs
CommandPalette	`TsgcHTMLComponent_CommandPalette`	Lanzador de acciones rápidas Ctrl+K / Cmd+K con filtrado por subcadena y luego difuso, categorías y acciones enrutadas al servidor.	Docs
EmptyState	`TsgcHTMLComponent_EmptyState`	El panel que muestra una cuadrícula, una lista o un resultado de búsqueda cuando no tiene filas, con icono, título, descripción y hasta dos botones.	Docs

Chat e IA

UI conversacional, desde simples burbujas hasta un asistente de IA con streaming.

Componente	Clase	Descripción	Ayuda
ChatBox	`TsgcHTMLComponent_ChatBox`	Caja de burbujas de chat estilo tarjeta con una barra de entrada e indicador de escritura.	Docs
Chat	`TsgcHTMLComponent_Chat`	Chat estilo WhatsApp con mensajes de texto / imagen / archivo / audio / vídeo, confirmaciones de lectura y respuestas.	Docs
AIChat	`TsgcHTMLComponent_AIChat`	Chat de asistente de IA con selector de proveedor / modelo, streaming de tokens y citas de fuentes RAG.	Docs
Presence	`TsgcHTMLComponent_Presence`	Lista de "quién está en línea" como pila de avatares o lista, con actualizaciones de estado en vivo.	Docs

Autenticación

Flujos de inicio de sesión listos para usar, desde contraseñas hasta passkeys.

Componente	Clase	Descripción	Ayuda
Login	`TsgcHTMLComponent_Login`	Formulario / página de inicio de sesión listo para usar (tarjeta, centrado o a página completa) con recordarme y alertas.	Docs
SocialLogin	`TsgcHTMLComponent_SocialLogin`	Panel de botones de inicio de sesión social con OAuth (Google, Facebook, Apple, GitHub, Microsoft y más).	Docs
OAuthCallback	`TsgcHTMLComponent_OAuthCallback`	Página de retorno / aterrizaje de OAuth en estado de éxito, error o carga con redirección automática.	Docs
WebAuthnLogin	`TsgcHTMLComponent_WebAuthnLogin`	Widget de inicio de sesión y registro con passkey / WebAuthn sin contraseña.	Docs
RolesPermissions	`TsgcHTMLComponent_RolesPermissions`	Matriz de roles / permisos con una casilla por celda y actualizaciones de concesión en vivo por WebSocket.	Docs
UserManagement	`TsgcHTMLComponent_UserManagement`	Tabla de administración de usuarios con roles, estado, búsqueda y un desplegable de acciones por fila.	Docs
ImpersonateBanner	`TsgcHTMLComponent_ImpersonateBanner`	Banner de suplantación de administrador que se muestra mientras se actúa como otro usuario, con salida en un clic.	Docs

Infraestructura

Motor, servidor y temas

Las piezas no visuales que sirven las páginas y las mantienen en directo.

Componente	Clase	Descripción	Ayuda
EngineServer	`TsgcHTMLEngine_Server`	Motor HTML vinculado a un `TsgcWebSocketHTTPServer` que sirve las páginas renderizadas y los assets incrustados.	Docs
HTMXEngine	`TsgcHTMX_Engine_Server`	Motor htmx conectado al mismo servidor. Engancha los manejadores de HTTP y WebSocket, despacha las peticiones y los mensajes entrantes, y envía o difunde fragmentos de HTML a los navegadores conectados en tiempo real (`DispatchRequest`, `DispatchMessage`, `PushFragment`, `BroadcastFragment`).	Docs
PageBuilder	`TsgcHTMLPageBuilder`	Ensambla los componentes registrados en una página responsive completa (con un editor visual en tiempo de diseño).	Docs
TemplateBootstrap	`TsgcHTMLTemplate_Bootstrap`	Envuelve el contenido del cuerpo en un documento HTML Bootstrap 5 completo con tema, idioma y dirección.	Docs
ThemeController	`TsgcHTMLThemeController`	Selector de temas en tiempo de ejecución cuya propiedad `Theme` (`ptDefault`, `ptDark`, `ptDarkPro`) aplica el tema seleccionado y la hoja de estilos compartida a la página.	Docs
ThemeBuilder	`TsgcHTMLThemeBuilder`	Generador de CSS cuyo `Mode` (`tmLight`, `tmDark`, `tmSystem`) escribe variables CSS de Bootstrap a partir de los valores de las propiedades, con un script opcional de sincronización con la preferencia del sistema operativo para `tmSystem`.	Docs
HTMXFragment	`TsgcHTMX_Fragment`	Fragmento htmx out-of-band para enviar una actualización de página parcial desde el servidor al navegador.	Docs
HTMXRouter	`TsgcHTMX_Router`	Tabla de enrutamiento de `Routes` que hace coincidir la ruta de una petición entrante y la despacha (mediante `HandleRequest`) al manejador `OnRoute` de esa ruta.	Docs