typescript-overlay-essentials 1.2.0 → 1.3.3

package/LoadingOverlay.css

@@ -1,110 +0,0 @@
-.loading-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background-color: rgba(255, 255, 255, 0.65);
-    z-index: 2000;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    backdrop-filter: blur(2px);
-}
-
-.loading-box {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 1rem;
-}
-
-/* Spinner (Standardfarbe für Dark Mode) */
-.loading-box .spinner {
-    width: 60px;
-    height: 60px;
-    /*border: 8px solid var(--HellSchwarz, #555);*/
-    border-top: 8px solid var(--spinner-color, #e60028);
-    border-bottom: 8px solid var(--spinner-color, #e60028);
-    border-radius: 50%;
-    animation: spin 0.75s linear infinite;
-    position: relative;
-    transition:
-        border-color 0.3s ease,
-        background-color 0.3s ease,
-        transform 0.3s ease;
-}
-
-.loading-box .spinner.is-success,
-.loading-box .spinner.is-error {
-    animation: none;
-    border-color: transparent;
-}
-
-.loading-box .spinner::before,
-.loading-box .spinner::after {
-    content: "";
-    position: absolute;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-}
-
-.loading-box .spinner.is-success {
-    background-color: var(--success-bg, #4caf50);
-}
-
-.loading-box .spinner.is-success::before {
-    width: 12px;
-    height: 24px;
-    border-right: 6px solid white;
-    border-bottom: 6px solid white;
-    transform: rotate(45deg);
-    left: 24px;
-    top: 8px;
-    opacity: 1;
-}
-
-.loading-box .spinner.is-error {
-    background-color: var(--error-bg, #e60028);
-}
-
-.loading-box .spinner.is-error::before,
-.loading-box .spinner.is-error::after {
-    width: 36px;
-    height: 6px;
-    background: white;
-    top: 20px;
-    left: 12px;
-    opacity: 1;
-}
-
-.loading-box .spinner.is-error::before {
-    transform: rotate(45deg);
-}
-
-.loading-box .spinner.is-error::after {
-    transform: rotate(-45deg);
-}
-
-.loading-box .loading-message {
-    font-size: 1.1em;
-    font-weight: bold;
-    text-align: center;
-    white-space: pre-line;
-    color: var(--FastSchwarz, #2c2c2c);
-    text-shadow:
-        -1px -1px 0 color-mix(in srgb, var(--Mittelgrau, white) 80%, var(--Dunkelgrau, black) 20%),
-        1px -1px 0  color-mix(in srgb, var(--Mittelgrau, white) 80%, var(--Dunkelgrau, black) 20%),
-        -1px  1px 0  color-mix(in srgb, var(--Mittelgrau, white) 80%, var(--Dunkelgrau, black) 20%),
-        1px  1px 0  color-mix(in srgb, var(--Mittelgrau, white) 80%, var(--Dunkelgrau, black) 20%);
-}
-
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-
-    100% {
-        transform: rotate(360deg);
-    }
-}

package/LoadingOverlay.tsx

@@ -1,57 +0,0 @@
-import { useEffect, useState, ReactElement } from 'react';
-import * as React from 'react';
-import './LoadingOverlay.css';
-
-// Um das LoadingOverlay zu nutzen, muss der State die folgende Struktur haben:
-export interface LoadingOverlayState {
-    isActive?: boolean;
-    message?: string | undefined;
-    color?: string | undefined;
-    showSuccess?: boolean | undefined;
-}
-
-// Der standard LoadingOverlay Status, der zur Initialisierung genutzt werden kann
-export const defaultLoadingOverlayState: LoadingOverlayState = {
-    isActive: false,
-    message: undefined,
-    color: undefined,
-    showSuccess: undefined,
-};
-
-// Wobei alle Attribute grundsätzlich optional sind:
-// - isActive: gibt an ob das Overlay gerade aktiv sein soll oder nicht
-// - message: ist die angezeigte Nachricht
-// - color: ist dir Farbe des Loading icons (ohne Angabe HSD rot)
-// - showSuccess: zeigt bei "true" ein grünes Häkchen an und bei "false" ein rot hinterlegtes X. Bei "undefined" wird die normale Ladeanimation gezeigt.
-
-export function LoadingOverlay({ state, setState }: { state: LoadingOverlayState, setState: (state: LoadingOverlayState) => void }): ReactElement {
-    // Wird verwendet um das LoadingOverlay 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?.isActive) {
-            setShowOverlay(true);
-        }
-        else {
-            setState(defaultLoadingOverlayState);
-            setShowOverlay(false);
-        }
-    }, [state, setState]);
-    
-    return showOverlay ? (
-        <div className="loading-overlay">
-            <div className="loading-box">
-                <div className={"spinner " + (state.showSuccess === undefined ? "is-loading" : (state.showSuccess ? "is-success" : "is-error"))}
-                    style={{
-                        "--spinner-color": state.color ?? "#e60028",
-                        "--success-bg": state.color ?? "#42ab34",
-                        "--error-bg": state.color ?? "#e60028",
-                    } as React.CSSProperties }
-                />
-                {state.message && <p className="loading-message">{state.message}</p>}
-            </div>
-        </div>
-    ) : <></>;
-}

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;
-    }