typescript-overlay-essentials 1.2.0 → 1.3.3

package/Dropdown.css

@@ -1,31 +0,0 @@
-.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

@@ -1,211 +0,0 @@
-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 DropdownOption<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: DropdownOption<T>[],
-        value: T | T[],
-        onChange: (value: T | T[] | undefined) => void,
-        maxMenuHeight?: number,
-        menuPlacement?: "top" | "bottom",
-        width?: React.CSSProperties["width"],
-        placeHolder?: string,
-        defaultValue?: DropdownOption<T> | DropdownOption<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 DropdownOption<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<DropdownOption<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<DropdownOption<T>>) => {initializedRef.current = true; onChange(selectedOption.map((opt: DropdownOption<T>) => opt.value))}}
-                maxMenuHeight={maxMenuHeight ?? 280}
-                menuPlacement={menuPlacement ?? "auto"}
-                menuPosition="fixed"
-                classNamePrefix="dropdown"
-                defaultValue={options.filter(opt => (defaultValue as DropdownOption<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<DropdownOption<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<DropdownOption<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

@@ -1,65 +0,0 @@
-.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

@@ -1,101 +0,0 @@
-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> : <></>;
-}

package/InfoOverlayWithInput.css

@@ -1,88 +0,0 @@
-.information-overlay-with-input {
-    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-with-input {
-    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;
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: scale(0.95);
-    }
-
-    to {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-
-.information-box-with-input .information-buttons {
-    display: flex;
-    justify-content: center;
-    gap: 1rem;
-    margin-top: 1.5rem;
-}
-
-    .information-box-with-input .information-buttons button {
-        font-size: 85%;
-        padding: 0.5rem 1.1rem;
-    }
-
-.information-box-with-input input[type="text"] {
-    margin-top: 15px;
-    padding: 0.75rem 1rem;
-    font-size: 1em;
-    color: var(--FastSchwarz, #111);
-    background-color: var(--FastWeiß, #fff);
-    box-shadow: inset 0 0 0 1px #ccc;
-}
-
-.information-box-with-input .headline {
-    margin-bottom: 0.75em;
-}
-
-/* ==== Dark Mode Support ==== */
-@media (prefers-color-scheme: dark) {
-    .information-box-with-input {
-        background-color: var(--HellSchwarz,#2c2c2c);
-        color: #fff;
-    }
-
-    .information-box-with-input input[type="text"] {
-        background-color: var(--HellSchwarz, #2c2c2c);
-        color: var(--FastWeiß, white);
-        box-shadow: inset 0 0 0 1px #444;
-    }
-}
-
-.information-box-with-input .closeButton {
-    right: 10px;
-    top: 10px;
-    position: absolute;
-}
-
-    .information-box-with-input .close-icon:hover {
-        color: var(--HSDAkzent);
-        cursor: pointer;
-    }

package/InfoOverlayWithInput.tsx

@@ -1,157 +0,0 @@
-import { useEffect, useState, CSSProperties } from 'react';
-import './InfoOverlayWithInput.css';
-
-// Um das InfoOverlayWithInput zu nutzen, muss der State die folgende Struktur haben:
-export interface InfoOverlayWithInputState {
-    headline?: string | undefined;
-    message?: string | undefined;
-    preInput?: string | undefined;
-    placeholder?: string | undefined;
-    cancelButtonText?: string | undefined;
-    proceedButtonText?: string | undefined;
-    handlerOk?: ((userInput: string, args?: unknown) => void) | undefined;
-    handlerCancel?: ((args?: unknown) => void) | undefined;
-    handlerArgs?: unknown;
-    addCloseButton?: boolean | undefined;
-    proceedButtonStyle?: CSSProperties | undefined;
-    cancelButtonStyle?: CSSProperties | undefined;
-}
-
-// Um das InfoOverlayWithInput zu nutzen, muss der State die folgende Struktur haben:
-export const defaultInfoOverlayWithInputState : InfoOverlayWithInputState = {
-    headline: undefined,
-    message: undefined,
-    preInput: undefined,
-    placeholder: undefined,
-    cancelButtonText: undefined,
-    proceedButtonText: undefined,
-    handlerOk: undefined,
-    handlerCancel: undefined,
-    handlerArgs: undefined,
-    addCloseButton: false,
-    proceedButtonStyle: undefined,
-    cancelButtonStyle: undefined,
-};
-// Wobei alle Attribute grundsätzlich optional sind:
-// - headline: ist die Überschrift und wird fett hinterlegt
-// - message: ist die angezeigte Nachricht
-// - preInput: Beinhaltet den Text der schon vorher im Inputfield stehen soll (ohne Angabe wird nichts angezeigt)
-// - placeholder: Was bei leerem Inputfield als Platzhalter angezeigt wird (ohne Angabe wird nichts angezeigt)
-// - 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 des Inputs ausgeführt wird (Struktur: handlerOk(userInput, handlerArgs)
-// - handlerCancel: ist die Funktion die bei Ablehnung des Inputs ausgeführt wird (Struktur: handlerCancel(handlerArgs)
-// - 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)
-// - proceedButtonStyle: ist der Style des Bestätigungsbuttons (Standardmäßig unverändert)
-// - cancelButtonStyle: ist der Style des Abbrechenbuttons (Standardmäßig unverändert)
-
-// Output: Der Input vom User wird am Ende an den handlerOk übergeben (oder bei handlerCancel ignoriert)!
-// Somit wird der handler so aufgerufen: handlerOk(UserInput, handlerArgs) oder handlerCancel(handlerArgs)
-export function InfoOverlayWithInput({ state, setState }: { state: InfoOverlayWithInputState, setState: (state: InfoOverlayWithInputState) => void }): React.ReactElement {
-
-    // Wird verwendet um das Infoverlay ein- und auszublenden
-    const [showOverlay, setShowOverlay] = useState(false);
-
-    // Wird verwendet um den Inhalt des InputFields aktuell zu halten
-    const [input, setInput] = useState<string>("");
-
-    // Sobald der State von außen aktualisiert wird triggert diese Funktion
-    // Die setzt showOverlay auf true
-    useEffect(() => {
-        if (state?.message != null || state?.headline != null) {
-            setInput(state?.preInput != null ? state.preInput : "");
-            setShowOverlay(true);
-            setTimeout(() => { document.getElementById("information-inputfield")?.focus(); }, 1);
-        }
-    }, [state]);
-
-    // Sorgt dafür, dass die Eingabe beim tippen aktualisiert wird
-    const handleInputChange = (event : React.ChangeEvent<HTMLInputElement>) => {
-        setInput(event.target.value);
-    };
-
-    // Sorgt dafür, dass auch bei Enter bestätigt wird
-    const handleInputKeyDown = (event : React.KeyboardEvent) => {
-        if (event.key === "Enter") {
-            handleAction(state.handlerOk, true);
-        }
-    };
-
-    const handleAction = (
-        handler: ((args?: unknown) => void) | ((userInput: string, args?: unknown) => void) | undefined,
-        useInput: boolean
-    ) : void => {
-        setShowOverlay(false);
-        var tempState = {
-            handler: handler,
-            handlerArgs: state.handlerArgs
-        };
-        setState(defaultInfoOverlayWithInputState);
-        if (typeof tempState.handler === 'function' && useInput)
-            (tempState.handler as ((userInput: string, args?: unknown) => void))(input, tempState.handlerArgs);
-        else if (typeof tempState.handler === 'function')
-            (tempState.handler as ((args?: unknown) => void))(tempState.handlerArgs);
-    }
-
-    return showOverlay ?
-        <div className="information-overlay-with-input">
-            <div className="information-box-with-input">
-                {state.addCloseButton?
-                    <span className="closeButton">
-                        <svg xmlns="http://www.w3.org/2000/svg"
-                            tabIndex={0}
-                            className="close-icon"
-                            onClick={() => handleAction(undefined, false)}
-                            onKeyDown={(e) => {
-                                if (e.key === 'Enter' || e.key === ' ') {
-                                    e.preventDefault(); // Verhindert Scroll bei Space
-                                    handleAction(undefined, 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><line x1="6" y1="6" x2="18" y2="18"></line>
-                        </svg>
-                    </span> : 
-                <></>}
-                <p className="headline" style={{ whiteSpace: "pre-line", wordBreak: "break-word" }}><strong>{state?.headline != null ? state.headline : ""}</strong></p>
-                <p style={{ whiteSpace: "pre-line", wordBreak: "break-word" }}>{state?.message != null ? state.message : ""}</p>
-                <div className="information-input">
-                    <input
-                        id="information-inputfield"
-                        placeholder={state?.placeholder != null ? state.placeholder : ""}
-                        pattern="^[A-Za-z0-9_-~]+$"
-                        required={true}
-                        type="text"
-                        className="form-control"
-                        value={input}
-                        onChange={handleInputChange}
-                        onKeyDown={handleInputKeyDown}
-                        tabIndex={0}
-                    ></input>
-                </div>
-                <div className="information-buttons">
-                    <button onClick={() => handleAction(state.handlerCancel, false)}
-                        className="px-4 py-2 bg-gray-300 rounded"
-                        style={state?.cancelButtonStyle != null ? state.cancelButtonStyle : {}}
-                        tabIndex={0}
-                        onKeyDown={(e) => {
-                            if (e.key === 'Enter' || e.key === ' ') {
-                                e.preventDefault(); // Verhindert Scroll bei Space
-                                handleAction(state.handlerCancel, false);
-                            }
-                        }}>
-                        {state?.cancelButtonText != null ? state.cancelButtonText : "Abbrechen"}
-                    </button>
-                    <button onClick={() => handleAction(state.handlerOk, true)}
-                        className="px-4 py-2 bg-blue-600 text-white rounded"
-                        style={state?.proceedButtonStyle != null ? state.proceedButtonStyle : {}}
-                        tabIndex = {0}>
-                        {state?.proceedButtonText != null ? state.proceedButtonText : "OK"}
-                    </button>
-                </div>
-            </div>
-        </div> : <></>;
-}