typescript-overlay-essentials 1.4.1 → 1.4.4

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 (7) hide show
  1. package/dist/MultipleChoiceOverlay.css +12 -0
  2. package/dist/MultipleChoiceOverlay.d.ts +1 -0
  3. package/dist/MultipleChoiceOverlay.js +11 -6
  4. package/dist/MultipleRadioOverlay.css +11 -0
  5. package/dist/MultipleRadioOverlay.d.ts +1 -0
  6. package/dist/MultipleRadioOverlay.js +11 -6
  7. package/package.json +3 -5
package/dist/MultipleChoiceOverlay.css CHANGED
@@ -89,6 +89,12 @@
89
89
  border-color: var(--HSDAkzent, #4aabf5) ;
90
90
  }
91
91
 
92
+ .multiplechoice-box .choices-input input[type="checkbox"]:disabled {
93
+ background-color: var(--Mittelgrau, #ddd);
94
+ border-color: var(--Dunkelgrau, #999);
95
+ cursor: auto;
96
+ }
97
+
92
98
 
93
99
  /* Häkchen aus zwei Linien */
94
100
  .multiplechoice-box .choices-input input[type="checkbox"]:checked::after {
@@ -156,6 +162,12 @@
156
162
  .multiplechoice-box .choices-input input[type="checkbox"]:checked::after {
157
163
  border-color: white;
158
164
  }
165
+
166
+ .multiplechoice-box .choices-input input[type="checkbox"]:disabled {
167
+ background-color: var(--Dunkelgrau, #999);
168
+ border-color: var(--Mittelgrau, #ddd);
169
+ cursor: auto;
170
+ }
159
171
  }
160
172
 
161
173
  .multiplechoice-box .closeButton {
package/dist/MultipleChoiceOverlay.d.ts CHANGED
@@ -5,6 +5,7 @@ export interface MultipleChoiceOverlayState {
5
5
  headline?: React.ReactNode;
6
6
  message?: React.ReactNode;
7
7
  choices: string[] | [];
8
+ disabledChoices?: string[];
8
9
  preInput?: string[];
9
10
  cancelButtonText?: React.ReactNode;
10
11
  proceedButtonText?: React.ReactNode;
package/dist/MultipleChoiceOverlay.js CHANGED
@@ -6,6 +6,7 @@ export const defaultMultipleChoiceState = {
6
6
  headline: undefined,
7
7
  message: undefined,
8
8
  choices: [],
9
+ disabledChoices: undefined,
9
10
  preInput: undefined,
10
11
  cancelButtonText: undefined,
11
12
  proceedButtonText: undefined,
@@ -20,6 +21,7 @@ export const defaultMultipleChoiceState = {
20
21
  // - headline: ist die Überschrift und wird fett hinterlegt
21
22
  // - message: ist die angezeigte Nachricht
22
23
  // - choices: Ein String-Array mit den Optionen die ausgewählt werden können (ohne Angabe gibt es keine Auswahl)
24
+ // - disabledChoices: Ein String-Array mit den Optionen, die zwar vorhanden sind, aber nicht ausgewählt werden können (Einträge müssen identisch zu denen in choices sein und werden onst ignoriert)
23
25
  // - preInput: Ein String-Array: Die Einträge sind stadardmäßig ausgewählt alle anderen nicht ausgewählt
24
26
  // - cancelButtonText: ist der Text der auf dem Cancel Button stehen soll (ohne Angabe wird "Abbrechen" verwendet)
25
27
  // - proceedButtonText: ist der Text der auf dem Proceed Button stehen soll (ohne Angabe wird "OK" verwendet)
@@ -75,12 +77,15 @@ export function MultipleChoiceOverlay({ state, setState }) {
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", 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) => {
79
- if (e.key === 'Enter' || e.key === ' ') {
80
- e.preventDefault(); // Verhindert Scroll bei Space
81
- toggle(choice);
82
- }
83
- } }), choice] }, choice))) }) }), _jsxs("div", { className: "information-buttons", children: [_jsx("button", { onClick: () => handleAction(state.handlerCancel, false), onKeyDown: (event) => {
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 => {
81
+ var _a;
82
+ 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
+ if (e.key === 'Enter' || e.key === ' ') {
84
+ e.preventDefault(); // Verhindert Scroll bei Space
85
+ toggle(choice);
86
+ }
87
+ } }), choice] }, choice));
88
+ }) }) }), _jsxs("div", { className: "information-buttons", children: [_jsx("button", { onClick: () => handleAction(state.handlerCancel, false), onKeyDown: (event) => {
84
89
  if (event.key === "Enter" || event.key === ' ') {
85
90
  event.preventDefault(); // Verhindert Scroll bei Space
86
91
  handleAction(state.handlerCancel, false);
package/dist/MultipleRadioOverlay.css CHANGED
@@ -89,6 +89,11 @@
89
89
  border-color: var(--HSDAkzent, #4aabf5) ;
90
90
  }
91
91
 
92
+ .multipleradio-box .radios-input input[type="checkbox"]:disabled {
93
+ background-color: var(--Mittelgrau, #ddd);
94
+ border-color: var(--Dunkelgrau, #999);
95
+ cursor: auto;
96
+ }
92
97
 
93
98
  /* Häkchen aus zwei Linien */
94
99
  .multipleradio-box .radios-input input[type="checkbox"]:checked::after {
@@ -156,6 +161,12 @@
156
161
  .multipleradio-box .radios-input input[type="checkbox"]:checked::after {
157
162
  border-color: white;
158
163
  }
164
+
165
+ .multipleradio-box .radios-input input[type="checkbox"]:disabled {
166
+ background-color: var(--Dunkelgrau, #999);
167
+ border-color: var(--Mittelgrau, #ddd);
168
+ cursor: auto;
169
+ }
159
170
  }
160
171
 
161
172
  .multipleradio-box .closeButton {
package/dist/MultipleRadioOverlay.d.ts CHANGED
@@ -5,6 +5,7 @@ export interface MultipleRadioOverlayState {
5
5
  headline?: React.ReactNode;
6
6
  message?: React.ReactNode;
7
7
  choices: string[] | [];
8
+ disabledChoices?: string[];
8
9
  preInput?: string;
9
10
  cancelButtonText?: React.ReactNode;
10
11
  proceedButtonText?: React.ReactNode;
package/dist/MultipleRadioOverlay.js CHANGED
@@ -6,6 +6,7 @@ export const defaultMultipleRadioState = {
6
6
  headline: undefined,
7
7
  message: undefined,
8
8
  choices: [],
9
+ disabledChoices: undefined,
9
10
  preInput: undefined,
10
11
  cancelButtonText: undefined,
11
12
  proceedButtonText: undefined,
@@ -20,6 +21,7 @@ export const defaultMultipleRadioState = {
20
21
  // - headline: ist die Überschrift und wird fett hinterlegt
21
22
  // - message: ist die angezeigte Nachricht
22
23
  // - choices: Ein String-Array mit den Optionen die ausgewählt werden können (ohne Angabe gibt es keine Auswahl)
24
+ // - disabledChoices: Ein String-Array mit den Optionen, die zwar vorhanden sind, aber nicht ausgewählt werden können (Einträge müssen identisch zu denen in choices sein und werden onst ignoriert)
23
25
  // - preInput: Ein String: Dieser Eintrag ist stadardmäßig ausgewählt
24
26
  // - cancelButtonText: ist der Text der auf dem Cancel Button stehen soll (ohne Angabe wird "Abbrechen" verwendet)
25
27
  // - proceedButtonText: ist der Text der auf dem Proceed Button stehen soll (ohne Angabe wird "OK" verwendet)
@@ -65,12 +67,15 @@ export function MultipleRadioOverlay({ state, setState }) {
65
67
  handleAction(undefined, false);
66
68
  }
67
69
  }, 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" })] }) }) :
68
- _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) => {
69
- if (e.key === 'Enter' || e.key === ' ') {
70
- e.preventDefault(); // Verhindert Scroll bei Space
71
- setInput(choice);
72
- }
73
- } }), choice] }, choice))) }) }), _jsxs("div", { className: "information-buttons", children: [_jsx("button", { onClick: () => handleAction(state.handlerCancel, false), onKeyDown: (event) => {
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 => {
71
+ 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) => {
73
+ if (e.key === 'Enter' || e.key === ' ') {
74
+ e.preventDefault(); // Verhindert Scroll bei Space
75
+ setInput(choice);
76
+ }
77
+ } }), choice] }, choice));
78
+ }) }) }), _jsxs("div", { className: "information-buttons", children: [_jsx("button", { onClick: () => handleAction(state.handlerCancel, false), onKeyDown: (event) => {
74
79
  if (event.key === "Enter" || event.key === ' ') {
75
80
  event.preventDefault(); // Verhindert Scroll bei Space
76
81
  handleAction(state.handlerCancel, false);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "typescript-overlay-essentials",
3
- "version": "1.4.1",
3
+ "version": "1.4.4",
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",
@@ -47,10 +47,8 @@
47
47
  "react-select": "^5.10.2"
48
48
  },
49
49
  "peerDependencies": {
50
- "@types/react": "^19.2.14",
51
- "@types/react-dom": "^19.2.3",
52
- "react": "^18.0.0 || ^19.0.0",
53
- "react-dom": "^18.0.0 || ^19.0.0"
50
+ "react": ">=17",
51
+ "react-dom": ">=17"
54
52
  },
55
53
  "devDependencies": {
56
54
  "@types/react": "^19.2.14",