typescript-overlay-essentials 1.3.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/dist/InputFilter.js

@@ -0,0 +1,36 @@
+// Restricts input for the given textbox to the given inputFilter function.
+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("");
+                    }
+                    target.dataset.oldValue = target.value;
+                    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.
+                    target.classList.add("input-error");
+                    target.setCustomValidity(errMsg);
+                    target.reportValidity();
+                    target.setAttribute("aria-invalid", "true");
+                    target.value = target.dataset.oldValue;
+                    const start = target.dataset.oldSelectionStart ? parseInt(target.dataset.oldSelectionStart) : 0;
+                    const end = target.dataset.oldSelectionEnd ? parseInt(target.dataset.oldSelectionEnd) : start;
+                    target.setSelectionRange(start, end);
+                }
+                else {
+                    // Rejected value: nothing to restore.
+                    target.value = "";
+                }
+            });
+        }
+    });
+}

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;

package/dist/MultipleChoiceOverlay.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import './MultipleChoiceOverlay.css';
+// Der standard MultipleChoiceOverlay Status, der zur Initialisierung genutzt werden kann
+export const defaultMultipleChoiceState = {
+    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 }) {
+    // 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([]);
+    // 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("confirmButton")) === null || _a === void 0 ? void 0 : _a.focus(); }, 1);
+        }
+    }, [state]);
+    // Toggled die Auswahl eines Choices
+    // Setzt dafür den aktuellen Input auf den neuen Input + Choice
+    const toggle = (choice) => {
+        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, useInput) => {
+        setShowOverlay(false);
+        var tempState = {
+            handler: handler,
+            handlerArgs: state.handlerArgs
+        };
+        setState(defaultMultipleChoiceState);
+        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: "multiplechoice-overlay", children: _jsxs("div", { className: "multiplechoice-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, 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", id: "theHeadline", tabIndex: 0, 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", { tabIndex: 0, style: { whiteSpace: "pre-line", wordBreak: "break-word" }, children: (state === null || state === void 0 ? void 0 : state.message) != null ? state.message : "" }), _jsx("div", { className: "choices-input", children: _jsx("div", { className: "choices-container", children: state === null || state === void 0 ? void 0 : state.choices.map(choice => (_jsxs("label", { className: "choice-label", children: [_jsx("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] }, choice))) }) }), _jsxs("div", { className: "information-buttons", children: [_jsx("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 === null || state === void 0 ? void 0 : state.cancelButtonStyle) != null ? state.cancelButtonStyle : {}, children: (state === null || state === void 0 ? void 0 : state.cancelButtonText) != null ? state.cancelButtonText : "Abbrechen" }), _jsx("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 === null || state === void 0 ? void 0 : state.proceedButtonStyle) != null ? state.proceedButtonStyle : {}, children: (state === null || state === void 0 ? void 0 : state.proceedButtonText) != null ? state.proceedButtonText : "OK" })] })] }) }) : _jsx(_Fragment, {});
+}

package/dist/MultipleRadioOverlay.d.ts

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

package/dist/MultipleRadioOverlay.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 './MultipleRadioOverlay.css';
+// Um das MultipleRadioOverlay zu nutzen, muss der State die folgende Struktur haben:
+export const defaultMultipleRadioState = {
+    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 }) {
+    // Wird verwendet um das Infoverlay ein- und auszublenden
+    const [showOverlay, setShowOverlay] = useState(false);
+    // Wird verwendet um die ausgewählte Wahl 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("confirmButton")) === null || _a === void 0 ? void 0 : _a.focus(); }, 1);
+        }
+    }, [state]);
+    const handleAction = (handler, useInput) => {
+        setShowOverlay(false);
+        var tempState = {
+            handler: handler,
+            handlerArgs: state.handlerArgs
+        };
+        setState(defaultMultipleRadioState);
+        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: "multipleradio-overlay", children: _jsxs("div", { className: "multipleradio-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, 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", id: "theHeadline", tabIndex: 0, 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", { tabIndex: 0, style: { whiteSpace: "pre-line", wordBreak: "break-word" }, children: (state === null || state === void 0 ? void 0 : state.message) != null ? state.message : "" }), _jsx("div", { className: "radios-input", children: _jsx("div", { className: "radios-container", children: state === null || state === void 0 ? void 0 : state.choices.map(choice => (_jsxs("label", { className: "radio-label", children: [_jsx("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] }, choice))) }) }), _jsxs("div", { className: "information-buttons", children: [_jsx("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 === null || state === void 0 ? void 0 : state.cancelButtonStyle) != null ? state.cancelButtonStyle : {}, children: (state === null || state === void 0 ? void 0 : state.cancelButtonText) != null ? state.cancelButtonText : "Abbrechen" }), _jsx("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 === null || state === void 0 ? void 0 : state.proceedButtonStyle) != null ? state.proceedButtonStyle : {}, children: (state === null || state === void 0 ? void 0 : state.proceedButtonText) != null ? state.proceedButtonText : "OK" })] })] }) }) : _jsx(_Fragment, {});
+}

