Matriz de Recursos do sgcHTML — Todos os Componentes

Componente	Classe	Descrição	Ajuda
NavBar	`TsgcHTMLComponent_NavBar`	Barra de navegação superior responsiva com marca e itens de menu recolhíveis.	Docs
Sidebar	`TsgcHTMLComponent_Sidebar`	Navegação lateral vertical com ícones, cabeçalhos, divisores e um rodapé.	Docs
Breadcrumb	`TsgcHTMLComponent_Breadcrumb`	Trilha de breadcrumb mostrando a localização atual em uma hierarquia.	Docs
Tabs	`TsgcHTMLComponent_Tabs`	Conjunto de abas, pílulas ou abas sublinhadas com painéis de conteúdo alternáveis.	Docs
Pagination	`TsgcHTMLComponent_Pagination`	Controle de navegação de páginas derivado da contagem de itens ou páginas.	Docs
Toolbar	`TsgcHTMLComponent_Toolbar`	Barra de ferramentas que agrupa botões com separadores e tooltips.	Docs
TreeView	`TsgcHTMLComponent_TreeView`	Árvore hierárquica recolhível, carregável a partir de um dataset.	Docs
Stepper	`TsgcHTMLComponent_Stepper`	Indicador de assistente / progresso por etapas, horizontal ou vertical.	Docs
Dropdown	`TsgcHTMLComponent_Dropdown`	Botão dropdown com um menu de links, cabeçalhos e divisores.	Docs
ButtonGroup	`TsgcHTMLComponent_ButtonGroup`	Conjunto segmentado de botões, horizontal ou vertical.	Docs
ListGroup	`TsgcHTMLComponent_ListGroup`	Grupo de lista de links ou itens com badges e conteúdo extra.	Docs
DashboardLayout	`TsgcHTMLDashboardLayout`	Shell completo de dashboard com uma sidebar fixa e seções de conteúdo.	Docs
Site	`TsgcHTMLComponent_Site`	Shell de página completo — cabeçalho, menu de navegação, conteúdo e rodapé — com um template de layout intercambiável.	Docs
Splitter	`TsgcHTMLComponent_Splitter`	Dois painéis redimensionáveis com uma calha arrastável, horizontal ou vertical, com posição persistida opcional.	Docs

Dados & Tabelas

Grids, calendários e quadros que renderizam seus datasets diretamente.

Componente	Classe	Descrição	Ajuda
Grid	`TsgcHTMLComponent_Grid`	Tabela rica em recursos: ordenação, filtro, exportação CSV/PDF, edição inline, agrupamento, scroll virtual e consulta por IA.	Docs
DataTable	`TsgcHTMLComponent_DataTable`	Tabela de dados de nível superior que envolve Grid + Pagination com uma barra de ferramentas, busca e contagem de linhas.	Docs
Calendar	`TsgcHTMLComponent_Calendar`	Calendário em grade mensal com pontos de eventos e navegação anterior/próximo.	Docs
Scheduler	`TsgcHTMLComponent_Scheduler`	Agendador de calendário (visualizações por mês / semana) renderizando eventos por data.	Docs
Timeline	`TsgcHTMLComponent_Timeline`	Linha do tempo vertical de eventos datados, carregável a partir de um dataset.	Docs
KanbanBoard	`TsgcHTMLComponent_KanbanBoard`	Quadro Kanban de colunas e cards arrastáveis.	Docs
Gantt	`TsgcHTMLComponent_Gantt`	Gráfico de cronograma de projeto Gantt com barras de progresso de tarefas.	Docs
TreeGrid	`TsgcHTMLComponent_TreeGrid`	Tabela Bootstrap com linhas hierárquicas recolhíveis, construída a partir de pares de nós Id/ParentId.	Docs
PivotTable	`TsgcHTMLComponent_PivotTable`	Tabela dinâmica (pivot) Bootstrap que agrupa linhas e colunas e agrega medidas com totais de linha, coluna e geral.	Docs
ActivityFeed	`TsgcHTMLComponent_ActivityFeed`	Feed de atividades ao vivo, mais recentes primeiro, com carimbos de tempo relativos e envio via WebSocket out-of-band.	Docs
AuditTrail	`TsgcHTMLComponent_AuditTrail`	Feed cronológico de log de auditoria de ações de usuários e do sistema, com autor, ação, alvo e data/hora.	Docs

Gráficos & Visualização

Visuais orientados a dados construídos a partir dos seus próprios números.

