typescript-overlay-essentials 1.4.6 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/dist/ConfirmationBox.d.ts +1 -0
  2. package/dist/ConfirmationBox.js +10 -26
  3. package/dist/Dropdown.js +2 -2
  4. package/dist/InfoOverlay.js +3 -3
  5. package/dist/InfoOverlayWithInput.d.ts +1 -0
  6. package/dist/InfoOverlayWithInput.js +5 -3
  7. package/dist/InputFilter.js +1 -0
  8. package/dist/LoadingOverlay.d.ts +2 -1
  9. package/dist/LoadingOverlay.js +8 -6
  10. package/dist/MultipleChoiceOverlay.d.ts +1 -0
  11. package/dist/MultipleChoiceOverlay.js +6 -4
  12. package/dist/MultipleRadioOverlay.d.ts +1 -0
  13. package/dist/MultipleRadioOverlay.js +7 -5
  14. package/dist/Toast.js +1 -1
  15. package/dist/ToggleSwitch.css +8 -0
  16. package/dist/ToggleSwitch.js +1 -1
  17. package/package.json +1 -1
package/dist/ConfirmationBox.d.ts CHANGED
@@ -15,6 +15,7 @@ export interface ConfirmationBoxState {
15
15
  activateConfirm?: boolean;
16
16
  proceedButtonStyle?: CSSProperties;
17
17
  cancelButtonStyle?: CSSProperties;
18
+ style?: CSSProperties;
18
19
  }
19
20
  export declare const defaultConfirmationState: ConfirmationBoxState;