package/dist/Toast.d.ts

@@ -0,0 +1,6 @@
+import { ReactElement } from 'react';
+import './Toast.css';
+export declare function Toast({ state, setState }: {
+    state: string;
+    setState: (value: string) => void;
+}): ReactElement;

package/dist/Toast.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import './Toast.css';
+// Zeigt einen kleinen Toast in der oberen rechten Ecke an, der nach 2,5 Sekunden wieder verschwindet
+export function Toast({ state, setState }) {
+    // Wird verwendet um die Toast-Notification ein-/auszublenden
+    const [showToast, setShowToast] = useState(false);
+    // Wird verwendet um den Inhalt der Toast-Notification zu bestimmen
+    const [toastContent, setToastContent] = useState("");
+    useEffect(() => {
+        setToastContent(state);
+    }, [state]);
+    useEffect(() => {
+        if (toastContent && toastContent !== "") {
+            setShowToast(true);
+            setTimeout(() => { setState(""); }, 2500); // Hinweis nach 2,5 Sekunden wieder ausblenden
+        }
+        else {
+            setShowToast(false);
+        }
+    }, [toastContent, setState]);
+    return _jsx(_Fragment, { children: showToast && (_jsx("div", { className: "toast-notification", children: toastContent })) });
+}

package/dist/ToggleSwitch.d.ts