Componente	Classe	Descrição	Ajuda
Chart	`TsgcHTMLComponent_Chart`	Gráfico Chart.js: linha, barra, pizza, rosca, radar, polar, bolha e dispersão.	Docs
Gauge	`TsgcHTMLComponent_Gauge`	Medidor SVG semicircular com limiares de cor baixo / médio / alto.	Docs
Diagram	`TsgcHTMLComponent_Diagram`	Diagrama de fluxo de nós e setas renderizado como SVG inline.	Docs
Map	`TsgcHTMLComponent_Map`	Mapa interativo Leaflet.js (tiles OpenStreetMap / CartoDB) com marcadores.	Docs
Heatmap	`TsgcHTMLComponent_Heatmap`	Grade de mapa de calor SVG com escala de cores a partir de valores de célula ou de um dataset vinculado, com legenda e rótulos de linha/coluna.	Docs
Sparkline	`TsgcHTMLComponent_Sparkline`	Sparkline SVG inline compacto de linha, barra ou área a partir de uma série de valores ou de um dataset vinculado.	Docs
CandlestickChart	`TsgcHTMLComponent_CandlestickChart`	Gráfico de candlestick OHLC em SVG com pavios, cores de alta/baixa e uma faixa de volume opcional.	Docs
QRCode	`TsgcHTMLComponent_QRCode`	Código QR SVG ISO/IEC 18004 em Pascal puro a partir de qualquer texto ou URL, com nível de correção de erro selecionável.	Docs
Barcode	`TsgcHTMLComponent_Barcode`	Código de barras Code 128 SVG em Pascal puro a partir de qualquer texto ASCII, com legenda legível opcional.	Docs
TreeMap	`TsgcHTMLComponent_TreeMap`	Treemap "squarified" renderizado como um SVG inline autocontido gerado no servidor, sem necessidade de biblioteca de gráficos.	Docs

Formulários & Entradas

Tudo o que você precisa para capturar dados, com validação e vinculação a dataset.

Componente	Classe	Descrição	Ajuda
Form	`TsgcHTMLComponent_Form`	Construtor de formulários orientado a dados com validação, layouts e geração de formulários por IA.	Docs
Edit	`TsgcHTMLComponent_Edit`	Entrada de texto de linha única com label, texto de ajuda e vinculação a dataset.	Docs
Memo	`TsgcHTMLComponent_Memo`	Entrada de área de texto multilinha com label e texto de ajuda.	Docs
CheckBox	`TsgcHTMLComponent_CheckBox`	Entrada de checkbox com label e estado marcado.	Docs
RadioGroup	`TsgcHTMLComponent_RadioGroup`	Grupo de opções de rádio mutuamente exclusivas.	Docs
Select	`TsgcHTMLComponent_Select`	Dropdown de seleção com grupos de opções, seleção múltipla e vinculação a dataset.	Docs
InputGroup	`TsgcHTMLComponent_InputGroup`	Entrada com texto de addon antes / depois.	Docs
AutoComplete	`TsgcHTMLComponent_AutoComplete`	Entrada de texto apoiada por uma datalist HTML5 de sugestões.	Docs
DatePicker	`TsgcHTMLComponent_DatePicker`	Campo de entrada nativo de data / hora / datetime.	Docs
FileUpload	`TsgcHTMLComponent_FileUpload`	Zona de upload de arquivos por arrastar e soltar com envio de formulário multipart.	Docs
RichEditor	`TsgcHTMLComponent_RichEditor`	Editor de rich-text WYSIWYG baseado em Quill com campo de formulário oculto.	Docs
Rating	`TsgcHTMLComponent_Rating`	Exibição ou entrada de avaliação por estrelas (símbolo).	Docs
MultiSelect	`TsgcHTMLComponent_MultiSelect`	Um dropdown de seleção múltipla Bootstrap pesquisável com chips, opções agrupadas e vinculação a dataset.	Docs
ColorPicker	`TsgcHTMLComponent_ColorPicker`	Uma entrada de cor HTML5 nativa com campo de texto hexadecimal opcional e amostras predefinidas.	Docs
Slider	`TsgcHTMLComponent_Slider`	Um slider de intervalo Bootstrap com badge de valor ao vivo, rótulos de mín/máx e estilo de cor.	Docs
TimePicker	`TsgcHTMLComponent_TimePicker`	Uma entrada de hora HTML5 nativa com limites de mín/máx e granularidade de segundos.	Docs
SignaturePad	`TsgcHTMLComponent_SignaturePad`	Um bloco de assinatura em canvas baseado em pointer-events com ações de Limpar, Desfazer e Salvar.	Docs
Transfer	`TsgcHTMLComponent_Transfer`	Widget de lista dupla para mover itens entre um painel de disponíveis e um de atribuídos, com filtragem e vinculação a dataset.	Docs
DateTimePicker	`TsgcHTMLComponent_DateTimePicker`	Seletor nativo de data e hora do HTML5, combinando calendário e relógio em um único campo.	Docs
DateRangePicker	`TsgcHTMLComponent_DateRangePicker`	Campos pareados de data inicial e final para escolher um intervalo de datas, com limites mín/máx.	Docs
RangeSlider	`TsgcHTMLComponent_RangeSlider`	Slider de dois controles que seleciona um par de valores mínimo/máximo, com badges de valor ao vivo.	Docs
CameraScanner	`TsgcHTMLComponent_CameraScanner`	Painel de câmera ao vivo que escaneia códigos de barras e QR codes com o BarcodeDetector nativo do navegador, sem biblioteca de terceiros.	Docs
NumPad	`TsgcHTMLComponent_NumPad`	Teclado numérico e de moeda para toque, feito para entrada em ponto de venda, com botões de valor rápido e formatação independente de localidade.	Docs