20
21
  export declare function ConfirmationBox({ state, setState }: {
package/dist/ConfirmationBox.js CHANGED
@@ -16,6 +16,7 @@ export const defaultConfirmationState = {
16
16
  activateConfirm: undefined,
17
17
  proceedButtonStyle: undefined,
18
18
  cancelButtonStyle: undefined,
19
+ style: undefined,
19
20
  };
20
21
  // Wobei alle Attribute grundsätzlich optional sind:
21
22
  // - headline: Eine fett hinterlegte Überschrift (optional)
@@ -31,13 +32,12 @@ export const defaultConfirmationState = {
31
32
  // - 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)
32
33
  // - proceedButtonStyle: ist der Style des Bestätigungsbuttons (Standardmäßig unverändert)
33
34
  // - cancelButtonStyle: ist der Style des Abbrechenbuttons (Standardmäßig unverändert)
35
+ // - style: ist der Style der Confirmation-Box (Standardmäßig unverändert)
34
36
  export function ConfirmationBox({ state, setState }) {
35
37
  var _a, _b, _c;
36
38
  // Wird verwendet um die Confirmation Boxen ein- und auszublenden
37
39
  const [showConfirm, setShowConfirm] = useState(false);
38
- // Damit der Fokus auf die Confirmation Box gesetzt wird, wenn sie geöffnet wird
39
- // Und man sie mit Enter bestätigen kann
40
- const overlayRef = useRef(null);
40
+ const confirmButtonRef = useRef(null);
41
41
  // Sobald der State von außen aktualisiert wird triggert diese Funktion
42
42
  // Die setzt showConfirm auf true (oder ruft die übergebene Funktion auf wenn confirmationBoxen disabled sind)
43
43
  useEffect(() => {
@@ -45,7 +45,7 @@ export function ConfirmationBox({ state, setState }) {
45
45
  if (state === null || state === void 0 ? void 0 : state.handlerOk) {
46
46
  if ((_a = state.activateConfirm) !== null && _a !== void 0 ? _a : true) {
47
47
  setShowConfirm(true);
48
- setTimeout(() => { var _a; (_a = document.getElementById("confirmButton")) === null || _a === void 0 ? void 0 : _a.focus(); }, 1);
48
+ setTimeout(() => { var _a; (_a = confirmButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
49
49
  }
50
50
  else {
51
51
  // Wenn activateConfirm explizit false ist, dann wird die übergebene Funktion direkt ausgeführt ohne ConfirmationBox
@@ -53,10 +53,6 @@ export function ConfirmationBox({ state, setState }) {
53
53
  state.handlerOk(state.handlerArgs);
54
54
  }
55
55
  }
56
- setTimeout(() => {
57
- var _a;
58
- (_a = overlayRef.current) === null || _a === void 0 ? void 0 : _a.focus();
59
- }, 0);
60
56
  }, [state]);
61
57
  const handleAction = (handler) => {
62
58
  setShowConfirm(false);
@@ -69,22 +65,10 @@ export function ConfirmationBox({ state, setState }) {
69
65
  tempState.handler(tempState.handlerArgs);
70
66
  };
71
67
  return showConfirm ?
72
- _jsx("div", { className: "confirmation-overlay", tabIndex: 0, ref: overlayRef, children: _jsxs("div", { className: "confirmation-box", children: [state.addCloseButton ?
73
- _jsx("span", { className: "closeButton", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", tabIndex: 0, className: "close-icon", onClick: () => handleAction(undefined), onKeyDown: (e) => {
74
- if (e.key === 'Enter' || e.key === ' ') {
75
- e.preventDefault(); // Verhindert Scroll bei Space
76
- handleAction(undefined);
77
- }
78
- }, 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" })] }) }) :
79
- _jsx(_Fragment, {}), (state === null || state === void 0 ? void 0 : state.headline) !== undefined ? _jsx("div", { 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("div", { 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("div", { 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) => {
80
- if (e.key === 'Enter' || e.key === ' ') {
81
- e.preventDefault(); // Verhindert Scroll bei Space
82
- handleAction(state.handlerCancel);
83
- }
84
- }, 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) => {
85
- if (e.key === 'Enter' || e.key === ' ') {
86
- e.preventDefault(); // Verhindert Scroll bei Space
87
- handleAction(state.handlerOk);
88
- }
89
- }, 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, {});
68
+ _jsx("div", { className: "confirmation-overlay", children: _jsxs("div", { className: "confirmation-box", style: (state === null || state === void 0 ? void 0 : state.style) !== undefined ? state.style : {}, role: "alertdialog", "aria-modal": "true", "aria-labelledby": (state === null || state === void 0 ? void 0 : state.headline) !== undefined ? "confirmation-headline" : undefined, "aria-label": (state === null || state === void 0 ? void 0 : state.headline) !== undefined ? undefined : "Bestätigung", "aria-describedby": "confirmation-message", onKeyDown: (event) => {
69
+ if (event.key === "Escape")
70
+ handleAction(state.handlerCancel);
71
+ }, children: [state.addCloseButton ?
72
+ _jsx("span", { className: "closeButton", children: _jsx("button", { type: "button", className: "close-icon", onClick: () => handleAction(undefined), "aria-label": "Dialog schlie\u00DFen", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", 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" })] }) }) }) :
73
+ _jsx(_Fragment, {}), (state === null || state === void 0 ? void 0 : state.headline) !== undefined ? _jsx("div", { className: "headline", id: "confirmation-headline", style: { whiteSpace: "pre-line", wordBreak: "break-word" }, children: _jsx("strong", { children: state === null || state === void 0 ? void 0 : state.headline }) }) : _jsx(_Fragment, {}), _jsx("div", { id: "confirmation-message", 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("div", { 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), type: "button", 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), ref: confirmButtonRef, type: "button", 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, {});
90
74
  }
package/dist/Dropdown.js CHANGED
@@ -46,7 +46,7 @@ export function Dropdown({ selections, value, onChange, maxMenuHeight, menuPlace
46
46
  function hasId(value) {
47
47
  return typeof value === "object" && value !== null && "id" in value;
48
48
  }
49
- 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
49
+ return isMulti || Array.isArray(defaultValue) ? (_jsx(Select, { className: "custom-select", isMulti: true, "aria-label": placeHolder !== null && placeHolder !== void 0 ? placeHolder : "Auswahl", 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
50
50
  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
51
51
  : options.filter(opt => (value.includes(opt.value))) // Ansonsten einfach alle Optionen, die in den values vorkommen
52
52
  , 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 }) => {
@@ -92,7 +92,7 @@ export function Dropdown({ selections, value, onChange, maxMenuHeight, menuPlace
92
92
  isDarkMode ? (cardColorVariant ? 'white' : 'white') : cardColorVariant ? 'black' : 'var(--FastSchwarz, black)',
93
93
  cursor: 'pointer',
94
94
  }),
95
- }, ...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
95
+ }, ...rest })) : (_jsx(Select, { className: "custom-select", isMulti: false, "aria-label": placeHolder !== null && placeHolder !== void 0 ? placeHolder : "Auswahl", 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
96
96
  options.find(opt => hasId(opt.value) && hasId(value) && opt.value.id === value.id) // Die eine Option mit der passenden id finden
97
97
  : 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 }) => {
98
98
  if (context === 'menu') {
package/dist/InfoOverlay.js CHANGED
@@ -27,7 +27,6 @@ export function InfoOverlay({ state, setState }) {
27
27
  useEffect(() => {
28
28
  if ((state === null || state === void 0 ? void 0 : state.message) !== undefined || (state === null || state === void 0 ? void 0 : state.headline) !== undefined) {
29
29
  setShowOverlay(true);
30
- setTimeout(() => { var _a; (_a = document.getElementById("infoButton")) === null || _a === void 0 ? void 0 : _a.focus(); }, 5);
31
30
  }
32
31
  }, [state]);
33
32
  const handleAction = () => {
@@ -41,14 +40,15 @@ export function InfoOverlay({ state, setState }) {
41
40
  tempState.handler(tempState.handlerArgs);
42
41
  };
43
42
  return showOverlay ?
44
- _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 ?
43
+ _jsx("div", { className: "information-overlay", children: _jsxs("div", { className: "information-box", style: (state === null || state === void 0 ? void 0 : state.style) !== undefined ? state.style : {}, role: "dialog", "aria-modal": "true", "aria-labelledby": (state === null || state === void 0 ? void 0 : state.headline) !== undefined ? "information-headline" : undefined, "aria-label": (state === null || state === void 0 ? void 0 : state.headline) !== undefined ? undefined : "Information", "aria-describedby": "information-message", onKeyDown: (event) => { if (event.key === "Escape")
44
+ handleAction(); }, children: [state.addCloseButton ?
45
45
  _jsx("span", { className: "closeButton", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", tabIndex: 0, className: "close-icon", onClick: () => setShowOverlay(false), onKeyDown: (e) => {
46
46
  if (e.key === 'Enter' || e.key === ' ') {
47
47
  e.preventDefault(); // Verhindert Scroll bei Space
48
48
  setShowOverlay(false);
49
49
  }
50
50
  }, 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" })] }) }) :
51
- _jsx(_Fragment, {}), _jsx("div", { 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("div", { 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) => {
51
+ _jsx(_Fragment, {}), _jsx("div", { className: "headline", id: "information-headline", style: { whiteSpace: "pre-line" }, children: _jsx("strong", { children: (state === null || state === void 0 ? void 0 : state.headline) !== undefined ? state.headline : "" }) }), _jsx("div", { id: "information-message", 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", { type: "button", autoFocus: true, onClick: () => handleAction(), onKeyDown: (e) => {
52
52
  if (e.key === 'Enter' || e.key === ' ') {
53
53
  e.preventDefault(); // Verhindert Scroll bei Space
54
54
  handleAction();
package/dist/InfoOverlayWithInput.d.ts CHANGED
@@ -14,6 +14,7 @@ export interface InfoOverlayWithInputState {
14
14
  addCloseButton?: boolean;
15
15
  proceedButtonStyle?: CSSProperties;
16
16
  cancelButtonStyle?: CSSProperties;
17
+ style?: CSSProperties;
17
18
  }
18
19
  export declare const defaultInfoOverlayWithInputState: InfoOverlayWithInputState;
19
20
  export declare function InfoOverlayWithInput({ state, setState }: {
package/dist/InfoOverlayWithInput.js CHANGED
@@ -15,6 +15,7 @@ export const defaultInfoOverlayWithInputState = {
15
15
  addCloseButton: false,
16
16
  proceedButtonStyle: undefined,
17
17
  cancelButtonStyle: undefined,
18
+ style: undefined,
18
19
  };
19
20
  // Wobei alle Attribute grundsätzlich optional sind:
20
21
  // - headline: ist die Überschrift und wird fett hinterlegt
@@ -29,6 +30,7 @@ export const defaultInfoOverlayWithInputState = {
29
30
  // - 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)
30
31
  // - proceedButtonStyle: ist der Style des Bestätigungsbuttons (Standardmäßig unverändert)
31
32
  // - cancelButtonStyle: ist der Style des Abbrechenbuttons (Standardmäßig unverändert)
33
+ // - style: ist der Style des LoadingOverlaysWithInput (Standardmäßig unverändert)
32
34
  // Output: Der Input vom User wird am Ende an den handlerOk übergeben (oder bei handlerCancel ignoriert)!
33
35
  // Somit wird der handler so aufgerufen: handlerOk(UserInput, handlerArgs) oder handlerCancel(handlerArgs)
34
36
  export function InfoOverlayWithInput({ state, setState }) {
@@ -42,7 +44,6 @@ export function InfoOverlayWithInput({ state, setState }) {
42
44
  if ((state === null || state === void 0 ? void 0 : state.message) != null || (state === null || state === void 0 ? void 0 : state.headline) != null) {
43
45
  setInput((state === null || state === void 0 ? void 0 : state.preInput) != null ? state.preInput : "");
44
46
  setShowOverlay(true);
45
- setTimeout(() => { var _a; (_a = document.getElementById("information-inputfield")) === null || _a === void 0 ? void 0 : _a.focus(); }, 1);
46
47
  }
47
48
  }, [state]);
48
49
  // Sorgt dafür, dass die Eingabe beim tippen aktualisiert wird
@@ -68,14 +69,15 @@ export function InfoOverlayWithInput({ state, setState }) {
68
69
  tempState.handler(tempState.handlerArgs);
69
70
  };
70
71
  return showOverlay ?
71
- _jsx("div", { className: "information-overlay-with-input", children: _jsxs("div", { className: "information-box-with-input", children: [state.addCloseButton ?
72
+ _jsx("div", { className: "information-overlay-with-input", children: _jsxs("div", { className: "information-box-with-input", style: (state === null || state === void 0 ? void 0 : state.style) !== undefined ? state.style : {}, role: "dialog", "aria-modal": "true", "aria-labelledby": (state === null || state === void 0 ? void 0 : state.headline) != null ? "information-input-headline" : undefined, "aria-label": (state === null || state === void 0 ? void 0 : state.headline) != null ? undefined : "Information", "aria-describedby": "information-input-message", onKeyDown: (event) => { if (event.key === "Escape")
73
+ handleAction(state.handlerCancel, false); }, children: [state.addCloseButton ?
72
74
  _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) => {
73
75
  if (e.key === 'Enter' || e.key === ' ') {
74
76
  e.preventDefault(); // Verhindert Scroll bei Space
75
77
  handleAction(undefined, false);
76
78
  }
77
79
  }, 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" })] }) }) :
78
- _jsx(_Fragment, {}), _jsx("div", { 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("div", { 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) => {
80
+ _jsx(_Fragment, {}), _jsx("div", { className: "headline", id: "information-input-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("div", { id: "information-input-message", 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", "aria-label": (state === null || state === void 0 ? void 0 : state.placeholder) != null ? state.placeholder : "Eingabe", autoFocus: true, 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 }) }), _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) => {
79
81
  if (e.key === 'Enter' || e.key === ' ') {
80
82
  e.preventDefault(); // Verhindert Scroll bei Space
81
83
  handleAction(state.handlerCancel, false);
package/dist/InputFilter.js CHANGED
@@ -10,6 +10,7 @@ export function setInputFilter(inputFilter, errMsg, textbox) {
10
10
  if (["keydown", "mousedown", "focusout"].indexOf(e.type) >= 0) {
11
11
  target.classList.remove("input-error");
12
12
  target.setCustomValidity("");
13
+ target.removeAttribute("aria-invalid");
13
14
  }
14
15
  target.dataset.oldValue = target.value;
15
16
  target.dataset.oldSelectionStart = (_b = (_a = target.selectionStart) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : "";
package/dist/LoadingOverlay.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { ReactElement } from 'react';
1
+ import { ReactElement, CSSProperties } from 'react';
2
2
  import * as React from 'react';
3
3
  import './LoadingOverlay.css';
4
4
  export interface LoadingOverlayState {
@@ -6,6 +6,7 @@ export interface LoadingOverlayState {
6
6
  message?: React.ReactNode;
7
7
  color?: string;
8
8
  showSuccess?: boolean;
9
+ style?: CSSProperties;
9
10
  }
10
11
  export declare const defaultLoadingOverlayState: LoadingOverlayState;
11
12
  export declare function LoadingOverlay({ state, setState }: {
package/dist/LoadingOverlay.js CHANGED
@@ -7,14 +7,16 @@ export const defaultLoadingOverlayState = {
7
7
  message: undefined,
8
8
  color: undefined,
9
9
  showSuccess: undefined,
10
+ style: undefined,
10
11
  };
11
12
  // Wobei alle Attribute grundsätzlich optional sind:
12
13
  // - isActive: gibt an ob das Overlay gerade aktiv sein soll oder nicht
13
14
  // - message: ist die angezeigte Nachricht
14
15
  // - color: ist dir Farbe des Loading icons (ohne Angabe HSD rot)
15
16
  // - showSuccess: zeigt bei "true" ein grünes Häkchen an und bei "false" ein rot hinterlegtes X. Bei "undefined" wird die normale Ladeanimation gezeigt.
17
+ // - style: ist der Style des LoadingOverlays (Standardmäßig unverändert)
16
18
  export function LoadingOverlay({ state, setState }) {
17
- var _a, _b, _c;
19
+ var _a, _b, _c, _d;
18
20
  // Wird verwendet um das LoadingOverlay ein- und auszublenden
19
21
  const [showOverlay, setShowOverlay] = useState(false);
20
22
  // Sobald der State von außen aktualisiert wird triggert diese Funktion
@@ -28,9 +30,9 @@ export function LoadingOverlay({ state, setState }) {
28
30
  setShowOverlay(false);
29
31
  }
30
32
  }, [state, setState]);
31
- 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: {
32
- "--spinner-color": (_a = state.color) !== null && _a !== void 0 ? _a : "#e60028",
33
- "--success-bg": (_b = state.color) !== null && _b !== void 0 ? _b : "#42ab34",
34
- "--error-bg": (_c = state.color) !== null && _c !== void 0 ? _c : "#e60028",
35
- } }), state.message && _jsx("div", { className: "loading-message", children: state.message })] }) })) : _jsx(_Fragment, {});
33
+ return showOverlay ? (_jsx("div", { className: "loading-overlay", role: "status", "aria-live": "polite", "aria-atomic": "true", "aria-busy": (_a = state === null || state === void 0 ? void 0 : state.isActive) !== null && _a !== void 0 ? _a : false, children: _jsxs("div", { className: "loading-box", style: (state === null || state === void 0 ? void 0 : state.style) !== undefined ? state.style : {}, children: [_jsx("div", { className: "spinner " + (state.showSuccess === undefined ? "is-loading" : (state.showSuccess ? "is-success" : "is-error")), style: {
34
+ "--spinner-color": (_b = state.color) !== null && _b !== void 0 ? _b : "#e60028",
35
+ "--success-bg": (_c = state.color) !== null && _c !== void 0 ? _c : "#42ab34",
36
+ "--error-bg": (_d = state.color) !== null && _d !== void 0 ? _d : "#e60028",
37
+ }, "aria-hidden": "true" }), state.message && _jsx("div", { className: "loading-message", children: state.message })] }) })) : _jsx(_Fragment, {});
36
38
  }
package/dist/MultipleChoiceOverlay.d.ts CHANGED
@@ -15,6 +15,7 @@ export interface MultipleChoiceOverlayState {
15
15
  addCloseButton?: boolean;
16
16
  proceedButtonStyle?: CSSProperties;
17
17
  cancelButtonStyle?: CSSProperties;
18
+ style?: CSSProperties;
18
19
  }
19
20
  export declare const defaultMultipleChoiceState: MultipleChoiceOverlayState;
20
21
  export declare function MultipleChoiceOverlay({ state, setState }: {
package/dist/MultipleChoiceOverlay.js CHANGED
@@ -16,6 +16,7 @@ export const defaultMultipleChoiceState = {
16
16
  addCloseButton: false,
17
17
  proceedButtonStyle: undefined,
18
18
  cancelButtonStyle: undefined,
19
+ style: undefined,
19
20
  };
20
21
  // Wobei alle Attribute grundsätzlich optional sind:
21
22
  // - headline: ist die Überschrift und wird fett hinterlegt
@@ -31,6 +32,7 @@ export const defaultMultipleChoiceState = {
31
32
  // - 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)
32
33
  // - proceedButtonStyle: ist der Style des Bestätigungsbuttons (Standardmäßig unverändert)
33
34
  // - cancelButtonStyle: ist der Style des Abbrechenbuttons (Standardmäßig unverändert)
35
+ // - style: ist der Style des MultipleChoiceOverlay (Standardmäßig unverändert)
34
36
  // Output: Der Input vom User wird am Ende an den handlerOk übergeben (oder bei handlerCancel ignoriert)!
35
37
  // Somit wird der handler so aufgerufen: handlerOk(UserInput, handlerArgs) oder handlerCancel(handlerArgs)
36
38
  export function MultipleChoiceOverlay({ state, setState }) {
@@ -44,7 +46,6 @@ export function MultipleChoiceOverlay({ state, setState }) {
44
46
  if ((state === null || state === void 0 ? void 0 : state.message) != null || (state === null || state === void 0 ? void 0 : state.headline) != null) {
45
47
  setInput((state === null || state === void 0 ? void 0 : state.preInput) != null ? state.preInput : []);
46
48
  setShowOverlay(true);
47
- setTimeout(() => { var _a; (_a = document.getElementById("confirmButton")) === null || _a === void 0 ? void 0 : _a.focus(); }, 1);
48
49
  }
49
50
  }, [state]);
50
51
  // Toggled die Auswahl eines Choices
@@ -70,14 +71,15 @@ export function MultipleChoiceOverlay({ state, setState }) {
70
71
  tempState.handler(tempState.handlerArgs);
71
72
  };
72
73
  return showOverlay ?
73
- _jsx("div", { className: "multiplechoice-overlay", children: _jsxs("div", { className: "multiplechoice-box", children: [state.addCloseButton ?
74
+ _jsx("div", { className: "multiplechoice-overlay", children: _jsxs("div", { className: "multiplechoice-box", style: (state === null || state === void 0 ? void 0 : state.style) !== undefined ? state.style : {}, role: "dialog", "aria-modal": "true", "aria-labelledby": (state === null || state === void 0 ? void 0 : state.headline) != null ? "multiple-choice-headline" : undefined, "aria-label": (state === null || state === void 0 ? void 0 : state.headline) != null ? undefined : "Mehrfachauswahl", "aria-describedby": "multiple-choice-message", onKeyDown: (event) => { if (event.key === "Escape")
75
+ handleAction(state.handlerCancel, false); }, children: [state.addCloseButton ?
74
76
  _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) => {
75
77
  if (e.key === 'Enter' || e.key === ' ') {
76
78
  e.preventDefault(); // Verhindert Scroll bei Space
77
79
  handleAction(undefined, false);
78
80
  }
79
81
  }, 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" })] }) }) :
80
- _jsx(_Fragment, {}), _jsx("div", { 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("div", { 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 => {
82
+ _jsx(_Fragment, {}), _jsx("div", { className: "headline", id: "multiple-choice-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("div", { id: "multiple-choice-message", 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", role: "group", "aria-label": "Auswahloptionen", children: _jsx("div", { className: "choices-container", children: state === null || state === void 0 ? void 0 : state.choices.map(choice => {
81
83
  var _a;
82
84
  return (_jsxs("label", { className: "choice-label", children: [_jsx("input", { type: "checkbox", checked: input.includes(choice), disabled: (_a = state.disabledChoices) === null || _a === void 0 ? void 0 : _a.includes(choice), onChange: () => toggle(choice), tabIndex: 0, onKeyDown: (e) => {
83
85
  if (e.key === 'Enter' || e.key === ' ') {
@@ -90,7 +92,7 @@ export function MultipleChoiceOverlay({ state, setState }) {
90
92
  event.preventDefault(); // Verhindert Scroll bei Space
91
93
  handleAction(state.handlerCancel, false);
92
94
  }
93
- }, 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) => {
95
+ }, 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), type: "button", autoFocus: true, onKeyDown: (event) => {
94
96
  if (event.key === "Enter" || event.key === ' ') {
95
97
  event.preventDefault(); // Verhindert Scroll bei Space
96
98
  handleAction(state.handlerOk, true);
package/dist/MultipleRadioOverlay.d.ts CHANGED
@@ -15,6 +15,7 @@ export interface MultipleRadioOverlayState {
15
15
  addCloseButton?: boolean;
16
16
  proceedButtonStyle?: CSSProperties;
17
17
  cancelButtonStyle?: CSSProperties;
18
+ style?: CSSProperties;
18
19
  }
19
20
  export declare const defaultMultipleRadioState: MultipleRadioOverlayState;
20
21
  export declare function MultipleRadioOverlay({ state, setState }: {
package/dist/MultipleRadioOverlay.js CHANGED
@@ -16,6 +16,7 @@ export const defaultMultipleRadioState = {
16
16
  addCloseButton: false,
17
17
  proceedButtonStyle: undefined,
18
18
  cancelButtonStyle: undefined,
19
+ style: undefined,
19
20
  };
20
21
  // Wobei alle Attribute grundsätzlich optional sind:
21
22
  // - headline: ist die Überschrift und wird fett hinterlegt
@@ -31,6 +32,7 @@ export const defaultMultipleRadioState = {
31
32
  // - 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)
32
33
  // - proceedButtonStyle: ist der Style des Bestätigungsbuttons (Standardmäßig unverändert)
33
34
  // - cancelButtonStyle: ist der Style des Abbrechenbuttons (Standardmäßig unverändert)
35
+ // - style: ist der Style des MultipleRadioOverlay (Standardmäßig unverändert)
34
36
  // Output: Der Input vom User wird am Ende an den handlerOk übergeben (oder bei handlerCancel ignoriert)!
35
37
  // Somit wird der handler so aufgerufen: handlerOk(UserInput, handlerArgs) oder handlerCancel(handlerArgs)
36
38
  export function MultipleRadioOverlay({ state, setState }) {
@@ -44,7 +46,6 @@ export function MultipleRadioOverlay({ state, setState }) {
44
46
  if ((state === null || state === void 0 ? void 0 : state.message) != null || (state === null || state === void 0 ? void 0 : state.headline) != null) {
45
47
  setInput((state === null || state === void 0 ? void 0 : state.preInput) != null ? state.preInput : "");
46
48
  setShowOverlay(true);
47
- setTimeout(() => { var _a; (_a = document.getElementById("confirmButton")) === null || _a === void 0 ? void 0 : _a.focus(); }, 1);
48
49
  }
49
50
  }, [state]);
50
51
  const handleAction = (handler, useInput) => {
@@ -60,16 +61,17 @@ export function MultipleRadioOverlay({ state, setState }) {
60
61
  tempState.handler(tempState.handlerArgs);
61
62
  };
62
63
  return showOverlay ?
63
- _jsx("div", { className: "multipleradio-overlay", children: _jsxs("div", { className: "multipleradio-box", children: [state.addCloseButton ?
64
+ _jsx("div", { className: "multipleradio-overlay", children: _jsxs("div", { className: "multipleradio-box", style: (state === null || state === void 0 ? void 0 : state.style) !== undefined ? state.style : {}, role: "dialog", "aria-modal": "true", "aria-labelledby": (state === null || state === void 0 ? void 0 : state.headline) != null ? "multiple-radio-headline" : undefined, "aria-label": (state === null || state === void 0 ? void 0 : state.headline) != null ? undefined : "Einfachauswahl", "aria-describedby": "multiple-radio-message", onKeyDown: (event) => { if (event.key === "Escape")
65
+ handleAction(state.handlerCancel, false); }, children: [state.addCloseButton ?
64
66
  _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) => {
65
67
  if (e.key === 'Enter' || e.key === ' ') {
66
68
  e.preventDefault(); // Verhindert Scroll bei Space
67
69
  handleAction(undefined, false);
68
70
  }
69
71
  }, 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" })] }) }) :
70
- _jsx(_Fragment, {}), _jsx("div", { 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("div", { 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 => {
72
+ _jsx(_Fragment, {}), _jsx("div", { className: "headline", id: "multiple-radio-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("div", { id: "multiple-radio-message", 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", role: "radiogroup", "aria-label": "Auswahloptionen", children: _jsx("div", { className: "radios-container", children: state === null || state === void 0 ? void 0 : state.choices.map(choice => {
71
73
  var _a;
72
- return (_jsxs("label", { className: "radio-label", children: [_jsx("input", { type: "radio", checked: input === choice, disabled: (_a = state.disabledChoices) === null || _a === void 0 ? void 0 : _a.includes(choice), onChange: () => setInput(choice), tabIndex: 0, onKeyDown: (e) => {
74
+ return (_jsxs("label", { className: "radio-label", children: [_jsx("input", { type: "radio", name: "multiple-radio-options", checked: input === choice, disabled: (_a = state.disabledChoices) === null || _a === void 0 ? void 0 : _a.includes(choice), onChange: () => setInput(choice), tabIndex: 0, onKeyDown: (e) => {
73
75
  if (e.key === 'Enter' || e.key === ' ') {
74
76
  e.preventDefault(); // Verhindert Scroll bei Space
75
77
  setInput(choice);
@@ -80,7 +82,7 @@ export function MultipleRadioOverlay({ state, setState }) {
80
82
  event.preventDefault(); // Verhindert Scroll bei Space
81
83
  handleAction(state.handlerCancel, false);
82
84
  }
83
- }, 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) => {
85
+ }, 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), type: "button", autoFocus: true, onKeyDown: (event) => {
84
86
  if (event.key === "Enter" || event.key === ' ') {
85
87
  event.preventDefault(); // Verhindert Scroll bei Space
86
88
  handleAction(state.handlerOk, true);
package/dist/Toast.js CHANGED
@@ -19,5 +19,5 @@ export function Toast({ state, setState }) {
19
19
  setShowToast(false);
20
20
  }
21
21
  }, [toastContent, setState]);
22
- return _jsx(_Fragment, { children: showToast && (_jsx("div", { className: "toast-notification", children: toastContent })) });
22
+ return _jsx(_Fragment, { children: showToast && (_jsx("div", { className: "toast-notification", role: "status", "aria-live": "polite", "aria-atomic": "true", children: toastContent })) });
23
23
  }
package/dist/ToggleSwitch.css CHANGED
@@ -14,6 +14,9 @@
14
14
  }
15
15
 
16
16
  .toggleOption {
17
+ border: 0;
18
+ background: transparent;
19
+ font: inherit;
17
20
  flex: 1;
18
21
  display: flex;
19
22
  justify-content: center;
@@ -25,6 +28,11 @@
25
28
  white-space: nowrap;
26
29
  }
27
30
 
31
+ .toggleOption:focus-visible {
32
+ outline: 3px solid var(--DunkelAkzent, #8b0000);
33
+ outline-offset: -3px;
34
+ }
35
+
28
36
  .toggleOption.active {
29
37
  color: black;
30
38
  }
package/dist/ToggleSwitch.js CHANGED
@@ -23,5 +23,5 @@ export function ToggleSwitch({ optionLeft, optionRight, value, onChange }) {
23
23
  width: `calc(${offsetWidth}px + 2rem)`
24
24
  });
25
25
  }, [value, optionLeft, optionRight]);
26
- 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 })] }));
26
+ return (_jsxs("div", { className: "toggleWrapper", ref: containerRef, role: "group", "aria-label": "Auswahl", children: [_jsx("button", { type: "button", className: `toggleOption ${value === optionLeft.value ? "active" : ""}`, ref: el => { optionLeftRef.current = el; }, onClick: () => onChange(optionLeft.value), "aria-pressed": value === optionLeft.value, children: optionLeft.label }), _jsx("button", { type: "button", className: `toggleOption ${value === optionRight.value ? "active" : ""}`, ref: el => { optionRightRef.current = el; }, onClick: () => onChange(optionRight.value), "aria-pressed": value === optionRight.value, children: optionRight.label }), _jsx("div", { className: `toggleSlider ${value === optionLeft.value ? "left" : "right"}`, style: sliderStyle, "aria-hidden": "true" })] }));
27
27
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "typescript-overlay-essentials",
3
- "version": "1.4.6",
3
+ "version": "1.6.0",
4
4
  "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.",
5
5
  "keywords": [
6
6
  "typescript",