sgcHTML Matrice delle Funzionalità

Componente	Classe	Descrizione	Aiuto
NavBar	`TsgcHTMLComponent_NavBar`	Barra di navigazione superiore responsive con brand e voci di menu comprimibili.	Docs
Sidebar	`TsgcHTMLComponent_Sidebar`	Navigazione laterale verticale con icone, intestazioni, divisori e un piè di pagina.	Docs
Breadcrumb	`TsgcHTMLComponent_Breadcrumb`	Percorso breadcrumb che mostra la posizione corrente in una gerarchia.	Docs
Tabs	`TsgcHTMLComponent_Tabs`	Set di schede in stile tab, pill o underline con riquadri di contenuto commutabili.	Docs
Pagination	`TsgcHTMLComponent_Pagination`	Controllo di navigazione tra le pagine derivato dal numero di elementi o di pagine.	Docs
Toolbar	`TsgcHTMLComponent_Toolbar`	Barra di pulsanti che raggruppa i pulsanti con separatori e tooltip.	Docs
TreeView	`TsgcHTMLComponent_TreeView`	Albero gerarchico comprimibile, caricabile da un dataset.	Docs
Stepper	`TsgcHTMLComponent_Stepper`	Indicatore di procedura guidata / avanzamento per passi, orizzontale o verticale.	Docs
Dropdown	`TsgcHTMLComponent_Dropdown`	Pulsante a discesa con un menu di link, intestazioni e divisori.	Docs
ButtonGroup	`TsgcHTMLComponent_ButtonGroup`	Set segmentato di pulsanti, orizzontale o verticale.	Docs
ListGroup	`TsgcHTMLComponent_ListGroup`	Gruppo di link o elementi in lista con badge e contenuto aggiuntivo.	Docs
DashboardLayout	`TsgcHTMLDashboardLayout`	Shell completa per dashboard con sidebar fissa e sezioni di contenuto.	Docs
Site	`TsgcHTMLComponent_Site`	Shell di pagina completa — intestazione, menu di navigazione, contenuto e piè di pagina — con un template di layout intercambiabile.	Docs
Splitter	`TsgcHTMLComponent_Splitter`	Due riquadri ridimensionabili con una maniglia trascinabile (gutter), orizzontale o verticale, con posizione persistente opzionale.	Docs

Dati e Tabelle

Griglie, calendari e board che renderizzano direttamente i tuoi dataset.

Componente	Classe	Descrizione	Aiuto
Grid	`TsgcHTMLComponent_Grid`	Tabella ricca di funzionalità: ordinamento, filtro, esportazione CSV/PDF, modifica inline, raggruppamento, scroll virtuale e query IA.	Docs
DataTable	`TsgcHTMLComponent_DataTable`	Tabella dati di livello superiore che combina Grid + Pagination con barra degli strumenti, ricerca e conteggio delle righe.	Docs
Calendar	`TsgcHTMLComponent_Calendar`	Calendario a griglia mensile con indicatori di evento e navigazione precedente/successivo.	Docs
Scheduler	`TsgcHTMLComponent_Scheduler`	Pianificatore a calendario (viste mese / settimana) che renderizza gli eventi per data.	Docs
Timeline	`TsgcHTMLComponent_Timeline`	Timeline verticale di eventi datati, caricabile da un dataset.	Docs
KanbanBoard	`TsgcHTMLComponent_KanbanBoard`	Board Kanban di colonne e schede trascinabili.	Docs
Gantt	`TsgcHTMLComponent_Gantt`	Diagramma di Gantt per la pianificazione di progetti con barre di avanzamento delle attività.	Docs
TreeGrid	`TsgcHTMLComponent_TreeGrid`	Tabella Bootstrap con righe gerarchiche comprimibili costruite dalle coppie di nodi Id/ParentId.	Docs
PivotTable	`TsgcHTMLComponent_PivotTable`	Tabella pivot Bootstrap che raggruppa righe e colonne e aggrega le misure con totali di riga, di colonna e generali.	Docs
ActivityFeed	`TsgcHTMLComponent_ActivityFeed`	Feed di attività live, con i più recenti in cima, timestamp relativi e push WebSocket out-of-band.	Docs
AuditTrail	`TsgcHTMLComponent_AuditTrail`	Feed cronologico di audit-log delle azioni di utenti e sistema con attore, azione, destinazione e timestamp.	Docs

Grafici e Visualizzazione

Elementi visivi basati sui dati, costruiti a partire dai tuoi numeri.