Conteúdo & Layout

Cards, mídia e blocos de KPI para dispor uma página.

Componente	Classe	Descrição	Ajuda
Panel	`TsgcHTMLComponent_Panel`	Painel de card Bootstrap com cabeçalho / corpo / rodapé, recolhível e rolável.	Docs
StatCard	`TsgcHTMLComponent_StatCard`	Card de KPI / estatística de dashboard com ícone, seta de tendência e gradiente opcional.	Docs
Accordion	`TsgcHTMLComponent_Accordion`	Acordeão de colapso vertical com painéis expansíveis empilhados.	Docs
Carousel	`TsgcHTMLComponent_Carousel`	Slideshow de imagens / carrossel com indicadores, controles e reprodução automática.	Docs
Image	`TsgcHTMLComponent_Image`	Imagem com forma, responsiva / lazy-load, link de lightbox e legenda.	Docs
Avatar	`TsgcHTMLComponent_Avatar`	Avatar de usuário (imagem ou iniciais) com tamanho, forma e ponto de status de presença.	Docs
Video	`TsgcHTMLComponent_Video`	Player de vídeo / áudio HTML5 mais um helper de incorporação do YouTube.	Docs
Badge	`TsgcHTMLComponent_Badge`	Badge Bootstrap único com cor, formato pílula, um ícone inline e um modo de ponto de notificação posicionado.	Docs
PDFViewer	`TsgcHTMLComponent_PDFViewer`	Visualizador de PDF embutido na página, baseado em pdf.js, com navegação de páginas, zoom, busca, download e impressão.	Docs
Chip	`TsgcHTMLComponent_Chip`	Chip / tag compacto com ícone opcional, cor e um botão de fechar removível.	Docs

Overlays & Feedback

Diálogos, superfícies de status e estados de carregamento.

Componente	Classe	Descrição	Ajuda
Modal	`TsgcHTMLComponent_Modal`	Diálogo modal com título / corpo / rodapé, tamanhos, centralizado e backdrop estático.	Docs
Offcanvas	`TsgcHTMLComponent_Offcanvas`	Painel deslizante off-canvas pela esquerda, direita, topo ou base.	Docs
Popover	`TsgcHTMLComponent_Popover`	Balão popover sobre um elemento de gatilho (clique / hover / foco).	Docs
Toast	`TsgcHTMLComponent_Toast`	Notificação toast com cabeçalho, corpo, carimbo de tempo e ocultação automática.	Docs
Snackbar	`TsgcHTMLComponent_Snackbar`	Snackbar transitório estilo Material com uma ação opcional.	Docs
Notification	`TsgcHTMLComponent_Notification`	Centro de notificações em dropdown com ícone de sino e um badge de não lidas.	Docs
Spinner	`TsgcHTMLComponent_Spinner`	Spinner de carregamento (borda / crescimento), dimensionado e colorido.	Docs
Placeholder	`TsgcHTMLComponent_Placeholder`	Card de carregamento esqueleto / placeholder com um brilho animado.	Docs
ContextMenu	`TsgcHTMLComponent_ContextMenu`	Menu dropdown de clique direito com escopo definido por um seletor CSS, com ícones, divisores, cabeçalhos e ações roteadas pelo servidor.	Docs
JobProgress	`TsgcHTMLComponent_JobProgress`	Lista ao vivo de barras de progresso de jobs em segundo plano com badges de status, botões de cancelar e atualizações de fragmento out-of-band.	Docs
LogViewer	`TsgcHTMLComponent_LogViewer`	Visualizador de log / terminal em streaming com filtro de nível, busca e rolagem automática.	Docs
ProgressBar	`TsgcHTMLComponent_ProgressBar`	Barra de progresso Bootstrap, listrada e animada, de segmento único ou multissegmento empilhado.	Docs
CommandPalette	`TsgcHTMLComponent_CommandPalette`	Lançador de ações rápidas Ctrl+K / Cmd+K com filtragem por substring seguida de fuzzy, categorias e ações roteadas pelo servidor.	Docs
EmptyState	`TsgcHTMLComponent_EmptyState`	O painel que um grid, uma lista ou um resultado de busca exibe quando não há linhas, com ícone, título, descrição e até dois botões.	Docs

