sgcHTML Feature Matrix — All Components

Komponente	Klasse	Beschreibung	Hilfe
NavBar	`TsgcHTMLComponent_NavBar`	Responsive obere Navigationsleiste mit Brand und einklappbaren Menüelementen.	Docs
Sidebar	`TsgcHTMLComponent_Sidebar`	Vertikale Seitennavigation mit Icons, Überschriften, Trennlinien und einer Fußzeile.	Docs
Breadcrumb	`TsgcHTMLComponent_Breadcrumb`	Breadcrumb-Pfad, der die aktuelle Position in einer Hierarchie anzeigt.	Docs
Tabs	`TsgcHTMLComponent_Tabs`	Tab-, Pill- oder Underline-Tab-Satz mit umschaltbaren Inhaltsbereichen.	Docs
Pagination	`TsgcHTMLComponent_Pagination`	Seitennavigations-Steuerelement, abgeleitet aus Element- oder Seitenanzahlen.	Docs
Toolbar	`TsgcHTMLComponent_Toolbar`	Schaltflächen-Toolbar, die Schaltflächen mit Trennern und Tooltips gruppiert.	Docs
TreeView	`TsgcHTMLComponent_TreeView`	Einklappbarer hierarchischer Baum, aus einem Dataset ladbar.	Docs
Stepper	`TsgcHTMLComponent_Stepper`	Assistenten-/Schrittfortschrittsanzeiger, horizontal oder vertikal.	Docs
Dropdown	`TsgcHTMLComponent_Dropdown`	Dropdown-Schaltfläche mit einem Menü aus Links, Überschriften und Trennlinien.	Docs
ButtonGroup	`TsgcHTMLComponent_ButtonGroup`	Segmentierter Satz von Schaltflächen, horizontal oder vertikal.	Docs
ListGroup	`TsgcHTMLComponent_ListGroup`	List-Group aus Links oder Elementen mit Abzeichen und Zusatzinhalt.	Docs
DashboardLayout	`TsgcHTMLDashboardLayout`	Vollständiges Dashboard-Gerüst mit fester Seitenleiste und Inhaltsbereichen.	Docs
Site	`TsgcHTMLComponent_Site`	Vollständiges Seitengerüst — Kopfbereich, Navigationsmenü, Inhalt und Fußzeile — mit einer austauschbaren Layout-Vorlage.	Docs
Splitter	`TsgcHTMLComponent_Splitter`	Zwei größenveränderbare Bereiche mit einem ziehbaren Griffsteg, horizontal oder vertikal, mit optional gespeicherter Position.	Docs

Daten & Tabellen

Grids, Kalender und Boards, die deine Datasets direkt rendern.

Komponente	Klasse	Beschreibung	Hilfe
Grid	`TsgcHTMLComponent_Grid`	Funktionsreiche Tabelle: Sortieren, Filtern, CSV-/PDF-Export, Inline-Bearbeitung, Gruppierung, virtuelles Scrollen und KI-Abfrage.	Docs
DataTable	`TsgcHTMLComponent_DataTable`	Übergeordnete Datentabelle, die Grid + Pagination mit Toolbar, Suche und Zeilenanzahl umschließt.	Docs
Calendar	`TsgcHTMLComponent_Calendar`	Kalender im Monatsraster mit Ereignispunkten und Vor-/Zurück-Navigation.	Docs
Scheduler	`TsgcHTMLComponent_Scheduler`	Kalenderplaner (Monats-/Wochenansicht), der Ereignisse nach Datum rendert.	Docs
Timeline	`TsgcHTMLComponent_Timeline`	Vertikale Zeitleiste aus datierten Ereignissen, aus einem Dataset ladbar.	Docs
KanbanBoard	`TsgcHTMLComponent_KanbanBoard`	Kanban-Board aus Spalten und ziehbaren Karten.	Docs
Gantt	`TsgcHTMLComponent_Gantt`	Gantt-Projektzeitplandiagramm mit Aufgabenfortschrittsbalken.	Docs
TreeGrid	`TsgcHTMLComponent_TreeGrid`	Bootstrap-Tabelle mit einklappbaren, hierarchischen Zeilen, aufgebaut aus Id/ParentId-Knotenpaaren.	Docs
PivotTable	`TsgcHTMLComponent_PivotTable`	Bootstrap-Pivot-Tabelle, die Zeilen und Spalten gruppiert und Kennzahlen mit Zeilen-, Spalten- und Gesamtsummen aggregiert.	Docs
ActivityFeed	`TsgcHTMLComponent_ActivityFeed`	Live-Aktivitäts-Feed (neueste zuerst) mit relativen Zeitstempeln und Out-of-Band-WebSocket-Push.	Docs
AuditTrail	`TsgcHTMLComponent_AuditTrail`	Chronologischer Audit-Log-Feed von Benutzer- und Systemaktionen mit Akteur, Aktion, Ziel und Zeitstempel.	Docs