Componente	Classe	Descrizione	Aiuto
Chart	`TsgcHTMLComponent_Chart`	Grafico Chart.js: line, bar, pie, doughnut, radar, polar, bubble e scatter.	Docs
Gauge	`TsgcHTMLComponent_Gauge`	Indicatore SVG semicircolare con soglie di colore basso / medio / alto.	Docs
Diagram	`TsgcHTMLComponent_Diagram`	Diagramma di flusso con nodi e frecce renderizzato come SVG inline.	Docs
Map	`TsgcHTMLComponent_Map`	Mappa interattiva Leaflet.js (tile OpenStreetMap / CartoDB) con marcatori.	Docs
Heatmap	`TsgcHTMLComponent_Heatmap`	Griglia heatmap SVG a scala di colore da valori di cella o da un dataset collegato, con legenda ed etichette di riga/colonna.	Docs
Sparkline	`TsgcHTMLComponent_Sparkline`	Sparkline SVG inline compatta a linea, barre o area da una serie di valori o da un dataset collegato.	Docs
CandlestickChart	`TsgcHTMLComponent_CandlestickChart`	Grafico a candele OHLC in SVG con stoppini, colori rialzo/ribasso e una fascia volumi opzionale.	Docs
QRCode	`TsgcHTMLComponent_QRCode`	Codice QR SVG ISO/IEC 18004 in puro Pascal da qualsiasi testo o URL, con livello di correzione errori selezionabile.	Docs
Barcode	`TsgcHTMLComponent_Barcode`	Codice a barre Code 128 SVG in puro Pascal da qualsiasi testo ASCII, con didascalia leggibile opzionale.	Docs
TreeMap	`TsgcHTMLComponent_TreeMap`	Treemap squarificata renderizzata come SVG inline autonomo generato dal server, senza necessità di librerie di grafici.	Docs

Moduli e Campi

Tutto il necessario per acquisire dati, con validazione e binding ai dataset.

Componente	Classe	Descrizione	Aiuto
Form	`TsgcHTMLComponent_Form`	Costruttore di moduli basato sui dati con validazione, layout e generazione di moduli tramite IA.	Docs
Edit	`TsgcHTMLComponent_Edit`	Campo di testo a riga singola con etichetta, testo di aiuto e binding ai dataset.	Docs
Memo	`TsgcHTMLComponent_Memo`	Campo di testo multilinea (textarea) con etichetta e testo di aiuto.	Docs
CheckBox	`TsgcHTMLComponent_CheckBox`	Campo checkbox con etichetta e stato selezionato.	Docs
RadioGroup	`TsgcHTMLComponent_RadioGroup`	Gruppo di opzioni radio mutuamente esclusive.	Docs
Select	`TsgcHTMLComponent_Select`	Menu a discesa Select con gruppi di opzioni, selezione multipla e binding ai dataset.	Docs
InputGroup	`TsgcHTMLComponent_InputGroup`	Campo di input con testo addon anteposto / posposto.	Docs
AutoComplete	`TsgcHTMLComponent_AutoComplete`	Campo di testo supportato da una datalist HTML5 di suggerimenti.	Docs
DatePicker	`TsgcHTMLComponent_DatePicker`	Campo di input nativo per data / ora / data e ora.	Docs
FileUpload	`TsgcHTMLComponent_FileUpload`	Zona di caricamento file con drag-and-drop e invio del modulo multipart.	Docs
RichEditor	`TsgcHTMLComponent_RichEditor`	Editor di testo formattato WYSIWYG basato su Quill con campo di modulo nascosto.	Docs
Rating	`TsgcHTMLComponent_Rating`	Visualizzazione o input di valutazione a stelle (simboli).	Docs
MultiSelect	`TsgcHTMLComponent_MultiSelect`	Un menu a discesa Bootstrap a selezione multipla e ricercabile, con chip, opzioni raggruppate e binding ai dataset.	Docs
ColorPicker	`TsgcHTMLComponent_ColorPicker`	Un campo colore HTML5 nativo con un campo di testo esadecimale opzionale e swatch predefiniti.	Docs
Slider	`TsgcHTMLComponent_Slider`	Uno slider a intervallo Bootstrap con badge del valore in tempo reale, etichette min/max e colore personalizzabile.	Docs
TimePicker	`TsgcHTMLComponent_TimePicker`	Un campo orario HTML5 nativo con limiti min/max e granularità al secondo.	Docs
SignaturePad	`TsgcHTMLComponent_SignaturePad`	Un pannello firma su canvas basato su pointer-events con le azioni Cancella, Annulla e Salva.	Docs
Transfer	`TsgcHTMLComponent_Transfer`	Widget a doppia lista per spostare elementi tra un pannello disponibili e uno assegnati, con filtro e binding ai dataset.	Docs
DateTimePicker	`TsgcHTMLComponent_DateTimePicker`	Selettore di data e ora HTML5 nativo che combina calendario e orologio in un unico campo.	Docs
DateRangePicker	`TsgcHTMLComponent_DateRangePicker`	Coppia di campi data di inizio e fine per scegliere un intervallo di date, con limiti min/max.	Docs
RangeSlider	`TsgcHTMLComponent_RangeSlider`	Slider a doppia maniglia per selezionare una coppia di valori minimo/massimo, con badge di valore in tempo reale.	Docs
CameraScanner	`TsgcHTMLComponent_CameraScanner`	Pannello fotocamera live che scansiona codici a barre e QR code con l'API BarcodeDetector nativa del browser, senza librerie di terze parti.	Docs
NumPad	`TsgcHTMLComponent_NumPad`	Tastierino numerico e valutario touch per l'inserimento al punto vendita, con pulsanti di importo rapido e formattazione indipendente dalla lingua.	Docs