@@ -0,0 +1,11 @@
+import "./ToggleSwitch.css";
+export interface ToggleSwitchOption<T> {
+    value: T;
+    label: string;
+}
+export declare function ToggleSwitch<T>({ optionLeft, optionRight, value, onChange }: {
+    optionLeft: ToggleSwitchOption<T>;
+    optionRight: ToggleSwitchOption<T>;
+    value: T;
+    onChange: (value: T) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/ToggleSwitch.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useState } from "react";
+import "./ToggleSwitch.css";
+// Attribute vom ToggleSwitch:
+// - optionLeft: {value: valueLeft, label: labelLeft} Beschreibt die linke Option. valueLeft ist der Wert, der in "value" eingetragen wird und labelLeft, was als Option angezeigt wird.
+// - optionRight: {value: valueLeft, label: labelRight} Beschreibt die rechte Option. valueRight ist der Wert, der in "value" eingetragen wird und labelRight, was als Option angezeigt wird.
+// - 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 === valueLeft ? setValue(valueLeft) : setValue(valueRight)}} genutzt werden
+export function ToggleSwitch({ optionLeft, optionRight, value, onChange }) {
+    const containerRef = useRef(null);
+    const optionLeftRef = useRef(null);
+    const optionRightRef = useRef(null);
+    const [sliderStyle, setSliderStyle] = useState({});
+    useEffect(() => {
+        const el = value === optionLeft.value ? optionLeftRef.current : optionRightRef.current;
+        const container = containerRef.current;
+        if (!el || !container)
+            return;
+        const { offsetLeft, offsetWidth } = el;
+        setSliderStyle({
+            transform: `translateX(calc(${offsetLeft}px - 1rem))`,
+            width: `calc(${offsetWidth}px + 2rem)`
+        });
+    }, [value, optionLeft, optionRight]);
+    return (_jsxs("div", { className: "toggleWrapper", ref: containerRef, children: [_jsx("div", { className: `toggleOption ${value === optionLeft.value ? "active" : ""}`, ref: el => { optionLeftRef.current = el; }, onClick: () => onChange(optionLeft.value), children: optionLeft.label }), _jsx("div", { className: `toggleOption ${value === optionRight.value ? "active" : ""}`, ref: el => { optionRightRef.current = el; }, onClick: () => onChange(optionRight.value), children: optionRight.label }), _jsx("div", { className: `toggleSlider ${value === optionLeft.value ? "left" : "right"}`, style: sliderStyle })] }));
+}

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export { ConfirmationBox, ConfirmationBoxState, defaultConfirmationState } from './ConfirmationBox.jsx';
+export { Dropdown, DropdownOption } from './Dropdown.jsx';
+export { InfoOverlay, InfoOverlayState, defaultInfoOverlayState } from './InfoOverlay.jsx';
+export { InfoOverlayWithInput, InfoOverlayWithInputState, defaultInfoOverlayWithInputState } from './InfoOverlayWithInput.jsx';
+export { setInputFilter } from './InputFilter.jsx';
+export { LoadingOverlay, LoadingOverlayState, defaultLoadingOverlayState } from './LoadingOverlay.jsx';
+export { MultipleChoiceOverlay, MultipleChoiceOverlayState, defaultMultipleChoiceState } from './MultipleChoiceOverlay.jsx';
+export { MultipleRadioOverlay, MultipleRadioOverlayState, defaultMultipleRadioState } from './MultipleRadioOverlay.jsx';
+export { Toast } from './Toast.jsx';
+export { ToggleSwitch, ToggleSwitchOption } from './ToggleSwitch.jsx';

package/dist/index.js

@@ -0,0 +1,10 @@
+export { ConfirmationBox, defaultConfirmationState } from './ConfirmationBox.jsx';
+export { Dropdown } from './Dropdown.jsx';
+export { InfoOverlay, defaultInfoOverlayState } from './InfoOverlay.jsx';
+export { InfoOverlayWithInput, defaultInfoOverlayWithInputState } from './InfoOverlayWithInput.jsx';
+export { setInputFilter } from './InputFilter.jsx';
+export { LoadingOverlay, defaultLoadingOverlayState } from './LoadingOverlay.jsx';
+export { MultipleChoiceOverlay, defaultMultipleChoiceState } from './MultipleChoiceOverlay.jsx';
+export { MultipleRadioOverlay, defaultMultipleRadioState } from './MultipleRadioOverlay.jsx';
+export { Toast } from './Toast.jsx';
+export { ToggleSwitch } from './ToggleSwitch.jsx';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "typescript-overlay-essentials",
-  "version": "1.3.0",
+  "version": "1.3.3",
   "description": "Eine kleine Ansammlung an praktischen Tools, die out of the Box genutzt werden können. Alle enthaltenen Overlays können als Reaktion auf etwas geöffnet werden und schließen sich danach automatisch. Es beinhaltet: \\n - [ConfirmationBox]: Ein Overlay mit einer ConfirmationBox (Fortfahren / Abbrechen), \\n - [InfoOverlay]: ein simples Overlay mit einer Informationsbox die man bestätigen kann, \\n - [InfoOverlayWithInput]: Ein Overlay bei dem ein User zusätzlich ein Freitext-Feld zur Eingabe hat, \\n - [LoadingOverlay]: Ein simples Overlay mit einer Lade-animation und optionalem Ladetext, \\n - [MultipleChoiceOverlay]: Ein simples Overlay bei dem ein Nutzer aus mehreren gegebenen Aktionen auswählen kann, \\n - [MultipleRadioOverlay]: Ein simples Overlay bei dem ein Nutzer genau eine aus mehreren gegebenen Aktionen auswählen kann, \\n - [Toast]: Ein simpler Toast der für kurze Zeit grün hinterlegt in der oberen rechten Ecke des Bildschirms angezeigt wird, \\n - [ToggleSwitch]: Eine Auswahl aus zwei Optionen aus denen ein Nutzer wählen kann in der Darstellung (Option 1 | Option 2), \\n - [Dropdown]: Ein simples Dropdown-Menü (auf Basis von react-select), welches einfacherer zu Konfigurieren ist und einige default-Einstellungen hat, \\n - [InputFilter]: Ein Tool was genutzt werden kann um auf einem Inputfeld einen Regex-Filter anzuwenden und dem User so nur Eingaben erlaubt die dem Filter entsprechen.",
   "keywords": [
     "typescript",
@@ -38,7 +38,8 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsc"
+    "build": "tsc",
+    "prepare": "npm run build"
   },
   "dependencies": {
     "@emotion/react": "^11.14.0",