Diagramme & Visualisierung

Datengetriebene Grafiken, aus deinen eigenen Zahlen erstellt.

Komponente	Klasse	Beschreibung	Hilfe
Chart	`TsgcHTMLComponent_Chart`	Chart.js-Diagramm: Linie, Balken, Kreis, Donut, Radar, Polar, Blase und Streuung.	Docs
Gauge	`TsgcHTMLComponent_Gauge`	Halbkreisförmiges SVG-Messgerät mit Niedrig-/Mittel-/Hoch-Farbschwellen.	Docs
Diagram	`TsgcHTMLComponent_Diagram`	Knoten-und-Pfeil-Flussdiagramm, als Inline-SVG gerendert.	Docs
Map	`TsgcHTMLComponent_Map`	Interaktive Leaflet.js-Karte (OpenStreetMap-/CartoDB-Kacheln) mit Markern.	Docs
Heatmap	`TsgcHTMLComponent_Heatmap`	Farbskaliertes SVG-Heatmap-Raster aus Zellwerten oder einem gebundenen Dataset, mit Legende und Zeilen-/Spaltenbeschriftungen.	Docs
Sparkline	`TsgcHTMLComponent_Sparkline`	Kompakte Inline-SVG-Sparkline (Linie, Balken oder Fläche) aus einer Werteserie oder einem gebundenen Dataset.	Docs
CandlestickChart	`TsgcHTMLComponent_CandlestickChart`	SVG-OHLC-Kerzenchart mit Dochten, Auf-/Ab-Farben und einem optionalen Volumenstreifen.	Docs
QRCode	`TsgcHTMLComponent_QRCode`	Reiner Pascal-ISO/IEC-18004-SVG-QR-Code aus beliebigem Text oder einer URL, mit wählbarer Fehlerkorrekturstufe.	Docs
Barcode	`TsgcHTMLComponent_Barcode`	Reiner Pascal-Code-128-SVG-Barcode aus beliebigem ASCII-Text, mit optionaler lesbarer Bildunterschrift.	Docs
TreeMap	`TsgcHTMLComponent_TreeMap`	Squarified Treemap, gerendert als eigenständiges, serverseitig erzeugtes Inline-SVG, ohne Chart-Bibliothek.	Docs

Formulare & Eingaben

Alles, was du zum Erfassen von Daten brauchst, mit Validierung und Dataset-Bindung.