Contenuti e Layout

Card, contenuti multimediali e riquadri KPI per impaginare una pagina.

Componente	Classe	Descrizione	Aiuto
Panel	`TsgcHTMLComponent_Panel`	Pannello card Bootstrap con intestazione / corpo / piè di pagina, comprimibile e scorrevole.	Docs
StatCard	`TsgcHTMLComponent_StatCard`	Card KPI / statistica per dashboard con icona, freccia di tendenza e gradiente opzionale.	Docs
Accordion	`TsgcHTMLComponent_Accordion`	Accordion a collasso verticale di pannelli espandibili impilati.	Docs
Carousel	`TsgcHTMLComponent_Carousel`	Presentazione / carosello di immagini con indicatori, controlli e riproduzione automatica.	Docs
Image	`TsgcHTMLComponent_Image`	Immagine con forma, responsive / lazy-load, link lightbox e didascalia.	Docs
Avatar	`TsgcHTMLComponent_Avatar`	Avatar utente (immagine o iniziali) con dimensione, forma e indicatore di stato di presenza.	Docs
Video	`TsgcHTMLComponent_Video`	Lettore video / audio HTML5 più un helper per l'incorporamento di YouTube.	Docs
Badge	`TsgcHTMLComponent_Badge`	Singolo badge Bootstrap con colore, forma a pillola, un'icona inline e una modalità posizionata a pallino di notifica.	Docs
PDFViewer	`TsgcHTMLComponent_PDFViewer`	Visualizzatore PDF integrato nella pagina basato su pdf.js, con navigazione tra pagine, zoom, ricerca, download e stampa.	Docs
Chip	`TsgcHTMLComponent_Chip`	Chip / tag compatto con icona opzionale, colore e un pulsante di chiusura rimovibile.	Docs

Overlay e Feedback

Finestre di dialogo, superfici di stato e indicatori di caricamento.

Componente	Classe	Descrizione	Aiuto
Modal	`TsgcHTMLComponent_Modal`	Finestra di dialogo modale con titolo / corpo / piè di pagina, dimensioni, centratura e sfondo statico.	Docs
Offcanvas	`TsgcHTMLComponent_Offcanvas`	Pannello off-canvas a scorrimento da sinistra, destra, alto o basso.	Docs
Popover	`TsgcHTMLComponent_Popover`	Fumetto popover su un elemento attivatore (clic / hover / focus).	Docs
Toast	`TsgcHTMLComponent_Toast`	Notifica toast con intestazione, corpo, timestamp e occultamento automatico.	Docs
Snackbar	`TsgcHTMLComponent_Snackbar`	Snackbar transitoria in stile Material con un'azione opzionale.	Docs
Notification	`TsgcHTMLComponent_Notification`	Centro notifiche a discesa con icona campanello e badge dei non letti.	Docs
Spinner	`TsgcHTMLComponent_Spinner`	Spinner di caricamento (border / grow), dimensionato e colorato.	Docs
Placeholder	`TsgcHTMLComponent_Placeholder`	Card di caricamento skeleton / placeholder con un effetto shimmer animato.	Docs
ContextMenu	`TsgcHTMLComponent_ContextMenu`	Menu a discesa attivato dal clic destro, ambito a un selettore CSS, con icone, divisori, intestazioni e azioni instradate dal server.	Docs
JobProgress	`TsgcHTMLComponent_JobProgress`	Elenco live di barre di avanzamento per job in background, con badge di stato, pulsanti di annullamento e aggiornamenti a frammenti out-of-band.	Docs
LogViewer	`TsgcHTMLComponent_LogViewer`	Visualizzatore di log / terminale in streaming con filtro per livello, ricerca e scorrimento automatico.	Docs
ProgressBar	`TsgcHTMLComponent_ProgressBar`	Barra di avanzamento Bootstrap, a righe e animata, singola o multi-segmento impilata.	Docs
CommandPalette	`TsgcHTMLComponent_CommandPalette`	Launcher di azioni rapide Ctrl+K / Cmd+K con filtro per sottostringa e poi fuzzy, categorie e azioni instradate al server.	Docs
EmptyState	`TsgcHTMLComponent_EmptyState`	Il pannello che una griglia, un elenco o un risultato di ricerca mostra quando non ha righe, con icona, titolo, descrizione e fino a due pulsanti.	Docs

