typescript-overlay-essentials 1.0.0

package/.github/workflows/npm-publish.yml

@@ -0,0 +1,32 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: typescript-overlay-essentials
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 24
+      - run: npm ci
+
+  publish-npm:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 24
+          registry-url: https://registry.npmjs.org/
+      - run: npm ci
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

package/ConfirmationBox.css

@@ -0,0 +1,69 @@
+.confirmation-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10000;
+}
+
+.confirmation-box {
+    background-color: var(--Hellgrau, white);
+    color: var(--HellSchwarz,#2c2c2c);
+    padding: 2rem;
+    border-radius: 12px;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
+    max-width: 500px;
+    width: 90%;
+    text-align: center;
+    animation: fadeIn 0.3s ease-in-out;
+    position: relative;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+.confirmation-box p {
+    margin-bottom: 0.5em;
+}
+
+.confirmation-box .headline {
+    margin-bottom: 0.75em;
+}
+
+.confirmation-box .confirmation-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    margin-top: 1.5rem;
+}
+
+    .confirmation-box .confirmation-buttons button {
+        font-size: 85%;
+        padding: 0.5rem 1.1rem;
+    }
+
+.confirmation-box .closeButton {
+    right: 10px;
+    top: 10px;
+    position: absolute;
+}
+
+    .confirmation-box .close-icon:hover {
+        color: var(--HSDAkzent);
+        cursor: pointer;
+    }
+

package/ConfirmationBox.tsx

@@ -0,0 +1,148 @@
+import { useEffect, useState, useRef, CSSProperties } from 'react';
+import * as React from 'react';
+import './ConfirmationBox.css';
+
+// Um die ConfirmationBox zu nutzen, muss der State die folgende Struktur haben:
+export interface ConfirmationBoxState {
+    headline?: string | undefined;
+    message?: string | undefined;
+    message1?: string | undefined;
+    message2?: string | undefined;
+    cancelButtonText?: string | undefined;
+    proceedButtonText?: string | undefined;
+    handlerOk?: ((args?: unknown) => void) | undefined;
+    handlerCancel?: ((args?: unknown) => void) | undefined;
+    handlerArgs?: unknown;
+    addCloseButton?: boolean | undefined;
+    activateConfirm?: boolean | undefined;
+    proceedButtonStyle?: CSSProperties | undefined;
+    cancelButtonStyle?: CSSProperties | undefined;
+}
+
+// Der standard ComfirmationBox Status, der zur Initialisierung genutzt werden kann
+export const defaultConfirmationState: ConfirmationBoxState = {
+    headline: undefined,
+    message: undefined,
+    message1: undefined,
+    message2: undefined,
+    cancelButtonText: undefined,
+    proceedButtonText: undefined,
+    handlerOk: undefined,
+    handlerCancel: undefined,
+    handlerArgs: undefined,
+    addCloseButton: false,
+    activateConfirm: undefined,
+    proceedButtonStyle: undefined,
+    cancelButtonStyle: undefined,
+};
+
+// Wobei alle Attribute grundsätzlich optional sind:
+// - headline: Eine fett hinterlegte Überschrift (optional)
+// - message1: ist die angezeigte Nachricht
+// - message2: ist optional und wird fett hinterlegt (z.B. ein wichtiger Hinweis oder ähnliches)
+// - message: ist optional und wird nur angezeigt, wenn message1 nicht gesetzt ist (damit message oder message1 genutzt werden kann)
+// - cancelButtonText: ist der Text der auf dem Cancel Button stehen soll (ohne Angabe wird "Abbrechen" verwendet)
+// - proceedButtonText: ist der Text der auf dem Proceed Button stehen soll (ohne Angabe wird "OK" verwendet)
+// - handlerOk: ist die Funktion die bei Bestätigung der Box ausgeführt wird (nutzt handlerargs, erwartet also nur 1 Argument!)
+// - handlerCancel: ist die Funktion die bei Ablehnung der Box ausgeführt wird (nutzt handlerargs, erwartet also nur 1 Argument!)
+// - addCloseButton: boolscher Wert, der angibt, ob ein x oben rechts als close-Button verfügbar sein soll (bricht die Aktion ohne handler ab, standardmäßig false)
+// - handlerArgs: kann im handler als weitere Argumente genutzt werden
+// - activateConfirm: ist ein Boolean, der angibt ob die ConfirmationBox angezeigt werden soll oder nicht (wenn false, wird direkt handlerOk aufgerufen) (Standardmäßig true wenn nicht anders angegeben)
+// - proceedButtonStyle: ist der Style des Bestätigungsbuttons (Standardmäßig unverändert)
+// - cancelButtonStyle: ist der Style des Abbrechenbuttons (Standardmäßig unverändert)
+
+export function ConfirmationBox({ state, setState }: { state: ConfirmationBoxState, setState: (state: ConfirmationBoxState) => void }): React.ReactElement {
+
+    // Wird verwendet um die Confirmation Boxen ein- und auszublenden
+    const [showConfirm, setShowConfirm] = useState(false);
+
+    // Damit der Fokus auf die Confirmation Box gesetzt wird, wenn sie geöffnet wird
+    // Und man sie mit Enter bestätigen kann
+    const overlayRef = useRef<HTMLDivElement>(null);
+
+    // Sobald der State von außen aktualisiert wird triggert diese Funktion
+    // Die setzt showConfirm auf true (oder ruft die übergebene Funktion auf wenn confirmationBoxen disabled sind)
+    useEffect(() => {
+        if (state?.handlerOk) {
+            if (state.activateConfirm ?? true) {
+                setShowConfirm(true);
+                setTimeout(() => { document.getElementById("confirmButton")?.focus(); }, 1);
+            }
+            else {
+                // Wenn activateConfirm explizit false ist, dann wird die übergebene Funktion direkt ausgeführt ohne ConfirmationBox
+                if (typeof state.handlerOk === 'function')
+                    state.handlerOk(state.handlerArgs);
+            }
+        }
+        setTimeout(() => {
+            overlayRef.current?.focus();
+        }, 0);
+    }, [state]);
+
+    const handleAction = (handler: ((args?: unknown) => void) | undefined) : void => {
+        setShowConfirm(false);
+        const tempState = {
+            handler: handler,
+            handlerArgs: state.handlerArgs
+        };
+        setState(defaultConfirmationState);
+        if (typeof tempState.handler === 'function')
+            tempState.handler(tempState.handlerArgs);
+    }
+
+    return showConfirm ?
+        <div className="confirmation-overlay"
+            tabIndex={0}
+            ref={overlayRef}>
+            <div className="confirmation-box">
+                {state.addCloseButton?
+                    <span className="closeButton">
+                        <svg xmlns="http://www.w3.org/2000/svg"
+                            tabIndex={0}
+                            className="close-icon"
+                            onClick={() => handleAction(undefined)}
+                            onKeyDown={(e) => {
+                                if (e.key === 'Enter' || e.key === ' ') {
+                                    e.preventDefault(); // Verhindert Scroll bei Space
+                                    handleAction(undefined);
+                                }
+                            }}
+                            role="button" aria-label="Dialog schließen"
+                            width="24" height="24" viewBox="0 0 24 24" fill="none"
+                            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                            <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+                        </svg>
+                    </span> : 
+                <></>}
+                {state?.headline !== undefined ? <p className="headline" style={{ whiteSpace: "pre-line", wordBreak: "break-word" }}><strong>{state?.headline}</strong></p> : <></>}
+                <p style={{ whiteSpace: "pre-line", wordBreak: "break-word" }}>{state.message1 ?? state.message ?? ""}</p>
+                <p style={{ whiteSpace: "pre-line", wordBreak: "break-word" }}><strong>{state.message2 ?? ""}</strong></p>
+                <div className="confirmation-buttons">
+                    <button
+                        onClick={() => handleAction(state.handlerCancel)}
+                        onKeyDown={(e) => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                                e.preventDefault(); // Verhindert Scroll bei Space
+                                handleAction(state.handlerCancel);
+                            }
+                        }}
+                        className="px-4 py-2 bg-gray-300 rounded"
+                        style={state?.cancelButtonStyle !== undefined ? state.cancelButtonStyle : {}}>
+                        {state.cancelButtonText ? state.cancelButtonText : "Abbrechen"}
+                    </button>
+                    <button onClick={() => handleAction(state.handlerOk)}
+                        id="confirmButton"
+                        onKeyDown={(e) => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                                e.preventDefault(); // Verhindert Scroll bei Space
+                                handleAction(state.handlerOk);
+                            }
+                        }}
+                        className="px-4 py-2 bg-blue-600 text-white rounded"
+                        style={state?.proceedButtonStyle !== undefined ? state.proceedButtonStyle : {}}>
+                        {state.proceedButtonText ? state.proceedButtonText : "OK"}
+                    </button>
+                </div>
+            </div>
+        </div> : <></>;
+}

