typescript-overlay-essentials 1.4.5 → 1.5.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 (13) hide show
  1. package/dist/ConfirmationBox.css +1 -1
  2. package/dist/ConfirmationBox.d.ts +1 -0
  3. package/dist/ConfirmationBox.js +4 -3
  4. package/dist/InfoOverlay.js +1 -1
  5. package/dist/InfoOverlayWithInput.d.ts +1 -0
  6. package/dist/InfoOverlayWithInput.js +4 -2
  7. package/dist/LoadingOverlay.d.ts +2 -1
  8. package/dist/LoadingOverlay.js +4 -2
  9. package/dist/MultipleChoiceOverlay.d.ts +1 -0
  10. package/dist/MultipleChoiceOverlay.js +4 -2
  11. package/dist/MultipleRadioOverlay.d.ts +1 -0
  12. package/dist/MultipleRadioOverlay.js +4 -2
  13. package/package.json +1 -1
package/dist/ConfirmationBox.css CHANGED
@@ -36,7 +36,7 @@
36
36
  }
37
37
  }
38
38
 
39
- .confirmation-box p {
39
+ .confirmation-box div {
40
40
  margin-bottom: 0.5em;
41
41
  }
42
42
 
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,6 +32,7 @@ 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
@@ -45,7 +47,6 @@ export function ConfirmationBox({ state, setState }) {
45
47
  if (state === null || state === void 0 ? void 0 : state.handlerOk) {
46
48
  if ((_a = state.activateConfirm) !== null && _a !== void 0 ? _a : true) {
47
49
  setShowConfirm(true);
48
- setTimeout(() => { var _a; (_a = document.getElementById("confirmButton")) === null || _a === void 0 ? void 0 : _a.focus(); }, 1);
49
50
  }
50
51
  else {
51
52
  // Wenn activateConfirm explizit false ist, dann wird die übergebene Funktion direkt ausgeführt ohne ConfirmationBox
@@ -69,14 +70,14 @@ export function ConfirmationBox({ state, setState }) {
69
70
  tempState.handler(tempState.handlerArgs);
70
71
  };
71
72
  return showConfirm ?
72
- _jsx("div", { className: "confirmation-overlay", tabIndex: 0, ref: overlayRef, children: _jsxs("div", { className: "confirmation-box", children: [state.addCloseButton ?
73
+ _jsx("div", { className: "confirmation-overlay", tabIndex: 0, ref: overlayRef, children: _jsxs("div", { className: "confirmation-box", style: (state === null || state === void 0 ? void 0 : state.style) !== undefined ? state.style : {}, children: [state.addCloseButton ?
73
74
  _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
75
  if (e.key === 'Enter' || e.key === ' ') {
75
76
  e.preventDefault(); // Verhindert Scroll bei Space
76
77
  handleAction(undefined);
77
78
  }
78
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" })] }) }) :
79
- _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) => {
80
+ _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
81
  if (e.key === 'Enter' || e.key === ' ') {
81
82
  e.preventDefault(); // Verhindert Scroll bei Space
82
83
  handleAction(state.handlerCancel);
package/dist/InfoOverlay.js CHANGED
@@ -48,7 +48,7 @@ export function InfoOverlay({ state, setState }) {
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("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) => {
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) => {
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 }) {
@@ -68,14 +70,14 @@ export function InfoOverlayWithInput({ state, setState }) {
68
70
  tempState.handler(tempState.handlerArgs);
69
71
  };
70
72
  return showOverlay ?
71
- _jsx("div", { className: "information-overlay-with-input", children: _jsxs("div", { className: "information-box-with-input", children: [state.addCloseButton ?
73
+ _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 : {}, 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("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) => {
80
+ _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) => {
79
81
  if (e.key === 'Enter' || e.key === ' ') {
80
82
  e.preventDefault(); // Verhindert Scroll bei Space
81
83
  handleAction(state.handlerCancel, false);
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,12 +7,14 @@ 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
19
  var _a, _b, _c;
18
20
  // Wird verwendet um das LoadingOverlay ein- und auszublenden
@@ -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: {
33
+ return showOverlay ? (_jsx("div", { className: "loading-overlay", 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: {
32
34
  "--spinner-color": (_a = state.color) !== null && _a !== void 0 ? _a : "#e60028",
33
35
  "--success-bg": (_b = state.color) !== null && _b !== void 0 ? _b : "#42ab34",
34
36
  "--error-bg": (_c = state.color) !== null && _c !== void 0 ? _c : "#e60028",
35
- } }), state.message && _jsx("p", { className: "loading-message", children: state.message })] }) })) : _jsx(_Fragment, {});
37
+ } }), 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 }) {
@@ -70,14 +72,14 @@ export function MultipleChoiceOverlay({ state, setState }) {
70
72
  tempState.handler(tempState.handlerArgs);
71
73
  };
72
74
  return showOverlay ?
73
- _jsx("div", { className: "multiplechoice-overlay", children: _jsxs("div", { className: "multiplechoice-box", children: [state.addCloseButton ?
75
+ _jsx("div", { className: "multiplechoice-overlay", children: _jsxs("div", { className: "multiplechoice-box", style: (state === null || state === void 0 ? void 0 : state.style) !== undefined ? state.style : {}, 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("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 => {
82
+ _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 => {
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 === ' ') {
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 }) {
@@ -60,14 +62,14 @@ export function MultipleRadioOverlay({ state, setState }) {
60
62
  tempState.handler(tempState.handlerArgs);
61
63
  };
62
64
  return showOverlay ?
63
- _jsx("div", { className: "multipleradio-overlay", children: _jsxs("div", { className: "multipleradio-box", children: [state.addCloseButton ?
65
+ _jsx("div", { className: "multipleradio-overlay", children: _jsxs("div", { className: "multipleradio-box", style: (state === null || state === void 0 ? void 0 : state.style) !== undefined ? state.style : {}, 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("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 => {
72
+ _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 => {
71
73
  var _a;
72
74
  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) => {
73
75
  if (e.key === 'Enter' || e.key === ' ') {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "typescript-overlay-essentials",
3
- "version": "1.4.5",
3
+ "version": "1.5.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",