Chat e IA

Interfacce conversazionali, dalle semplici bolle a un assistente IA in streaming.

Componente	Classe	Descrizione	Aiuto
ChatBox	`TsgcHTMLComponent_ChatBox`	Riquadro chat a bolle in stile card con barra di input e indicatore di digitazione.	Docs
Chat	`TsgcHTMLComponent_Chat`	Chat in stile WhatsApp con messaggi di testo / immagine / file / audio / video, conferme di lettura e risposte.	Docs
AIChat	`TsgcHTMLComponent_AIChat`	Chat con assistente IA con selettore di provider / modello, streaming dei token e citazioni delle fonti RAG.	Docs
Presence	`TsgcHTMLComponent_Presence`	Elenco di presenza «chi è online» come pila di avatar o lista, con aggiornamenti di stato in tempo reale.	Docs

Autenticazione

Flussi di accesso già pronti, dalle password alle passkey.

Componente	Classe	Descrizione	Aiuto
Login	`TsgcHTMLComponent_Login`	Modulo / pagina di login già pronti (card, centrato o a pagina intera) con remember-me e avvisi.	Docs
SocialLogin	`TsgcHTMLComponent_SocialLogin`	Pannello di pulsanti per il login social OAuth (Google, Facebook, Apple, GitHub, Microsoft e altri).	Docs
OAuthCallback	`TsgcHTMLComponent_OAuthCallback`	Pagina di callback / atterraggio OAuth in stato di successo, errore o caricamento con reindirizzamento automatico.	Docs
WebAuthnLogin	`TsgcHTMLComponent_WebAuthnLogin`	Widget di login e registrazione senza password con passkey / WebAuthn.	Docs
RolesPermissions	`TsgcHTMLComponent_RolesPermissions`	Matrice di ruoli / permessi con una casella di controllo per cella e aggiornamenti dei permessi in tempo reale via WebSocket.	Docs
UserManagement	`TsgcHTMLComponent_UserManagement`	Tabella di amministrazione utenti con ruoli, stato, ricerca e un menu a discesa di azioni per riga.	Docs
ImpersonateBanner	`TsgcHTMLComponent_ImpersonateBanner`	Banner di impersonificazione admin mostrato mentre si agisce come un altro utente, con uscita con un clic.	Docs

Infrastruttura

Engine, Server e Temi

I componenti non visuali che servono le pagine e le mantengono attive.

Componente	Classe	Descrizione	Guida
EngineServer	`TsgcHTMLEngine_Server`	Engine HTML collegato a un `TsgcWebSocketHTTPServer` che serve pagine renderizzate e asset incorporati.	Docs
HTMXEngine	`TsgcHTMX_Engine_Server`	Engine htmx collegato allo stesso server. Aggancia gli handler HTTP e WebSocket, smista le richieste e i messaggi in ingresso e invia o trasmette in broadcast frammenti HTML ai browser connessi in tempo reale (`DispatchRequest`, `DispatchMessage`, `PushFragment`, `BroadcastFragment`).	Docs
PageBuilder	`TsgcHTMLPageBuilder`	Assembla i componenti registrati in una pagina responsive completa (con un editor visuale a design-time).	Docs
TemplateBootstrap	`TsgcHTMLTemplate_Bootstrap`	Racchiude il contenuto del corpo in un documento HTML Bootstrap 5 completo con tema, lingua e direzione.	Docs
ThemeController	`TsgcHTMLThemeController`	Selettore di tema a runtime la cui proprietà `Theme` (`ptDefault`, `ptDark`, `ptDarkPro`) applica il tema selezionato e il foglio di stile condiviso alla pagina.	Docs
ThemeBuilder	`TsgcHTMLThemeBuilder`	Generatore CSS la cui proprietà `Mode` (`tmLight`, `tmDark`, `tmSystem`) scrive le variabili CSS di Bootstrap a partire dai valori delle proprietà, con uno script opzionale di sincronizzazione con la preferenza del sistema operativo per `tmSystem`.	Docs
HTMXFragment	`TsgcHTMX_Fragment`	Frammento htmx out-of-band per inviare un aggiornamento parziale della pagina dal server al browser.	Docs
HTMXRouter	`TsgcHTMX_Router`	Tabella di routing di `Routes` che confronta il percorso di una richiesta in ingresso e la smista (tramite `HandleRequest`) all'handler `OnRoute` di quella rotta.	Docs