package/Dropdown.css

@@ -0,0 +1,31 @@
+.custom-select {
+    border-radius: 8px;
+    border: 1px solid var(--Mittelgrau);
+    color: black;
+    background-color: white;
+    -moz-box-align: center;
+    align-items: center;
+    cursor: default;
+    display: flex;
+    flex-wrap: wrap;
+    -moz-box-pack: justify;
+    justify-content: space-between;
+    margin-bottom: 0.5rem;
+    font-size: 0.8em;
+}
+
+.dropdown__control {
+    width: 100%;
+}
+
+    .custom-select:hover, .dropdown__menu-list div:hover, .card .dropdown__menu-list div:hover {
+        cursor: pointer;
+    }
+
+    .dropdown__multi-value__remove {
+        color:  var(--FastSchwarz, black);
+    }
+
+.custom-select .dropdown__single-value {
+    color: var(--FastSchwarz, black);
+}

package/Dropdown.tsx

@@ -0,0 +1,211 @@
+import { useRef, useEffect, useState } from 'react';
+import * as React from 'react';
+import Select, { SingleValue, MultiValue}  from 'react-select'
+import type { CSSObject } from '@emotion/react';
+import './Dropdown.css';
+
+// Um das Dropdown Menü zu nutzen, müssen die Optionen das folgende Interface nutzen:
+export interface Option<T = string> {
+  value: T;
+  label: string;
+  disabled?: boolean;
+  indent?: number;
+}
+
+// Wobei alle Attribute außer dem value und dem label optional sind:
+// - value: Der Wert, der bei Auswahl gesetzt werden soll
+//      -> Dabei kann es sich um komplexe Objekte handeln, diese müssen dann ein Attribut id haben, mithilfe derer sie verglichen werden!
+// - label: Der String, der in der Auswahl angezeigt werden soll
+// - disabled: Kann auf true gesetzt werden, wenn diese Option nicht zur Auswahl verfügbar sein soll
+// - indent: Eine Zahl größer 0, kann angegeben werden, wenn die Option mit so vielen Strichen eingerückt werden soll (nur im Auswahlmenü)
+
+// Attribute vom Dropdown:
+// - selections: Das Array mit den Optionen die zur Auswahl stehen sollen
+// - value: Der Wert, der ausgewählt angezeigt werden soll (useState)
+// - onChange: Die Funktion die bei Änderung ausgeführt werden soll.
+//             Standardmäßig könnte z.B. {(value) => {value ? setValue(value) : setValue("")}} genutzt werden, wenn es sich bei value um einen String handelt
+// - maxMenuHeight: Maximale Menühöhe in Pixeln (Optional)
+// - menuPlacement: Ob das Menü oben oder unten platziert sein soll (Optional, Standard: Auto)
+// - width: Breite des Menüs als CSS Property (Optional)
+// - placeHolder: Der Platzhalter der angezeigt wird, wenn noch nichts ausgewählt ist (Optional) (Wird auch nur angezeigt, wenn value noch keinen validen Wert hat)
+// - defaultValue: Die Auswahl die von Anfang an ausgewählt ist (Optional) (sollten mehrere Werte übergeben werden, wird "isMulti" automatisch gesetzt)
+// - isMulti: Ob mehrere Optionen gleichzeitig ausgewählt werden können (Optional)
+//      - Daraufhin MUSS value ein Array sein und falls defaultValue angegeben ist, MUSS das auch ein Array sein
+// - cardColorVariant: Wenn auf true gesetzt, wird eine leicht andere Farbvariante gewählt
+// - ignoreDarkMode: Wenn auf true gesetzt wird der DarkMode ignoriert, der sonst standardmäßig angewendet wird
+// - ...rest (Optional): sorgt dafür, dass alle weiteren angegebenen Attribute (z.B. aria-label) direkt an React-Select weitergegeben werden
+
+export function Dropdown<T = string>({ selections, value, onChange, maxMenuHeight, menuPlacement, width, placeHolder, defaultValue, isMulti = false, cardColorVariant = false, ignoreDarkMode = false, ...rest} :
+    {
+        selections: Option<T>[],
+        value: T | T[],
+        onChange: (value: T | T[] | undefined) => void,
+        maxMenuHeight?: number,
+        menuPlacement?: "top" | "bottom",
+        width?: React.CSSProperties["width"],
+        placeHolder?: string,
+        defaultValue?: Option<T> | Option<T>[],
+        isMulti?: boolean,
+        cardColorVariant?: boolean,
+        ignoreDarkMode?: boolean,
+    }): React.ReactElement {
+
+        const initializedRef = useRef(false);
+        
+        const options = selections.map(({value, label, disabled, indent}) => ({value: value, label: label, isDisabled: disabled ?? false, indent}));
+
+        if(!initializedRef.current && Array.isArray(value) && value.length === 0 && Array.isArray(defaultValue) && defaultValue.length > 0) {
+            value = options.filter(opt => (defaultValue as Option<T>[]).map(({value}) => (value)).includes(opt.value)).map(opt => opt.value);
+        } 
+
+        function usePrefersDarkMode() : boolean {
+            const [isDarkMode, setIsDarkMode] = useState(
+                window.matchMedia('(prefers-color-scheme: dark)').matches
+            );
+
+            useEffect(() => {
+                const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+                const handler = (event: MediaQueryListEvent) : void => setIsDarkMode(event.matches);
+                
+                // EventListener hinzufügen
+                mediaQuery.addEventListener('change', handler);
+
+                // Aufräumen
+                return () => mediaQuery.removeEventListener('change', handler);
+            }, []);
+
+            return isDarkMode;
+        }
+        const isDarkModeRaw = usePrefersDarkMode()
+        const isDarkMode = ignoreDarkMode ? false : isDarkModeRaw;
+
+        function hasId(value: unknown): value is { id: any } {
+            return typeof value === "object" && value !== null && "id" in value;
+        }
+
+        return isMulti || Array.isArray(defaultValue) ? (
+            <Select<Option<T>, true>
+                className = "custom-select" 
+                isMulti={true}
+                placeholder = {placeHolder ?? ""}
+                options = {options}
+                value={options.length > 0 && hasId(options[0].value) ? // Wenn die values der Optionen ids haben, handelt es sich um komplexe Objekte, die zur Auswahl stehen und müssen dahingehend verglichen werden
+                                options.filter(opt => (hasId(opt.value) && (value as T[]).find(val => hasId(val) && hasId(opt.value) && val.id ===  opt.value.id))) // Dann alle Optionen, die in den values per id vorkommen
+                                : options.filter(opt => ((value as T[]).includes(opt.value))) // Ansonsten einfach alle Optionen, die in den values vorkommen
+                      }
+                onChange={(selectedOption: MultiValue<Option<T>>) => {initializedRef.current = true; onChange(selectedOption.map((opt: Option<T>) => opt.value))}}
+                maxMenuHeight={maxMenuHeight ?? 280}
+                menuPlacement={menuPlacement ?? "auto"}
+                menuPosition="fixed"
+                classNamePrefix="dropdown"
+                defaultValue={options.filter(opt => (defaultValue as Option<T>[]).map(({value}) => (value)).includes(opt.value))}
+                formatOptionLabel={({ label, indent }: { label: string; indent?: number },{ context } : { context: string }) => {
+                    if (context === 'menu') {
+                        // Alle mit indent angegebenen Werte im Dropdown-Menü einrücken
+                        return  indent && indent > 0 ? '-'.repeat(indent) + '\u00A0' + label : label;
+                    } else {
+                        // Im ausgewählten Zustand: normal
+                        return label;
+                    }
+                }}
+                styles={{
+                    container: (provided: CSSObject) => ({
+                        ...provided,
+                        backgroundColor: isDarkMode? (cardColorVariant ? 'var(--FastSchwarz, black)' : 'black') : cardColorVariant ? 'var(--FastWeiß, white)' : 'white',
+                        color: isDarkMode? 'white' : 'black',
+                        ...(width ? { width } : {})
+                    }),
+                    control: () => ({
+                        display: 'flex',
+                        ...(width ? { width } : {})
+                    }),
+                    menu: (provided: CSSObject) => ({
+                        ...provided,
+                        borderRadius: '8px', // runde Ecken für das Dropdown
+                        overflow: 'hidden',
+                        backgroundColor: isDarkMode? (cardColorVariant ? 'var(--FastSchwarz, black)' : 'black') : cardColorVariant ? 'var(--FastWeiß, white)' : 'white',
+                        color: isDarkMode? 'white' : 'black',
+                        ...(width ? { width } : {})
+                    }),
+                    menuList: (provided: CSSObject) => ({
+                        ...provided,
+                        overflowY: "auto",
+                        padding: 0,
+                        backgroundColor: isDarkMode? (cardColorVariant ? 'var(--FastSchwarz, black)' : 'black') : cardColorVariant ? 'var(--FastWeiß, white)' : 'white',
+                        color: isDarkMode? 'white' : 'black',
+                    }),
+                    option: (provided: CSSObject, state: { isFocused: boolean; isSelected: boolean }) => ({
+                        ...provided,
+                        backgroundColor: state.isFocused ? 'var(--DunkelAkzent, red)' : state.isSelected ? 'var(--MittelAkzent, blue)' : 
+                            isDarkMode? (cardColorVariant ? 'var(--FastSchwarz, black)' : 'black') : cardColorVariant ? 'var(--FastWeiß, white)' : 'white',
+                        color: state.isFocused ? 'white' : state.isSelected ? 'var(--FastSchwarz, black)' :
+                            isDarkMode? (cardColorVariant ? 'white' : 'white') : cardColorVariant ? 'black' : 'var(--FastSchwarz, black)',
+                        cursor: 'pointer',
+                    }),
+                }}
+                {...rest}
+            />
+        ) : (
+        <Select<Option<T>, false>
+                className = "custom-select" 
+                isMulti={false}
+                placeholder = {placeHolder ?? ""}
+                options = {options}
+                value={options.length > 0 && hasId(options[0].value) ? // Wenn die values der Optionen ids haben, handelt es sich um komplexe Objekte, die zur Auswahl stehen und müssen dahingehend verglichen werden
+                            options.find(opt => hasId(opt.value) && hasId(value) && opt.value.id === value.id) // Die eine Option mit der passenden id finden
+                            : options.find(opt => opt.value === value)} // Ohne Multi oder id nur die eine Option finden
+
+                onChange={(selectedOption: SingleValue<Option<T>>) => onChange(selectedOption?.value ?? undefined)}
+                maxMenuHeight={maxMenuHeight ?? 280}
+                menuPlacement={menuPlacement ?? "auto"}
+                menuPosition="fixed"
+                classNamePrefix="dropdown"
+                defaultValue={defaultValue}
+                formatOptionLabel={({ label, indent }: { label: string; indent?: number },{ context } : { context: string }) => {
+                    if (context === 'menu') {
+                        // Alle mit indent angegebenen Werte im Dropdown-Menü einrücken
+                        return  indent && indent > 0 ? '-'.repeat(indent) + '\u00A0' + label : label;
+                    } else {
+                        // Im ausgewählten Zustand: normal
+                        return label;
+                    }
+                }}
+                styles={{
+                    container: (provided: CSSObject) => ({
+                        ...provided,
+                        backgroundColor: isDarkMode? (cardColorVariant ? 'var(--FastSchwarz, black)' : 'black') : cardColorVariant ? 'var(--FastWeiß, white)' : 'white',
+                        color: isDarkMode? 'white' : 'black',
+                        ...(width ? { width } : {})
+                    }),
+                    control: () => ({
+                        display: 'flex',
+                        ...(width ? { width } : {})
+                    }),
+                    menu: (provided: CSSObject) => ({
+                        ...provided,
+                        borderRadius: '8px', // runde Ecken für das Dropdown
+                        overflow: 'hidden',
+                        backgroundColor: isDarkMode? (cardColorVariant ? 'var(--FastSchwarz, black)' : 'black') : cardColorVariant ? 'var(--FastWeiß, white)' : 'white',
+                        color: isDarkMode? 'white' : 'black',
+                        ...(width ? { width } : {})
+                    }),
+                    menuList: (provided: CSSObject) => ({
+                        ...provided,
+                        overflowY: "auto",
+                        padding: 0,
+                        backgroundColor: isDarkMode? (cardColorVariant ? 'var(--FastSchwarz, black)' : 'black') : cardColorVariant ? 'var(--FastWeiß, white)' : 'white',
+                        color: isDarkMode? 'white' : 'black',
+                    }),
+                    option: (provided: CSSObject, state: { isFocused: boolean; isSelected: boolean }) => ({
+                        ...provided,
+                        backgroundColor: state.isFocused ? 'var(--DunkelAkzent, red)' : state.isSelected ? 'var(--MittelAkzent, blue)' : 
+                            isDarkMode? (cardColorVariant ? 'var(--FastSchwarz, black)' : 'black') : cardColorVariant ? 'var(--FastWeiß, white)' : 'white',
+                        color: state.isFocused ? 'white' : state.isSelected ? 'var(--FastSchwarz, black)' :
+                            isDarkMode? (cardColorVariant ? 'white' : 'white') : cardColorVariant ? 'black' : 'var(--FastSchwarz, black)',
+                        cursor: 'pointer',
+                    }),
+                }}
+                {...rest}
+            />
+        );
+    }