Komponente	Klasse	Beschreibung	Hilfe
Form	`TsgcHTMLComponent_Form`	Datengetriebener Formular-Builder mit Validierung, Layouts und KI-Formularerzeugung.	Docs
Edit	`TsgcHTMLComponent_Edit`	Einzeiliges Texteingabefeld mit Label, Hilfetext und Dataset-Bindung.	Docs
Memo	`TsgcHTMLComponent_Memo`	Mehrzeiliges Textbereich-Eingabefeld mit Label und Hilfetext.	Docs
CheckBox	`TsgcHTMLComponent_CheckBox`	Kontrollkästchen-Eingabe mit Label und Aktiviert-Zustand.	Docs
RadioGroup	`TsgcHTMLComponent_RadioGroup`	Gruppe sich gegenseitig ausschließender Radio-Optionen.	Docs
Select	`TsgcHTMLComponent_Select`	Auswahl-Dropdown mit Optionsgruppen, Mehrfachauswahl und Dataset-Bindung.	Docs
InputGroup	`TsgcHTMLComponent_InputGroup`	Eingabe mit vorangestelltem/nachgestelltem Addon-Text.	Docs
AutoComplete	`TsgcHTMLComponent_AutoComplete`	Texteingabe mit einer HTML5-Datalist aus Vorschlägen.	Docs
DatePicker	`TsgcHTMLComponent_DatePicker`	Natives Datums-/Zeit-/Datum-Zeit-Eingabefeld.	Docs
FileUpload	`TsgcHTMLComponent_FileUpload`	Drag-and-Drop-Datei-Upload-Zone mit Multipart-Formular-POST.	Docs
RichEditor	`TsgcHTMLComponent_RichEditor`	Quill-basierter WYSIWYG-Rich-Text-Editor mit verborgenem Formularfeld.	Docs
Rating	`TsgcHTMLComponent_Rating`	Stern- (Symbol-)Bewertungsanzeige oder -eingabe.	Docs
MultiSelect	`TsgcHTMLComponent_MultiSelect`	Ein durchsuchbares Bootstrap-Mehrfachauswahl-Dropdown mit Chips, gruppierten Optionen und Dataset-Bindung.	Docs
ColorPicker	`TsgcHTMLComponent_ColorPicker`	Eine native HTML5-Farbeingabe mit optionalem Hex-Textfeld und vordefinierten Farbfeldern.	Docs
Slider	`TsgcHTMLComponent_Slider`	Ein Bootstrap-Bereichsregler mit Live-Wert-Abzeichen, Min-/Max-Beschriftungen und Farbgestaltung.	Docs
TimePicker	`TsgcHTMLComponent_TimePicker`	Eine native HTML5-Zeiteingabe mit Min-/Max-Grenzen und sekundengenauer Granularität.	Docs
SignaturePad	`TsgcHTMLComponent_SignaturePad`	Ein Pointer-Events-Canvas-Unterschriftenfeld mit den Aktionen Löschen, Rückgängig und Speichern.	Docs
Transfer	`TsgcHTMLComponent_Transfer`	Doppel-Listbox-Widget zum Verschieben von Elementen zwischen einem Verfügbar- und einem Zugewiesen-Panel, mit Filterung und Dataset-Bindung.	Docs
DateTimePicker	`TsgcHTMLComponent_DateTimePicker`	Nativer HTML5-Datum-und-Zeit-Picker, der Kalender und Uhr in einem einzigen Feld vereint.	Docs
DateRangePicker	`TsgcHTMLComponent_DateRangePicker`	Gepaarte Start- und End-Datumsfelder zur Auswahl eines Datumsbereichs, mit Min-/Max-Grenzen.	Docs
RangeSlider	`TsgcHTMLComponent_RangeSlider`	Slider mit zwei Reglern zur Auswahl eines Wertepaars (niedrig/hoch), mit Live-Wert-Badges.	Docs
CameraScanner	`TsgcHTMLComponent_CameraScanner`	Live-Kamera-Panel, das Barcodes und QR-Codes mit dem nativen BarcodeDetector des Browsers scannt, ganz ohne Drittanbieter-Bibliothek.	Docs
NumPad	`TsgcHTMLComponent_NumPad`	Numerischer Touch- und Währungs-Zahlenblock für die Kassenerfassung, mit Schnellbetrag-Tasten und lokal-unabhängiger Formatierung.	Docs

Inhalt & Layout

Karten, Medien und KPI-Kacheln zum Layout einer Seite.

Komponente	Klasse	Beschreibung	Hilfe
Panel	`TsgcHTMLComponent_Panel`	Bootstrap-Card-Panel mit Kopfzeile/Inhalt/Fußzeile, einklappbar und scrollbar.	Docs
StatCard	`TsgcHTMLComponent_StatCard`	Dashboard-KPI-/Statistik-Karte mit Icon, Trendpfeil und optionalem Verlauf.	Docs
Accordion	`TsgcHTMLComponent_Accordion`	Vertikal einklappbares Accordion aus gestapelten ausklappbaren Panels.	Docs
Carousel	`TsgcHTMLComponent_Carousel`	Bilder-Diashow/-Karussell mit Indikatoren, Steuerelementen und automatischer Wiedergabe.	Docs
Image	`TsgcHTMLComponent_Image`	Bild mit Form, responsiv/Lazy-Load, Lightbox-Link und Bildunterschrift.	Docs
Avatar	`TsgcHTMLComponent_Avatar`	Benutzer-Avatar (Bild oder Initialen) mit Größe, Form und Präsenzstatus-Punkt.	Docs
Video	`TsgcHTMLComponent_Video`	HTML5-Video-/Audioplayer plus ein YouTube-Einbettungshelfer.	Docs
Badge	`TsgcHTMLComponent_Badge`	Einzelnes Bootstrap-Abzeichen mit Farbe, Pill-Form, einem Inline-Icon und einem positionierbaren Benachrichtigungspunkt-Modus.	Docs
PDFViewer	`TsgcHTMLComponent_PDFViewer`	In die Seite eingebetteter PDF-Viewer auf Basis von pdf.js, mit Seitennavigation, Zoom, Suche, Download und Druck.	Docs
Chip	`TsgcHTMLComponent_Chip`	Kompakter Chip / Tag mit optionalem Icon, Farbe und entfernbarem Schließen-Button.	Docs

