typescript-overlay-essentials 1.2.0 → 1.3.0

package/MultipleChoiceOverlay.css

@@ -1,170 +0,0 @@
-.multiplechoice-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;
-}
-
-.multiplechoice-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;
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: scale(0.95);
-    }
-
-    to {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-
-.multiplechoice-box .headline {
-    margin-bottom: 0.75em;
-}
-
-.multiplechoice-box .information-buttons {
-    display: flex;
-    justify-content: center;
-    gap: 1rem;
-    margin-top: 1.5rem;
-}
-
-    .multiplechoice-box .information-buttons button {
-        font-size: 85%;
-        padding: 0.5rem 1.1rem;
-    }
-
-/* === Stylisierte Checkbox === */
-.multiplechoice-box .choices-input {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.multiplechoice-box .choices-input input[type="checkbox"] {
-    appearance: none;
-    width: 20px;
-    height: 20px;
-    border: 2px solid white;
-    background-color: var(--FastWeiß, white); 
-    border-color: var(--Mittelgrau, #ccc);
-    border-radius: 4px;
-    cursor: pointer;
-    transition: background-color 0.2s, border-color 0.2s;
-    position: relative;
-    margin-right: 0.5rem;
-}
-
-    .multiplechoice-box .choices-input input[type="checkbox"]:checked {
-        background-color: var(--DunkelAkzent, #4aabf5) ;
-        border-color: var(--DunkelAkzent, #4aabf5) ;
-    }
-
-        .multiplechoice-box .choices-input input[type="checkbox"]:hover {
-            background-color: var(--Hellgrau, #ddd); 
-            border-color: var(--Dunkelgrau, #999);
-        }
-
-        .multiplechoice-box .choices-input input[type="checkbox"]:checked:hover {
-            background-color: var(--HSDAkzent, #4aabf5) ;
-            border-color: var(--HSDAkzent, #4aabf5) ;
-        }
-
-
-        /* Häkchen aus zwei Linien */
-        .multiplechoice-box .choices-input input[type="checkbox"]:checked::after {
-            content: "";
-            position: absolute;
-            left: 5px;
-            top: 2px;
-            width: 5px;
-            height: 10px;
-            border: solid white;
-            border-width: 0 2px 2px 0;
-            transform: rotate(45deg);
-        }
-
-    .multiplechoice-box .choices-input input[type="checkbox"]:focus {
-        outline: none;
-        box-shadow: 0 0 0 2px var(--MittelAkzent, rgba(74, 171, 245));
-    }
-
-.multiplechoice-box .choice-label {
-    justify-content: flex-start;
-    display: flex;
-    align-items: center;
-    margin-bottom: 0.5rem;
-    vertical-align: middle;
-}
-
-.multiplechoice-box .choices-container{
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.5rem;
-    width: max-content;
-    padding: 1rem;
-}
-
-/* Light Mode */
-@media (prefers-color-scheme: dark) {
-    
-    .multiplechoice-box {
-        background-color: var(--HellSchwarz,#2c2c2c);
-        color: var(--FastWeiß, white);
-    }
-
-    .multiplechoice-box .choices-input input[type="checkbox"] {
-        background-color: var(--Dunkelgrau, #888);
-        background-color: var(--FastSchwarz,#222);
-    }
-
-        .multiplechoice-box .choices-input input[type="checkbox"]:checked {
-            background-color: var(--DunkelAkzent, #4aabf5);
-            border-color: var(--DunkelAkzent, #4aabf5);
-        }
-
-        .multiplechoice-box .choices-input input[type="checkbox"]:hover {
-            background-color: var(--Dunkelgrau, #ddd); 
-            border-color: var(--Hellgrau, #999);
-        }
-
-        .multiplechoice-box .choices-input input[type="checkbox"]:checked:hover {
-            background-color: var(--HSDAkzent, #4aabf5) ;
-            border-color: var(--HSDAkzent, #4aabf5) ;
-        }
-
-            .multiplechoice-box .choices-input input[type="checkbox"]:checked::after {
-                border-color: white;
-            }
-}
-
-.multiplechoice-box .closeButton {
-    right: 10px;
-    top: 10px;
-    position: absolute;
-}
-
-    .multiplechoice-box .close-icon:hover {
-        color: var(--HSDAkzent);
-        cursor: pointer;
-    }

package/MultipleChoiceOverlay.tsx

@@ -1,170 +0,0 @@
-import { useEffect, useState, CSSProperties } from 'react';
-import './MultipleChoiceOverlay.css';
-
-
-// Um das MultipleChoiceOverlay zu nutzen, muss der State die folgende Struktur haben:
-export interface MultipleChoiceOverlayState {
-    headline?: string | undefined;
-    message?: string | undefined;
-    choices: string[] | [];
-    preInput?: 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;
-}
-
-// Der standard MultipleChoiceOverlay Status, der zur Initialisierung genutzt werden kann
-export const defaultMultipleChoiceState: MultipleChoiceOverlayState = {
-    headline: undefined,
-    message: undefined,
-    choices: [],
-    preInput: 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
-// - choices: Ein String-Array mit den Optionen die ausgewählt werden können (ohne Angabe gibt es keine Auswahl)
-// - preInput: Ein String-Array: Die Einträge sind stadardmäßig ausgewählt alle anderen nicht ausgewählt
-// - 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 MultipleChoiceOverlay({ state, setState }: { state: MultipleChoiceOverlayState, setState: (state: MultipleChoiceOverlayState) => void }): React.ReactElement {
-
-    // Wird verwendet um das Infoverlay ein- und auszublenden
-    const [showOverlay, setShowOverlay] = useState(false);
-
-    // Wird verwendet um die ausgewählten Choices 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("confirmButton")?.focus(); }, 1);
-        }
-    }, [state]);
-
-    // Toggled die Auswahl eines Choices
-    // Setzt dafür den aktuellen Input auf den neuen Input + Choice
-    const toggle = (choice : string) : void => {
-        if (input.includes(choice)) {
-            setInput(input.filter(item => item !== choice)); // Entfernt den Choice wenn er schon ausgewählt ist
-        }
-        else {
-            setInput([...input, choice]); // Fügt den Choice hinzu wenn er noch nicht ausgewählt ist
-        }
-    }
-
-    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(defaultMultipleChoiceState);
-        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="multiplechoice-overlay">
-            <div className="multiplechoice-box">
-                {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" id="theHeadline" tabIndex={0} style={{ whiteSpace: "pre-line", wordBreak: "break-word" }}><strong>{state?.headline != null ? state.headline : ""}</strong></p>
-                <p tabIndex={0} style={{ whiteSpace: "pre-line", wordBreak: "break-word" }}>{state?.message != null ? state.message : ""}</p>
-                <div className="choices-input">
-                    <div className="choices-container">
-                        {state?.choices.map(choice => (
-                            <label className="choice-label" key={choice}>
-                                <input
-                                    type="checkbox"
-                                    checked={input.includes(choice)}
-                                    onChange={() => toggle(choice)}
-                                    tabIndex={0}
-                                    onKeyDown={(e) => {
-                                        if (e.key === 'Enter' || e.key === ' ') {
-                                            e.preventDefault(); // Verhindert Scroll bei Space
-                                            toggle(choice);
-                                        }
-                                    }}
-                                />
-                                {choice}
-                            </label>
-                        ))}
-                    </div>
-                </div>
-                <div className="information-buttons">
-                    <button onClick={() => handleAction(state.handlerCancel, false)}
-                        onKeyDown={(event) => {
-                            if (event.key === "Enter" || event.key === ' ') {
-                                event.preventDefault(); // Verhindert Scroll bei Space
-                                handleAction(state.handlerCancel, false);
-                            }
-                        }}
-                        className="px-4 py-2 bg-gray-300 rounded"
-                        style={state?.cancelButtonStyle != null ? state.cancelButtonStyle : {}}>
-                        {state?.cancelButtonText != null ? state.cancelButtonText : "Abbrechen"}
-                    </button>
-                    <button onClick={() => handleAction(state.handlerOk, true)}
-                        id="confirmButton"
-                        onKeyDown={(event) => {
-                            if (event.key === "Enter" || event.key === ' ') {
-                                event.preventDefault(); // Verhindert Scroll bei Space
-                                handleAction(state.handlerOk, true);
-                            }
-                        }}
-                        className="px-4 py-2 bg-blue-600 text-white rounded"
-                        style={state?.proceedButtonStyle != null ? state.proceedButtonStyle : {}}>
-                        {state?.proceedButtonText != null ? state.proceedButtonText : "OK"}
-                    </button>
-                </div>
-            </div>
-        </div> : <></>;
-}

package/MultipleRadioOverlay.css

@@ -1,170 +0,0 @@
-.multipleradio-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;
-}
-
-.multipleradio-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;
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: scale(0.95);
-    }
-
-    to {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-
-.multipleradio-box .headline {
-    margin-bottom: 0.75em;
-}
-
-.multipleradio-box .information-buttons {
-    display: flex;
-    justify-content: center;
-    gap: 1rem;
-    margin-top: 1.5rem;
-}
-
-    .multipleradio-box .information-buttons button {
-        font-size: 85%;
-        padding: 0.5rem 1.1rem;
-    }
-
-/* === Stylisierte Checkbox === */
-.multipleradio-box .radios-input {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.multipleradio-box .radios-input input[type="checkbox"] {
-    appearance: none;
-    width: 20px;
-    height: 20px;
-    border: 2px solid white;
-    background-color: var(--FastWeiß, white); 
-    border-color: var(--Mittelgrau, #ccc);
-    border-radius: 4px;
-    cursor: pointer;
-    transition: background-color 0.2s, border-color 0.2s;
-    position: relative;
-    margin-right: 0.5rem;
-}
-
-    .multipleradio-box .radios-input input[type="checkbox"]:checked {
-        background-color: var(--DunkelAkzent, #4aabf5) ;
-        border-color: var(--DunkelAkzent, #4aabf5) ;
-    }
-
-        .multipleradio-box .radios-input input[type="checkbox"]:hover {
-            background-color: var(--Hellgrau, #ddd); 
-            border-color: var(--Dunkelgrau, #999);
-        }
-
-        .multipleradio-box .radios-input input[type="checkbox"]:checked:hover {
-            background-color: var(--HSDAkzent, #4aabf5) ;
-            border-color: var(--HSDAkzent, #4aabf5) ;
-        }
-
-
-        /* Häkchen aus zwei Linien */
-        .multipleradio-box .radios-input input[type="checkbox"]:checked::after {
-            content: "";
-            position: absolute;
-            left: 5px;
-            top: 2px;
-            width: 5px;
-            height: 10px;
-            border: solid white;
-            border-width: 0 2px 2px 0;
-            transform: rotate(45deg);
-        }
-
-    .multipleradio-box .radios-input input[type="checkbox"]:focus {
-        outline: none;
-        box-shadow: 0 0 0 2px var(--MittelAkzent, rgba(74, 171, 245));
-    }
-
-.multipleradio-box .radio-label {
-    justify-content: flex-start;
-    display: flex;
-    align-items: center;
-    margin-bottom: 0.5rem;
-    vertical-align: middle;
-}
-
-.multipleradio-box .radios-container{
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.5rem;
-    width: max-content;
-    padding: 1rem;
-}
-
-/* Light Mode */
-@media (prefers-color-scheme: dark) {
-    
-    .multipleradio-box {
-        background-color: var(--HellSchwarz,#2c2c2c);
-        color: var(--FastWeiß, white);
-    }
-
-    .multipleradio-box .radios-input input[type="checkbox"] {
-        background-color: var(--Dunkelgrau, #888);
-        background-color: var(--FastSchwarz,#222);
-    }
-
-        .multipleradio-box .radios-input input[type="checkbox"]:checked {
-            background-color: var(--DunkelAkzent, #4aabf5);
-            border-color: var(--DunkelAkzent, #4aabf5);
-        }
-
-        .multipleradio-box .radios-input input[type="checkbox"]:hover {
-            background-color: var(--Dunkelgrau, #ddd); 
-            border-color: var(--Hellgrau, #999);
-        }
-
-        .multipleradio-box .radios-input input[type="checkbox"]:checked:hover {
-            background-color: var(--HSDAkzent, #4aabf5) ;
-            border-color: var(--HSDAkzent, #4aabf5) ;
-        }
-
-            .multipleradio-box .radios-input input[type="checkbox"]:checked::after {
-                border-color: white;
-            }
-}
-
-.multipleradio-box .closeButton {
-    right: 10px;
-    top: 10px;
-    position: absolute;
-}
-
-    .multipleradio-box .close-icon:hover {
-        color: var(--HSDAkzent);
-        cursor: pointer;
-    }

package/MultipleRadioOverlay.tsx

@@ -1,158 +0,0 @@
-import { useEffect, useState, CSSProperties } from 'react';
-import './MultipleRadioOverlay.css';
-
-
-// Um das MultipleRadioOverlay zu nutzen, muss der State die folgende Struktur haben:
-export interface MultipleRadioOverlayState {
-    headline?: string | undefined;
-    message?: string | undefined;
-    choices: string[] | [];
-    preInput?: 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 MultipleRadioOverlay zu nutzen, muss der State die folgende Struktur haben:
-export const defaultMultipleRadioState: MultipleRadioOverlayState = {
-    headline: undefined,
-    message: undefined,
-    choices: [],
-    preInput: 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
-// - choices: Ein String-Array mit den Optionen die ausgewählt werden können (ohne Angabe gibt es keine Auswahl)
-// - preInput: Ein String: Dieser Eintrag ist stadardmäßig ausgewählt
-// - 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 MultipleRadioOverlay({ state, setState }: { state: MultipleRadioOverlayState, setState: (state: MultipleRadioOverlayState) => void }): React.ReactElement {
-
-    // Wird verwendet um das Infoverlay ein- und auszublenden
-    const [showOverlay, setShowOverlay] = useState<boolean>(false);
-
-    // Wird verwendet um die ausgewählte Wahl 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("confirmButton")?.focus(); }, 1);
-        }
-    }, [state]);
-
-    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(defaultMultipleRadioState);
-        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="multipleradio-overlay">
-            <div className="multipleradio-box">
-                {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" id = "theHeadline" tabIndex={0} style={{ whiteSpace: "pre-line", wordBreak: "break-word" }}><strong>{state?.headline != null ? state.headline : ""}</strong></p>
-                <p tabIndex={0} style={{ whiteSpace: "pre-line", wordBreak: "break-word" }}>{state?.message != null ? state.message : ""}</p>
-                <div className="radios-input">
-                    <div className="radios-container">
-                        {state?.choices.map(choice => (
-                            <label className="radio-label" key={choice}>
-                                <input
-                                    type="radio"
-                                    checked={input === choice}
-                                    onChange={() => setInput(choice)}
-                                    tabIndex={0}
-                                    onKeyDown={(e) => {
-                                        if (e.key === 'Enter' || e.key === ' ') {
-                                            e.preventDefault(); // Verhindert Scroll bei Space
-                                            setInput(choice);
-                                        }
-                                    }}
-                                />
-                                {choice}
-                            </label>
-                        ))}
-                    </div>
-                </div>
-                <div className="information-buttons">
-                    <button onClick={() => handleAction(state.handlerCancel, false)}
-                        onKeyDown={(event) => {
-                            if (event.key === "Enter" || event.key === ' ') {
-                                event.preventDefault(); // Verhindert Scroll bei Space
-                                handleAction(state.handlerCancel, false);
-                            }
-                        }}
-                        className="px-4 py-2 bg-gray-300 rounded"
-                        style={state?.cancelButtonStyle != null ? state.cancelButtonStyle : {}}>
-                        {state?.cancelButtonText != null ? state.cancelButtonText : "Abbrechen"}
-                    </button>
-                    <button onClick={() => handleAction(state.handlerOk, true)}
-                        id="confirmButton"
-                        onKeyDown={(event) => {
-                            if (event.key === "Enter" || event.key === ' ') {
-                                event.preventDefault(); // Verhindert Scroll bei Space
-                                handleAction(state.handlerOk, true);
-                            }
-                        }}
-                        className="px-4 py-2 bg-blue-600 text-white rounded"
-                        style={state?.proceedButtonStyle != null ? state.proceedButtonStyle : {}}>
-                        {state?.proceedButtonText != null ? state.proceedButtonText : "OK"}
-                    </button>
-                </div>
-            </div>
-        </div> : <></>;
-}

package/Toast.css

@@ -1,13 +0,0 @@
-.toast-notification {
-    font-size: 80%;
-    position: fixed;
-    top: 14rem;
-    right: 1rem;
-    background-color: var(--DunkleresGruen, #1a7f37);
-    color: white;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
-    padding: 0.8rem 1.2rem 0.65rem 1.2rem;
-    border-radius: 8px;
-    animation: fadeInOut 2.5s ease-in-out;
-    z-index: 1000;
-}