Chat & IA

UI conversacional, de bolhas simples a um assistente de IA com streaming.

Componente	Classe	Descrição	Ajuda
ChatBox	`TsgcHTMLComponent_ChatBox`	Caixa de bolhas de chat estilo card com uma barra de entrada e indicador de digitação.	Docs
Chat	`TsgcHTMLComponent_Chat`	Chat estilo WhatsApp com mensagens de texto / imagem / arquivo / áudio / vídeo, confirmações de leitura e respostas.	Docs
AIChat	`TsgcHTMLComponent_AIChat`	Chat de assistente de IA com seletor de provedor / modelo, streaming de tokens e citações de fontes RAG.	Docs
Presence	`TsgcHTMLComponent_Presence`	Lista de "quem está online" como pilha de avatares ou lista, com atualizações de status ao vivo.	Docs

Autenticação

Fluxos de login prontos, de senhas a passkeys.

Componente	Classe	Descrição	Ajuda
Login	`TsgcHTMLComponent_Login`	Formulário / página de login pronto (card, centralizado ou página inteira) com lembrar-me e alertas.	Docs
SocialLogin	`TsgcHTMLComponent_SocialLogin`	Painel de botões de login social OAuth (Google, Facebook, Apple, GitHub, Microsoft e mais).	Docs
OAuthCallback	`TsgcHTMLComponent_OAuthCallback`	Página de callback / destino OAuth em estado de sucesso, erro ou carregamento com redirecionamento automático.	Docs
WebAuthnLogin	`TsgcHTMLComponent_WebAuthnLogin`	Widget de login e registro passkey / WebAuthn sem senha.	Docs
RolesPermissions	`TsgcHTMLComponent_RolesPermissions`	Matriz de papéis / permissões com uma checkbox por célula e atualizações de concessão ao vivo via WebSocket.	Docs
UserManagement	`TsgcHTMLComponent_UserManagement`	Tabela de administração de usuários com papéis, status, busca e um dropdown de ações por linha.	Docs
ImpersonateBanner	`TsgcHTMLComponent_ImpersonateBanner`	Banner de personificação de administrador exibido ao agir como outro usuário, com saída em um clique.	Docs

Infraestrutura

Motor, Servidor & Temas

As peças não visuais que servem as páginas e as mantêm ao vivo.

Componente	Classe	Descrição	Ajuda
EngineServer	`TsgcHTMLEngine_Server`	Motor HTML vinculado a um TsgcWebSocketHTTPServer que serve páginas renderizadas e assets embutidos.	Docs
HTMXEngine	`TsgcHTMX_Engine_Server`	Motor htmx conectado ao mesmo servidor. Ele engancha os handlers HTTP e WebSocket, despacha requisições e mensagens de entrada e envia ou faz broadcast de fragmentos HTML para os navegadores conectados em tempo real (`DispatchRequest`, `DispatchMessage`, `PushFragment`, `BroadcastFragment`).	Docs
PageBuilder	`TsgcHTMLPageBuilder`	Monta componentes registrados em uma página responsiva completa, com um editor visual em tempo de design.	Docs
TemplateBootstrap	`TsgcHTMLTemplate_Bootstrap`	Envolve o conteúdo do corpo em um documento HTML Bootstrap 5 completo com tema, idioma e direção.	Docs
ThemeController	`TsgcHTMLThemeController`	Alternador de tema em tempo de execução cuja propriedade `Theme` (`ptDefault`, `ptDark`, `ptDarkPro`) aplica o tema selecionado e a folha de estilos compartilhada à página.	Docs
ThemeBuilder	`TsgcHTMLThemeBuilder`	Gerador de CSS cujo `Mode` (`tmLight`, `tmDark`, `tmSystem`) escreve variáveis CSS do Bootstrap a partir de valores de propriedades, com um script opcional de sincronização com a preferência do SO para `tmSystem`.	Docs
HTMXFragment	`TsgcHTMX_Fragment`	Fragmento htmx out-of-band para enviar uma atualização parcial de página do servidor ao navegador.	Docs
HTMXRouter	`TsgcHTMX_Router`	Tabela de roteamento de `Routes` que corresponde ao caminho de uma requisição de entrada e a despacha (via `HandleRequest`) ao handler `OnRoute` dessa rota.	Docs