Overlays & Feedback

Dialoge, Statusflächen und Ladezustände.

Komponente	Klasse	Beschreibung	Hilfe
Modal	`TsgcHTMLComponent_Modal`	Modal-Dialog mit Titel/Inhalt/Fußzeile, Größen, zentriert und statischem Hintergrund.	Docs
Offcanvas	`TsgcHTMLComponent_Offcanvas`	Off-Canvas-Slide-in-Panel von links, rechts, oben oder unten.	Docs
Popover	`TsgcHTMLComponent_Popover`	Popover-Sprechblase an einem Trigger-Element (Klick/Hover/Fokus).	Docs
Toast	`TsgcHTMLComponent_Toast`	Toast-Benachrichtigung mit Kopfzeile, Inhalt, Zeitstempel und Auto-Ausblenden.	Docs
Snackbar	`TsgcHTMLComponent_Snackbar`	Kurzlebige Snackbar im Material-Stil mit einer optionalen Aktion.	Docs
Notification	`TsgcHTMLComponent_Notification`	Glocken-Symbol-Dropdown als Benachrichtigungszentrale mit Ungelesen-Abzeichen.	Docs
Spinner	`TsgcHTMLComponent_Spinner`	Lade-Spinner (Rahmen/Grow), dimensioniert und eingefärbt.	Docs
Placeholder	`TsgcHTMLComponent_Placeholder`	Skelett-/Platzhalter-Ladekarte mit einem animierten Schimmer.	Docs
ContextMenu	`TsgcHTMLComponent_ContextMenu`	Rechtsklick-Dropdown-Menü, begrenzt auf einen CSS-Selektor, mit Icons, Trennlinien, Überschriften und serverseitig weitergeleiteten Aktionen.	Docs
JobProgress	`TsgcHTMLComponent_JobProgress`	Live-Liste von Fortschrittsbalken für Hintergrundjobs mit Status-Abzeichen, Abbrechen-Schaltflächen und Out-of-Band-Fragment-Updates.	Docs
LogViewer	`TsgcHTMLComponent_LogViewer`	Streaming-Log-/Terminal-Viewer mit Stufenfilter, Suche und automatischem Scrollen.	Docs
ProgressBar	`TsgcHTMLComponent_ProgressBar`	Bootstrap-Fortschrittsbalken, gestreift und animiert, einzeln oder als gestapeltes Mehrfachsegment.	Docs
CommandPalette	`TsgcHTMLComponent_CommandPalette`	Ctrl+K / Cmd+K-Schnellaktionsstarter mit Substring-dann-Fuzzy-Filterung, Kategorien und serverseitig weitergeleiteten Aktionen.	Docs
EmptyState	`TsgcHTMLComponent_EmptyState`	Das Panel, das ein Grid, eine Liste oder ein Suchergebnis anzeigt, wenn keine Zeilen vorhanden sind, mit Icon, Titel, Beschreibung und bis zu zwei Buttons.	Docs

Chat & KI

Konversationelle Oberflächen, von einfachen Sprechblasen bis zu einem streamenden KI-Assistenten.

Komponente	Klasse	Beschreibung	Hilfe
ChatBox	`TsgcHTMLComponent_ChatBox`	Kartenförmige Chat-Sprechblasen-Box mit Eingabeleiste und Tipp-Indikator.	Docs
Chat	`TsgcHTMLComponent_Chat`	Chat im WhatsApp-Stil mit Text-/Bild-/Datei-/Audio-/Videonachrichten, Lesebestätigungen und Antworten.	Docs
AIChat	`TsgcHTMLComponent_AIChat`	KI-Assistenten-Chat mit Provider-/Modellauswahl, Token-Streaming und RAG-Quellenangaben.	Docs
Presence	`TsgcHTMLComponent_Presence`	„Wer ist online"-Liste als Avatar-Stapel oder Liste, mit Live-Statusaktualisierungen.	Docs