package/InfoOverlay.css

@@ -0,0 +1,65 @@
+.information-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10000;
+}
+
+.information-box {
+    background-color: var(--Hellgrau, white);
+    color: var(--HellSchwarz,#2c2c2c);
+    padding: 2rem;
+    border-radius: 12px;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
+    max-width: 500px;
+    width: 90%;
+    text-align: center;
+    animation: fadeIn 0.3s ease-in-out;
+    white-space: pre-line;
+    position: relative;
+}
+
+.information-box .headline {
+    margin-bottom: 0.75em;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+.information-box .information-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    margin-top: 1.5rem;
+}
+
+.information-box .information-buttons button {
+    font-size: 85%;
+    padding: 0.5rem 1.1rem;
+}
+
+.information-box .closeButton {
+    right: 10px;
+    top: 10px;
+    position: absolute;
+}
+
+    .information-box .close-icon:hover {
+        color: var(--HSDAkzent);
+        cursor: pointer;
+    }

package/InfoOverlay.tsx

@@ -0,0 +1,101 @@
+import { useEffect, useState, CSSProperties } from 'react';
+import * as React from 'react';
+import './InfoOverlay.css';
+
+// Um das OnfoOverlay zu nutzen, muss der State die folgende Struktur haben:
+export interface InfoOverlayState {
+    headline?: string | undefined;
+    message?: string | undefined;
+    proceedButtonText?: string | undefined;
+    handler?: ((args?: unknown) => void) | undefined;
+    handlerArgs?: unknown;
+    addCloseButton?: boolean | undefined;
+    style?: CSSProperties | undefined;
+}
+
+// Der standard InfoOverlay Status, der zur Initialisierung genutzt werden kann
+export const defaultInfoOverlayState: InfoOverlayState = {
+    headline: undefined,
+    message: undefined,
+    proceedButtonText: undefined,
+    handler: undefined,
+    handlerArgs: undefined,
+    addCloseButton: false,
+    style: undefined,
+};
+
+// Wobei alle Attribute grundsätzlich optional sind:
+// - headline: ist die Überschrift und wird fett hinterlegt
+// - message: ist die angezeigte Nachricht
+// - proceedButtonText: ist der Text der auf dem Procceed Button stehen soll (ohne Angabe wird "OK" verwendet)
+// - handler: Funktion, die optional beim Bestätigen ausgeführt werden kann (Struktur: handler(args))
+// - handlerArgs: kann im handler als Argumente genutzt werden
+// - addCloseButton: boolscher Wert, der angibt, ob ein x oben rechts als close-Button verfügbar sein soll (bricht die Aktion ohne handler ab, standardmäßig false)
+// - style: ist der Style der Information-Box (Standardmäßig unverändert)
+
+export function InfoOverlay({ state, setState }: { state: InfoOverlayState, setState: (state: InfoOverlayState) => void }): React.ReactElement {
+
+    // Wird verwendet um das Infoverlay ein- und auszublenden
+    const [showOverlay, setShowOverlay] = useState(false);
+
+    // Sobald der State von außen aktualisiert wird triggert diese Funktion
+    // Die setzt showOverlay auf true
+    useEffect(() => {
+        if (state?.message !== undefined || state?.headline !== undefined) {
+            setShowOverlay(true);
+            setTimeout(() => { document.getElementById("infoButton")?.focus(); }, 5);
+        }
+    }, [state]);
+
+    const handleAction = () : void => {
+        setShowOverlay(false);
+        const tempState = {
+            handler: state.handler,
+            handlerArgs: state.handlerArgs
+        };
+        setState(defaultInfoOverlayState);
+        if (typeof tempState.handler === 'function')
+            tempState.handler(tempState.handlerArgs);
+    }
+
+    return showOverlay ?
+        <div className="information-overlay"
+            tabIndex={0}>
+            <div className="information-box" style={state?.style !== undefined ? state.style : {}}>
+                {state.addCloseButton?
+                    <span className="closeButton">
+                        <svg xmlns="http://www.w3.org/2000/svg"
+                            tabIndex={0}
+                            className="close-icon"
+                            onClick={() => setShowOverlay(false)}
+                            onKeyDown={(e) => {
+                                if (e.key === 'Enter' || e.key === ' ') {
+                                    e.preventDefault(); // Verhindert Scroll bei Space
+                                    setShowOverlay(false);
+                                }
+                            }}
+                            role="button" aria-label="Dialog schließen"
+                            width="24" height="24" viewBox="0 0 24 24" fill="none"
+                            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                            <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+                        </svg>
+                    </span> : 
+                <></>}
+                <p className="headline" tabIndex={0} style={{ whiteSpace: "pre-line" }}><strong>{state?.headline !== undefined ? state.headline : ""}</strong></p>
+                <p tabIndex={0} style={{ whiteSpace: "pre-line", wordBreak: "break-word" }}>{state?.message !== undefined ? state.message : ""}</p>
+                <div className="information-buttons">
+                    <button onClick={() => handleAction()}
+                        onKeyDown={(e) => {
+                                if (e.key === 'Enter' || e.key === ' ') {
+                                    e.preventDefault(); // Verhindert Scroll bei Space
+                                    handleAction();
+                                }
+                            }}
+                        className="px-4 py-2 bg-blue-600 text-white rounded"
+                        id="infoButton">
+                        {state?.proceedButtonText !== undefined ? state.proceedButtonText : "OK"}
+                    </button>
+                </div>
+            </div>
+        </div> : <></>;
+}