typescript-overlay-essentials 1.2.0 → 1.3.3

package/dist/ConfirmationBox.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { CSSProperties } from 'react';
+import './ConfirmationBox.css';
+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;
+}
+export declare const defaultConfirmationState: ConfirmationBoxState;
+export declare function ConfirmationBox({ state, setState }: {
+    state: ConfirmationBoxState;
+    setState: (state: ConfirmationBoxState) => void;
+}): React.ReactElement;

package/dist/ConfirmationBox.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState, useRef } from 'react';
+import './ConfirmationBox.css';
+// Der standard ComfirmationBox Status, der zur Initialisierung genutzt werden kann
+export const defaultConfirmationState = {
+    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 }) {
+    var _a, _b, _c;
+    // 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(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(() => {
+        var _a;
+        if (state === null || state === void 0 ? void 0 : state.handlerOk) {
+            if ((_a = state.activateConfirm) !== null && _a !== void 0 ? _a : true) {
+                setShowConfirm(true);
+                setTimeout(() => { var _a; (_a = document.getElementById("confirmButton")) === null || _a === void 0 ? void 0 : _a.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(() => {
+            var _a;
+            (_a = overlayRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }, 0);
+    }, [state]);
+    const handleAction = (handler) => {
+        setShowConfirm(false);
+        const tempState = {
+            handler: handler,
+            handlerArgs: state.handlerArgs
+        };
+        setState(defaultConfirmationState);
+        if (typeof tempState.handler === 'function')
+            tempState.handler(tempState.handlerArgs);
+    };
+    return showConfirm ?
+        _jsx("div", { className: "confirmation-overlay", tabIndex: 0, ref: overlayRef, children: _jsxs("div", { className: "confirmation-box", children: [state.addCloseButton ?
+                        _jsx("span", { className: "closeButton", children: _jsxs("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\u00DFen", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) }) :
+                        _jsx(_Fragment, {}), (state === null || state === void 0 ? void 0 : state.headline) !== undefined ? _jsx("p", { className: "headline", style: { whiteSpace: "pre-line", wordBreak: "break-word" }, children: _jsx("strong", { children: state === null || state === void 0 ? void 0 : state.headline }) }) : _jsx(_Fragment, {}), _jsx("p", { style: { whiteSpace: "pre-line", wordBreak: "break-word" }, children: (_b = (_a = state.message1) !== null && _a !== void 0 ? _a : state.message) !== null && _b !== void 0 ? _b : "" }), _jsx("p", { style: { whiteSpace: "pre-line", wordBreak: "break-word" }, children: _jsx("strong", { children: (_c = state.message2) !== null && _c !== void 0 ? _c : "" }) }), _jsxs("div", { className: "confirmation-buttons", children: [_jsx("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 === null || state === void 0 ? void 0 : state.cancelButtonStyle) !== undefined ? state.cancelButtonStyle : {}, children: state.cancelButtonText ? state.cancelButtonText : "Abbrechen" }), _jsx("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 === null || state === void 0 ? void 0 : state.proceedButtonStyle) !== undefined ? state.proceedButtonStyle : {}, children: state.proceedButtonText ? state.proceedButtonText : "OK" })] })] }) }) : _jsx(_Fragment, {});
+}

package/dist/Dropdown.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import './Dropdown.css';
+export interface DropdownOption<T = string> {
+    value: T;
+    label: string;
+    disabled?: boolean;
+    indent?: number;
+}
+export declare function Dropdown<T = string>({ selections, value, onChange, maxMenuHeight, menuPlacement, width, placeHolder, defaultValue, isMulti, cardColorVariant, ignoreDarkMode, ...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;

package/dist/Dropdown.js

@@ -0,0 +1,141 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect, useState } from 'react';
+import Select from 'react-select';
+import './Dropdown.css';
+// 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({ selections, value, onChange, maxMenuHeight, menuPlacement, width, placeHolder, defaultValue, isMulti = false, cardColorVariant = false, ignoreDarkMode = false, ...rest }) {
+    const initializedRef = useRef(false);
+    const options = selections.map(({ value, label, disabled, indent }) => ({ value: value, label: label, isDisabled: disabled !== null && disabled !== void 0 ? disabled : false, indent }));
+    if (!initializedRef.current && Array.isArray(value) && value.length === 0 && Array.isArray(defaultValue) && defaultValue.length > 0) {
+        value = options.filter(opt => defaultValue.map(({ value }) => (value)).includes(opt.value)).map(opt => opt.value);
+    }
+    function usePrefersDarkMode() {
+        const [isDarkMode, setIsDarkMode] = useState(window.matchMedia('(prefers-color-scheme: dark)').matches);
+        useEffect(() => {
+            const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+            const handler = (event) => 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) {
+        return typeof value === "object" && value !== null && "id" in value;
+    }
+    return isMulti || Array.isArray(defaultValue) ? (_jsx(Select, { className: "custom-select", isMulti: true, placeholder: placeHolder !== null && placeHolder !== void 0 ? 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.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.includes(opt.value))) // Ansonsten einfach alle Optionen, die in den values vorkommen
+        , onChange: (selectedOption) => { initializedRef.current = true; onChange(selectedOption.map((opt) => opt.value)); }, maxMenuHeight: maxMenuHeight !== null && maxMenuHeight !== void 0 ? maxMenuHeight : 280, menuPlacement: menuPlacement !== null && menuPlacement !== void 0 ? menuPlacement : "auto", menuPosition: "fixed", classNamePrefix: "dropdown", defaultValue: options.filter(opt => defaultValue.map(({ value }) => (value)).includes(opt.value)), formatOptionLabel: ({ label, indent }, { context }) => {
+            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) => ({
+                ...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) => ({
+                ...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) => ({
+                ...provided,
+                overflowY: "auto",
+                padding: 0,
+                backgroundColor: isDarkMode ? (cardColorVariant ? 'var(--FastSchwarz, black)' : 'black') : cardColorVariant ? 'var(--FastWeiß, white)' : 'white',
+                color: isDarkMode ? 'white' : 'black',
+            }),
+            option: (provided, state) => ({
+                ...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 })) : (_jsx(Select, { className: "custom-select", isMulti: false, placeholder: placeHolder !== null && placeHolder !== void 0 ? 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), onChange: (selectedOption) => { var _a; return onChange((_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) !== null && _a !== void 0 ? _a : undefined); }, maxMenuHeight: maxMenuHeight !== null && maxMenuHeight !== void 0 ? maxMenuHeight : 280, menuPlacement: menuPlacement !== null && menuPlacement !== void 0 ? menuPlacement : "auto", menuPosition: "fixed", classNamePrefix: "dropdown", defaultValue: defaultValue, formatOptionLabel: ({ label, indent }, { context }) => {
+            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) => ({
+                ...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) => ({
+                ...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) => ({
+                ...provided,
+                overflowY: "auto",
+                padding: 0,
+                backgroundColor: isDarkMode ? (cardColorVariant ? 'var(--FastSchwarz, black)' : 'black') : cardColorVariant ? 'var(--FastWeiß, white)' : 'white',
+                color: isDarkMode ? 'white' : 'black',
+            }),
+            option: (provided, state) => ({
+                ...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/dist/InfoOverlay.d.ts

@@ -0,0 +1,17 @@
+import { CSSProperties } from 'react';
+import * as React from 'react';
+import './InfoOverlay.css';
+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;
+}
+export declare const defaultInfoOverlayState: InfoOverlayState;
+export declare function InfoOverlay({ state, setState }: {
+    state: InfoOverlayState;
+    setState: (state: InfoOverlayState) => void;
+}): React.ReactElement;

package/dist/InfoOverlay.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import './InfoOverlay.css';
+// Der standard InfoOverlay Status, der zur Initialisierung genutzt werden kann
+export const defaultInfoOverlayState = {
+    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 }) {
+    // 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 === null || state === void 0 ? void 0 : state.message) !== undefined || (state === null || state === void 0 ? void 0 : state.headline) !== undefined) {
+            setShowOverlay(true);
+            setTimeout(() => { var _a; (_a = document.getElementById("infoButton")) === null || _a === void 0 ? void 0 : _a.focus(); }, 5);
+        }
+    }, [state]);
+    const handleAction = () => {
+        setShowOverlay(false);
+        const tempState = {
+            handler: state.handler,
+            handlerArgs: state.handlerArgs
+        };
+        setState(defaultInfoOverlayState);
+        if (typeof tempState.handler === 'function')
+            tempState.handler(tempState.handlerArgs);
+    };
+    return showOverlay ?
+        _jsx("div", { className: "information-overlay", tabIndex: 0, children: _jsxs("div", { className: "information-box", style: (state === null || state === void 0 ? void 0 : state.style) !== undefined ? state.style : {}, children: [state.addCloseButton ?
+                        _jsx("span", { className: "closeButton", children: _jsxs("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\u00DFen", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) }) :
+                        _jsx(_Fragment, {}), _jsx("p", { className: "headline", tabIndex: 0, style: { whiteSpace: "pre-line" }, children: _jsx("strong", { children: (state === null || state === void 0 ? void 0 : state.headline) !== undefined ? state.headline : "" }) }), _jsx("p", { tabIndex: 0, style: { whiteSpace: "pre-line", wordBreak: "break-word" }, children: (state === null || state === void 0 ? void 0 : state.message) !== undefined ? state.message : "" }), _jsx("div", { className: "information-buttons", children: _jsx("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", children: (state === null || state === void 0 ? void 0 : state.proceedButtonText) !== undefined ? state.proceedButtonText : "OK" }) })] }) }) : _jsx(_Fragment, {});
+}

package/dist/InfoOverlayWithInput.d.ts

@@ -0,0 +1,22 @@
+import { CSSProperties } from 'react';
+import * as React from 'react';
+import './InfoOverlayWithInput.css';
+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;
+}
+export declare const defaultInfoOverlayWithInputState: InfoOverlayWithInputState;
+export declare function InfoOverlayWithInput({ state, setState }: {
+    state: InfoOverlayWithInputState;
+    setState: (state: InfoOverlayWithInputState) => void;
+}): React.ReactElement;

package/dist/InfoOverlayWithInput.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import './InfoOverlayWithInput.css';
+// Um das InfoOverlayWithInput zu nutzen, muss der State die folgende Struktur haben:
+export const defaultInfoOverlayWithInputState = {
+    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 }) {
+    // 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("");
+    // Sobald der State von außen aktualisiert wird triggert diese Funktion
+    // Die setzt showOverlay auf true
+    useEffect(() => {
+        if ((state === null || state === void 0 ? void 0 : state.message) != null || (state === null || state === void 0 ? void 0 : state.headline) != null) {
+            setInput((state === null || state === void 0 ? void 0 : state.preInput) != null ? state.preInput : "");
+            setShowOverlay(true);
+            setTimeout(() => { var _a; (_a = document.getElementById("information-inputfield")) === null || _a === void 0 ? void 0 : _a.focus(); }, 1);
+        }
+    }, [state]);
+    // Sorgt dafür, dass die Eingabe beim tippen aktualisiert wird
+    const handleInputChange = (event) => {
+        setInput(event.target.value);
+    };
+    // Sorgt dafür, dass auch bei Enter bestätigt wird
+    const handleInputKeyDown = (event) => {
+        if (event.key === "Enter") {
+            handleAction(state.handlerOk, true);
+        }
+    };
+    const handleAction = (handler, useInput) => {
+        setShowOverlay(false);
+        var tempState = {
+            handler: handler,
+            handlerArgs: state.handlerArgs
+        };
+        setState(defaultInfoOverlayWithInputState);
+        if (typeof tempState.handler === 'function' && useInput)
+            tempState.handler(input, tempState.handlerArgs);
+        else if (typeof tempState.handler === 'function')
+            tempState.handler(tempState.handlerArgs);
+    };
+    return showOverlay ?
+        _jsx("div", { className: "information-overlay-with-input", children: _jsxs("div", { className: "information-box-with-input", children: [state.addCloseButton ?
+                        _jsx("span", { className: "closeButton", children: _jsxs("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\u00DFen", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) }) :
+                        _jsx(_Fragment, {}), _jsx("p", { className: "headline", style: { whiteSpace: "pre-line", wordBreak: "break-word" }, children: _jsx("strong", { children: (state === null || state === void 0 ? void 0 : state.headline) != null ? state.headline : "" }) }), _jsx("p", { style: { whiteSpace: "pre-line", wordBreak: "break-word" }, children: (state === null || state === void 0 ? void 0 : state.message) != null ? state.message : "" }), _jsx("div", { className: "information-input", children: _jsx("input", { id: "information-inputfield", placeholder: (state === null || state === void 0 ? void 0 : 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 }) }), _jsxs("div", { className: "information-buttons", children: [_jsx("button", { onClick: () => handleAction(state.handlerCancel, false), className: "px-4 py-2 bg-gray-300 rounded", style: (state === null || state === void 0 ? void 0 : 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);
+                                    }
+                                }, children: (state === null || state === void 0 ? void 0 : state.cancelButtonText) != null ? state.cancelButtonText : "Abbrechen" }), _jsx("button", { onClick: () => handleAction(state.handlerOk, true), className: "px-4 py-2 bg-blue-600 text-white rounded", style: (state === null || state === void 0 ? void 0 : state.proceedButtonStyle) != null ? state.proceedButtonStyle : {}, tabIndex: 0, children: (state === null || state === void 0 ? void 0 : state.proceedButtonText) != null ? state.proceedButtonText : "OK" })] })] }) }) : _jsx(_Fragment, {});
+}

package/dist/InputFilter.d.ts

@@ -0,0 +1 @@
+export declare function setInputFilter(textbox: HTMLElement | undefined, inputFilter: (value: string) => boolean, errMsg: string): void;

package/{InputFilter.tsx → dist/InputFilter.js}

@@ -1,19 +1,19 @@
 // Restricts input for the given textbox to the given inputFilter function.
-export function setInputFilter(textbox: HTMLElement | undefined, inputFilter: (value: string) => boolean, errMsg: string) : void {
-    [ "input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop", "focusout" ].forEach(function(event) {
-        if(textbox) {
-            textbox.addEventListener(event, function(e: Event) {
-                const target = e.currentTarget as HTMLInputElement;
+export function setInputFilter(textbox, inputFilter, errMsg) {
+    ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop", "focusout"].forEach(function (event) {
+        if (textbox) {
+            textbox.addEventListener(event, function (e) {
+                var _a, _b, _c, _d;
+                const target = e.currentTarget;
                 if (inputFilter(target.value)) {
                     // Accepted value.
-                    if ([ "keydown", "mousedown", "focusout" ].indexOf(e.type) >= 0){
-                    target.classList.remove("input-error");
-                    target.setCustomValidity("");
+                    if (["keydown", "mousedown", "focusout"].indexOf(e.type) >= 0) {
+                        target.classList.remove("input-error");
+                        target.setCustomValidity("");
                     }
-
                     target.dataset.oldValue = target.value;
-                    target.dataset.oldSelectionStart = target.selectionStart?.toString() ?? "";
-                    target.dataset.oldSelectionEnd = target.selectionEnd?.toString() ?? "";
+                    target.dataset.oldSelectionStart = (_b = (_a = target.selectionStart) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : "";
+                    target.dataset.oldSelectionEnd = (_d = (_c = target.selectionEnd) === null || _c === void 0 ? void 0 : _c.toString()) !== null && _d !== void 0 ? _d : "";
                 }
                 else if (target.dataset.oldValue !== undefined) {
                     // Rejected value: restore the previous one.
@@ -33,4 +33,4 @@ export function setInputFilter(textbox: HTMLElement | undefined, inputFilter: (v
             });
         }
     });
-    }
+}

package/dist/LoadingOverlay.d.ts

@@ -0,0 +1,13 @@
+import { ReactElement } from 'react';
+import './LoadingOverlay.css';
+export interface LoadingOverlayState {
+    isActive?: boolean;
+    message?: string | undefined;
+    color?: string | undefined;
+    showSuccess?: boolean | undefined;
+}
+export declare const defaultLoadingOverlayState: LoadingOverlayState;
+export declare function LoadingOverlay({ state, setState }: {
+    state: LoadingOverlayState;
+    setState: (state: LoadingOverlayState) => void;
+}): ReactElement;

package/dist/LoadingOverlay.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import './LoadingOverlay.css';
+// Der standard LoadingOverlay Status, der zur Initialisierung genutzt werden kann
+export const defaultLoadingOverlayState = {
+    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 }) {
+    var _a, _b, _c;
+    // 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 === null || state === void 0 ? void 0 : state.isActive) {
+            setShowOverlay(true);
+        }
+        else {
+            setState(defaultLoadingOverlayState);
+            setShowOverlay(false);
+        }
+    }, [state, setState]);
+    return showOverlay ? (_jsx("div", { className: "loading-overlay", children: _jsxs("div", { className: "loading-box", children: [_jsx("div", { className: "spinner " + (state.showSuccess === undefined ? "is-loading" : (state.showSuccess ? "is-success" : "is-error")), style: {
+                        "--spinner-color": (_a = state.color) !== null && _a !== void 0 ? _a : "#e60028",
+                        "--success-bg": (_b = state.color) !== null && _b !== void 0 ? _b : "#42ab34",
+                        "--error-bg": (_c = state.color) !== null && _c !== void 0 ? _c : "#e60028",
+                    } }), state.message && _jsx("p", { className: "loading-message", children: state.message })] }) })) : _jsx(_Fragment, {});
+}

package/dist/MultipleChoiceOverlay.d.ts

@@ -0,0 +1,22 @@
+import { CSSProperties } from 'react';
+import * as React from 'react';
+import './MultipleChoiceOverlay.css';
+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;
+}
+export declare const defaultMultipleChoiceState: MultipleChoiceOverlayState;
+export declare function MultipleChoiceOverlay({ state, setState }: {
+    state: MultipleChoiceOverlayState;
+    setState: (state: MultipleChoiceOverlayState) => void;
+}): React.ReactElement;