Authentifizierung

Fertige Anmeldeabläufe, von Passwörtern bis zu Passkeys.

Komponente	Klasse	Beschreibung	Hilfe
Login	`TsgcHTMLComponent_Login`	Fertiges Anmeldeformular/-seite (Karte, zentriert oder ganzseitig) mit Angemeldet-bleiben und Hinweisen.	Docs
SocialLogin	`TsgcHTMLComponent_SocialLogin`	OAuth-Social-Login-Schaltflächenpanel (Google, Facebook, Apple, GitHub, Microsoft und mehr).	Docs
OAuthCallback	`TsgcHTMLComponent_OAuthCallback`	OAuth-Callback-/Landing-Seite im Erfolgs-, Fehler- oder Ladezustand mit automatischer Weiterleitung.	Docs
WebAuthnLogin	`TsgcHTMLComponent_WebAuthnLogin`	Passwortloses Passkey-/WebAuthn-Widget zum Anmelden und Registrieren.	Docs
RolesPermissions	`TsgcHTMLComponent_RolesPermissions`	Rollen-/Berechtigungsmatrix mit einem Kontrollkästchen pro Zelle und Live-WebSocket-Aktualisierungen der Berechtigungen.	Docs
UserManagement	`TsgcHTMLComponent_UserManagement`	Benutzerverwaltungstabelle mit Rollen, Status, Suche und einem Aktionen-Dropdown pro Zeile.	Docs
ImpersonateBanner	`TsgcHTMLComponent_ImpersonateBanner`	Admin-Impersonation-Banner, das angezeigt wird, während man als anderer Benutzer agiert, mit Ein-Klick-Ausstieg.	Docs

Infrastruktur

Engine, Server & Theming

Die nicht-visuellen Bausteine, die die Seiten ausliefern und live halten.

Komponente	Klasse	Beschreibung	Hilfe
EngineServer	`TsgcHTMLEngine_Server`	HTML-Engine, gebunden an einen `TsgcWebSocketHTTPServer`, der gerenderte Seiten und eingebettete Assets ausliefert.	Docs
HTMXEngine	`TsgcHTMX_Engine_Server`	htmx-Engine, an denselben Server angebunden. Sie hängt sich in die HTTP- und WebSocket-Handler ein, verteilt eingehende Anfragen und Nachrichten und sendet oder broadcastet HTML-Fragmente in Echtzeit an verbundene Browser (`DispatchRequest`, `DispatchMessage`, `PushFragment`, `BroadcastFragment`).	Docs
PageBuilder	`TsgcHTMLPageBuilder`	Setzt registrierte Komponenten zu einer vollständigen responsiven Seite zusammen (mit einem visuellen Editor zur Entwurfszeit).	Docs
TemplateBootstrap	`TsgcHTMLTemplate_Bootstrap`	Umschließt Inhalt in einem vollständigen Bootstrap-5-HTML-Dokument mit Thema, Sprache und Schreibrichtung.	Docs
ThemeController	`TsgcHTMLThemeController`	Laufzeit-Theme-Umschalter, dessen Eigenschaft `Theme` (`ptDefault`, `ptDark`, `ptDarkPro`) das ausgewählte Theme und das gemeinsame Stylesheet auf die Seite anwendet.	Docs
ThemeBuilder	`TsgcHTMLThemeBuilder`	CSS-Generator, dessen `Mode` (`tmLight`, `tmDark`, `tmSystem`) Bootstrap-CSS-Variablen aus Eigenschaftswerten schreibt, mit einem optionalen Skript zur Synchronisierung mit der Betriebssystem-Einstellung für `tmSystem`.	Docs
HTMXFragment	`TsgcHTMX_Fragment`	Out-of-Band-htmx-Fragment zum Übertragen eines Teilseiten-Updates vom Server an den Browser.	Docs
HTMXRouter	`TsgcHTMX_Router`	Routing-Tabelle aus `Routes`, die einen eingehenden Anfragepfad abgleicht und ihn (über `HandleRequest`) an den `OnRoute`-Handler dieser Route weiterleitet.	Docs