@netlib/widerrufsbutton 1.1.1 → 1.2.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.
- package/README.md +4 -4
- package/dist/fallback.cjs.js +383 -0
- package/dist/fallback.d.ts +21 -4
- package/dist/fallback.es.js +413 -0
- package/dist/index.cjs.js +124 -68
- package/dist/index.d.ts +1 -1
- package/dist/index.es.js +279 -208
- package/dist/styles.d.ts +1 -1
- package/dist/types.d.ts +5 -3
- package/dist/widerruf.html +18 -30
- package/dist/widerrufsbutton.iife.js +17 -9
- package/package.json +8 -3
package/README.md
CHANGED
|
@@ -9,7 +9,7 @@ Pflichtfelder:
|
|
|
9
9
|
- **E-Mail-Adresse** (für die gesetzlich vorgeschriebene Eingangsbestätigung)
|
|
10
10
|
- **Bestell- / Auftrags- / Vertragsnummer** (Vertragsidentifikation)
|
|
11
11
|
- **Datum** der Widerrufserklärung (automatisch gesetzt)
|
|
12
|
-
- **
|
|
12
|
+
- **reason** — optional, darf nicht als Pflichtfeld abgefragt werden
|
|
13
13
|
|
|
14
14
|
Button-Beschriftung: `Vertrag widerrufen`
|
|
15
15
|
Bestätigungs-Button: `Widerruf bestätigen`
|
|
@@ -17,7 +17,7 @@ Bestätigungs-Button: `Widerruf bestätigen`
|
|
|
17
17
|
## Installation
|
|
18
18
|
|
|
19
19
|
```bash
|
|
20
|
-
npm install @netlib
|
|
20
|
+
npm install @netlib/widerrufsbutton
|
|
21
21
|
```
|
|
22
22
|
|
|
23
23
|
## Build
|
|
@@ -48,8 +48,8 @@ Content-Type: application/json
|
|
|
48
48
|
"payload": {
|
|
49
49
|
"name": "Max Mustermann",
|
|
50
50
|
"email": "max@beispiel.de",
|
|
51
|
-
"
|
|
52
|
-
"
|
|
51
|
+
"orderNumber": "ORD-2026-001",
|
|
52
|
+
"reason": "",
|
|
53
53
|
"datum": "2026-06-07T10:00:00.000Z"
|
|
54
54
|
}
|
|
55
55
|
}
|
|
@@ -0,0 +1,383 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=`
|
|
2
|
+
/* Widerrufsbutton widget — prefix: wrb- */
|
|
3
|
+
.wrb-btn {
|
|
4
|
+
display: inline-flex;
|
|
5
|
+
align-items: center;
|
|
6
|
+
gap: 6px;
|
|
7
|
+
padding: 10px 20px;
|
|
8
|
+
background: #c0392b;
|
|
9
|
+
color: #fff;
|
|
10
|
+
border: none;
|
|
11
|
+
border-radius: 6px;
|
|
12
|
+
font-size: 15px;
|
|
13
|
+
font-weight: 600;
|
|
14
|
+
cursor: pointer;
|
|
15
|
+
font-family: inherit;
|
|
16
|
+
transition: background 0.2s;
|
|
17
|
+
text-decoration: none;
|
|
18
|
+
}
|
|
19
|
+
.wrb-btn:hover { background: #a93226; }
|
|
20
|
+
.wrb-btn:focus-visible { outline: 3px solid #e74c3c; outline-offset: 2px; }
|
|
21
|
+
|
|
22
|
+
/* Overlay */
|
|
23
|
+
.wrb-overlay {
|
|
24
|
+
position: fixed;
|
|
25
|
+
inset: 0;
|
|
26
|
+
background: rgba(0,0,0,0.55);
|
|
27
|
+
display: flex;
|
|
28
|
+
align-items: center;
|
|
29
|
+
justify-content: center;
|
|
30
|
+
z-index: 99999;
|
|
31
|
+
padding: 16px;
|
|
32
|
+
animation: wrb-fade-in 0.15s ease;
|
|
33
|
+
}
|
|
34
|
+
@keyframes wrb-fade-in { from { opacity: 0 } to { opacity: 1 } }
|
|
35
|
+
|
|
36
|
+
/* Modal box */
|
|
37
|
+
.wrb-modal {
|
|
38
|
+
background: #fff;
|
|
39
|
+
border-radius: 10px;
|
|
40
|
+
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
|
41
|
+
width: 100%;
|
|
42
|
+
max-width: 540px;
|
|
43
|
+
max-height: 90vh;
|
|
44
|
+
overflow-y: auto;
|
|
45
|
+
animation: wrb-slide-up 0.2s ease;
|
|
46
|
+
font-family: system-ui, -apple-system, sans-serif;
|
|
47
|
+
font-size: 15px;
|
|
48
|
+
color: #1a1a1a;
|
|
49
|
+
}
|
|
50
|
+
@keyframes wrb-slide-up { from { transform: translateY(20px); opacity: 0 } to { transform: none; opacity: 1 } }
|
|
51
|
+
|
|
52
|
+
.wrb-modal-header {
|
|
53
|
+
display: flex;
|
|
54
|
+
align-items: flex-start;
|
|
55
|
+
justify-content: space-between;
|
|
56
|
+
padding: 20px 24px 16px;
|
|
57
|
+
border-bottom: 1px solid #e5e7eb;
|
|
58
|
+
gap: 12px;
|
|
59
|
+
}
|
|
60
|
+
.wrb-modal-title {
|
|
61
|
+
margin: 0;
|
|
62
|
+
font-size: 18px;
|
|
63
|
+
font-weight: 700;
|
|
64
|
+
color: #111;
|
|
65
|
+
line-height: 1.3;
|
|
66
|
+
}
|
|
67
|
+
.wrb-close-btn {
|
|
68
|
+
background: none;
|
|
69
|
+
border: none;
|
|
70
|
+
cursor: pointer;
|
|
71
|
+
color: #6b7280;
|
|
72
|
+
padding: 4px;
|
|
73
|
+
border-radius: 4px;
|
|
74
|
+
font-size: 20px;
|
|
75
|
+
line-height: 1;
|
|
76
|
+
flex-shrink: 0;
|
|
77
|
+
}
|
|
78
|
+
.wrb-close-btn:hover { color: #111; background: #f3f4f6; }
|
|
79
|
+
|
|
80
|
+
.wrb-modal-body {
|
|
81
|
+
padding: 20px 24px 24px;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.wrb-intro {
|
|
85
|
+
margin: 0 0 20px;
|
|
86
|
+
color: #4b5563;
|
|
87
|
+
line-height: 1.6;
|
|
88
|
+
font-size: 14px;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/* Form */
|
|
92
|
+
.wrb-field {
|
|
93
|
+
margin-bottom: 16px;
|
|
94
|
+
}
|
|
95
|
+
.wrb-label {
|
|
96
|
+
display: block;
|
|
97
|
+
font-size: 13px;
|
|
98
|
+
font-weight: 600;
|
|
99
|
+
color: #374151;
|
|
100
|
+
margin-bottom: 5px;
|
|
101
|
+
}
|
|
102
|
+
.wrb-required {
|
|
103
|
+
color: #c0392b;
|
|
104
|
+
margin-left: 2px;
|
|
105
|
+
}
|
|
106
|
+
.wrb-input,
|
|
107
|
+
.wrb-textarea {
|
|
108
|
+
width: 100%;
|
|
109
|
+
padding: 9px 12px;
|
|
110
|
+
border: 1.5px solid #d1d5db;
|
|
111
|
+
border-radius: 6px;
|
|
112
|
+
font-size: 15px;
|
|
113
|
+
font-family: inherit;
|
|
114
|
+
color: #111;
|
|
115
|
+
background: #fff;
|
|
116
|
+
box-sizing: border-box;
|
|
117
|
+
transition: border-color 0.15s;
|
|
118
|
+
}
|
|
119
|
+
.wrb-input:focus,
|
|
120
|
+
.wrb-textarea:focus {
|
|
121
|
+
outline: none;
|
|
122
|
+
border-color: #c0392b;
|
|
123
|
+
box-shadow: 0 0 0 3px rgba(192,57,43,0.12);
|
|
124
|
+
}
|
|
125
|
+
.wrb-input.wrb-error,
|
|
126
|
+
.wrb-textarea.wrb-error {
|
|
127
|
+
border-color: #c0392b;
|
|
128
|
+
}
|
|
129
|
+
.wrb-field-error {
|
|
130
|
+
color: #c0392b;
|
|
131
|
+
font-size: 12px;
|
|
132
|
+
margin-top: 4px;
|
|
133
|
+
}
|
|
134
|
+
.wrb-textarea { resize: vertical; min-height: 80px; }
|
|
135
|
+
|
|
136
|
+
.wrb-hint {
|
|
137
|
+
font-size: 12px;
|
|
138
|
+
color: #6b7280;
|
|
139
|
+
margin-top: 4px;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.wrb-date-display {
|
|
143
|
+
padding: 9px 12px;
|
|
144
|
+
background: #f9fafb;
|
|
145
|
+
border: 1.5px solid #e5e7eb;
|
|
146
|
+
border-radius: 6px;
|
|
147
|
+
color: #6b7280;
|
|
148
|
+
font-size: 15px;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
/* Actions */
|
|
152
|
+
.wrb-actions {
|
|
153
|
+
display: flex;
|
|
154
|
+
gap: 10px;
|
|
155
|
+
justify-content: flex-end;
|
|
156
|
+
margin-top: 24px;
|
|
157
|
+
padding-top: 16px;
|
|
158
|
+
border-top: 1px solid #e5e7eb;
|
|
159
|
+
}
|
|
160
|
+
.wrb-submit-btn {
|
|
161
|
+
display: inline-flex;
|
|
162
|
+
align-items: center;
|
|
163
|
+
justify-content: center;
|
|
164
|
+
text-decoration: none;
|
|
165
|
+
padding: 10px 22px;
|
|
166
|
+
background: #c0392b;
|
|
167
|
+
color: #fff;
|
|
168
|
+
border: none;
|
|
169
|
+
border-radius: 6px;
|
|
170
|
+
font-size: 15px;
|
|
171
|
+
font-weight: 600;
|
|
172
|
+
cursor: pointer;
|
|
173
|
+
font-family: inherit;
|
|
174
|
+
transition: background 0.2s;
|
|
175
|
+
}
|
|
176
|
+
.wrb-submit-btn:hover:not(:disabled) { background: #a93226; }
|
|
177
|
+
.wrb-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
|
|
178
|
+
.wrb-cancel-btn {
|
|
179
|
+
display: inline-flex;
|
|
180
|
+
align-items: center;
|
|
181
|
+
justify-content: center;
|
|
182
|
+
text-decoration: none;
|
|
183
|
+
padding: 10px 18px;
|
|
184
|
+
background: transparent;
|
|
185
|
+
color: #374151;
|
|
186
|
+
border: 1.5px solid #d1d5db;
|
|
187
|
+
border-radius: 6px;
|
|
188
|
+
font-size: 15px;
|
|
189
|
+
cursor: pointer;
|
|
190
|
+
font-family: inherit;
|
|
191
|
+
transition: background 0.15s;
|
|
192
|
+
}
|
|
193
|
+
.wrb-cancel-btn:hover { background: #f3f4f6; }
|
|
194
|
+
|
|
195
|
+
/* Success / Error states */
|
|
196
|
+
.wrb-success {
|
|
197
|
+
text-align: center;
|
|
198
|
+
padding: 32px 24px;
|
|
199
|
+
}
|
|
200
|
+
.wrb-success-icon { font-size: 48px; display: block; margin-bottom: 12px; }
|
|
201
|
+
.wrb-success h3 { margin: 0 0 8px; font-size: 20px; color: #111; }
|
|
202
|
+
.wrb-success p { margin: 0; color: #4b5563; line-height: 1.6; }
|
|
203
|
+
|
|
204
|
+
.wrb-alert {
|
|
205
|
+
padding: 12px 16px;
|
|
206
|
+
border-radius: 6px;
|
|
207
|
+
margin-bottom: 16px;
|
|
208
|
+
font-size: 14px;
|
|
209
|
+
}
|
|
210
|
+
.wrb-alert-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
|
|
211
|
+
|
|
212
|
+
/* Legal links */
|
|
213
|
+
.wrb-legal-links {
|
|
214
|
+
display: flex;
|
|
215
|
+
flex-wrap: wrap;
|
|
216
|
+
gap: 4px 16px;
|
|
217
|
+
margin-top: 16px;
|
|
218
|
+
padding-top: 12px;
|
|
219
|
+
border-top: 1px solid #e5e7eb;
|
|
220
|
+
}
|
|
221
|
+
.wrb-legal-link {
|
|
222
|
+
font-size: 12px;
|
|
223
|
+
color: #6b7280;
|
|
224
|
+
text-decoration: none;
|
|
225
|
+
}
|
|
226
|
+
.wrb-legal-link:hover {
|
|
227
|
+
color: #374151;
|
|
228
|
+
text-decoration: underline;
|
|
229
|
+
}
|
|
230
|
+
`;function r(e){return e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""")}function d(){return new Date().toLocaleDateString("de-DE",{day:"2-digit",month:"2-digit",year:"numeric"})}function o(e){var a;return(a=e.legalLinks)!=null&&a.length?`
|
|
231
|
+
<div class="wrb-legal-links">
|
|
232
|
+
${e.legalLinks.map(t=>`<a href="${r(t.href)}" class="wrb-legal-link" rel="noopener noreferrer">${r(t.name)}</a>`).join(`
|
|
233
|
+
`)}
|
|
234
|
+
</div>`:""}function b(e,a,t="",i=""){const n=r(e.successUrl??t),l=r(e.errorUrl??i);return`
|
|
235
|
+
<div class="wrb-field">
|
|
236
|
+
<label class="wrb-label">
|
|
237
|
+
Name <span class="wrb-required" aria-hidden="true">*</span>
|
|
238
|
+
</label>
|
|
239
|
+
<input class="wrb-input" type="text" name="name" autocomplete="name"
|
|
240
|
+
placeholder="Vor- und Nachname" required>
|
|
241
|
+
</div>
|
|
242
|
+
<div class="wrb-field">
|
|
243
|
+
<label class="wrb-label">
|
|
244
|
+
E-Mail-Adresse <span class="wrb-required" aria-hidden="true">*</span>
|
|
245
|
+
</label>
|
|
246
|
+
<input class="wrb-input" type="email" name="email" autocomplete="email"
|
|
247
|
+
placeholder="name@beispiel.de" required>
|
|
248
|
+
<p class="wrb-hint">Hierüber erhalten Sie die Eingangsbestätigung.</p>
|
|
249
|
+
</div>
|
|
250
|
+
<div class="wrb-field">
|
|
251
|
+
<label class="wrb-label">
|
|
252
|
+
Bestell- / Auftrags- / Vertragsnummer
|
|
253
|
+
<span class="wrb-required" aria-hidden="true">*</span>
|
|
254
|
+
</label>
|
|
255
|
+
<input class="wrb-input" type="text" name="orderNumber"
|
|
256
|
+
placeholder="z.B. 10045678" required>
|
|
257
|
+
<p class="wrb-hint">Zu finden in Ihrer Bestellbestätigung.</p>
|
|
258
|
+
</div>
|
|
259
|
+
<div class="wrb-field">
|
|
260
|
+
<label class="wrb-label">reason</label>
|
|
261
|
+
<textarea class="wrb-textarea" name="reason" placeholder="Optional" rows="3"></textarea>
|
|
262
|
+
<p class="wrb-hint">
|
|
263
|
+
Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.
|
|
264
|
+
</p>
|
|
265
|
+
</div>
|
|
266
|
+
<div class="wrb-field">
|
|
267
|
+
<label class="wrb-label">Datum der Widerrufserklärung</label>
|
|
268
|
+
<div class="wrb-date-display">${a}</div>
|
|
269
|
+
<input type="hidden" name="datum" value="${a}">
|
|
270
|
+
</div>
|
|
271
|
+
<input type="hidden" name="action" value="${r(e.action)}">
|
|
272
|
+
${n?`<input type="hidden" name="successUrl" value="${n}">`:""}
|
|
273
|
+
${l?`<input type="hidden" name="errorUrl" value="${l}">`:""}`}function c(e){const a=d(),t=e.companyName?`Widerruf – ${r(e.companyName)}`:"Widerrufsformular",i=r(e.formAction??e.apiUrl??"/rest/v1/apiCancellation");return`<!DOCTYPE html>
|
|
274
|
+
<html lang="de">
|
|
275
|
+
<head>
|
|
276
|
+
<meta charset="UTF-8">
|
|
277
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
278
|
+
<title>${t}</title>
|
|
279
|
+
<style>
|
|
280
|
+
*, *::before, *::after { box-sizing: border-box; }
|
|
281
|
+
body { margin: 0; background: #f9fafb; }
|
|
282
|
+
.wrb-page {
|
|
283
|
+
min-height: 100vh;
|
|
284
|
+
display: flex;
|
|
285
|
+
align-items: flex-start;
|
|
286
|
+
justify-content: center;
|
|
287
|
+
padding: 40px 16px;
|
|
288
|
+
}
|
|
289
|
+
.wrb-page .wrb-modal { max-height: none; }
|
|
290
|
+
.wrb-page .wrb-modal-title { font-size: 20px; }
|
|
291
|
+
${s}
|
|
292
|
+
</style>
|
|
293
|
+
</head>
|
|
294
|
+
<body>
|
|
295
|
+
<div class="wrb-page">
|
|
296
|
+
<div class="wrb-modal">
|
|
297
|
+
<div class="wrb-modal-header">
|
|
298
|
+
<h1 class="wrb-modal-title">${t}</h1>
|
|
299
|
+
</div>
|
|
300
|
+
<div class="wrb-modal-body">
|
|
301
|
+
${e.introText?`<p class="wrb-intro">${r(e.introText)}</p>`:""}
|
|
302
|
+
<form method="POST" action="${i}" novalidate>
|
|
303
|
+
${b(e,a)}
|
|
304
|
+
<div class="wrb-actions">
|
|
305
|
+
<button type="submit" class="wrb-submit-btn">
|
|
306
|
+
${r(e.submitLabel??"Absenden")}
|
|
307
|
+
</button>
|
|
308
|
+
</div>
|
|
309
|
+
</form>
|
|
310
|
+
${o(e)}
|
|
311
|
+
</div>
|
|
312
|
+
</div>
|
|
313
|
+
</div>
|
|
314
|
+
</body>
|
|
315
|
+
</html>`}function p(e,{inlineStyles:a=!0}={}){const t=d(),i=e.companyName?`Widerruf – ${r(e.companyName)}`:"Widerrufsformular",n=r(e.formAction??e.apiUrl??"/rest/v1/apiCancellation"),l=`
|
|
316
|
+
#wrb-modal, #wrb-success, #wrb-error { display: none; }
|
|
317
|
+
#wrb-modal:target, #wrb-success:target, #wrb-error:target { display: flex; }`;return`${a?`<style>${l}
|
|
318
|
+
${s}</style>`:`<style>${l}</style>`}
|
|
319
|
+
|
|
320
|
+
<!-- Widerruf: Form-Modal -->
|
|
321
|
+
<div id="wrb-modal" class="wrb-overlay" role="dialog" aria-modal="true" aria-labelledby="wrb-modal-title">
|
|
322
|
+
<div class="wrb-modal">
|
|
323
|
+
<div class="wrb-modal-header">
|
|
324
|
+
<h2 class="wrb-modal-title" id="wrb-modal-title">${i}</h2>
|
|
325
|
+
<a href="#" class="wrb-close-btn" aria-label="Schließen">✕</a>
|
|
326
|
+
</div>
|
|
327
|
+
<div class="wrb-modal-body">
|
|
328
|
+
${e.introText?`<p class="wrb-intro">${r(e.introText)}</p>`:""}
|
|
329
|
+
<form method="POST" action="${n}" novalidate>
|
|
330
|
+
${b(e,t,"#wrb-success","#wrb-error")}
|
|
331
|
+
<div class="wrb-actions">
|
|
332
|
+
<a href="#" class="wrb-cancel-btn">${r(e.cancelLabel??"Abbrechen")}</a>
|
|
333
|
+
<button type="submit" class="wrb-submit-btn">
|
|
334
|
+
${r(e.submitLabel??"Absenden")}
|
|
335
|
+
</button>
|
|
336
|
+
</div>
|
|
337
|
+
</form>
|
|
338
|
+
${o(e)}
|
|
339
|
+
</div>
|
|
340
|
+
</div>
|
|
341
|
+
</div>
|
|
342
|
+
|
|
343
|
+
<!-- Widerruf: Success-Modal -->
|
|
344
|
+
<div id="wrb-success" class="wrb-overlay" role="dialog" aria-modal="true">
|
|
345
|
+
<div class="wrb-modal">
|
|
346
|
+
<div class="wrb-modal-header">
|
|
347
|
+
<h2 class="wrb-modal-title">Widerruf eingegangen</h2>
|
|
348
|
+
<a href="#" class="wrb-close-btn" aria-label="Schließen">✕</a>
|
|
349
|
+
</div>
|
|
350
|
+
<div class="wrb-modal-body">
|
|
351
|
+
<div class="wrb-success">
|
|
352
|
+
<span class="wrb-success-icon">✓</span>
|
|
353
|
+
<h3>Widerruf eingegangen</h3>
|
|
354
|
+
<p>
|
|
355
|
+
Ihr Widerruf wurde erfolgreich übermittelt. Sie erhalten in Kürze eine
|
|
356
|
+
Bestätigung per E-Mail.
|
|
357
|
+
</p>
|
|
358
|
+
</div>
|
|
359
|
+
${o(e)}
|
|
360
|
+
</div>
|
|
361
|
+
</div>
|
|
362
|
+
</div>
|
|
363
|
+
|
|
364
|
+
<!-- Widerruf: Error-Modal -->
|
|
365
|
+
<div id="wrb-error" class="wrb-overlay" role="alertdialog" aria-modal="true">
|
|
366
|
+
<div class="wrb-modal">
|
|
367
|
+
<div class="wrb-modal-header">
|
|
368
|
+
<h2 class="wrb-modal-title">Fehler beim Senden</h2>
|
|
369
|
+
<a href="#" class="wrb-close-btn" aria-label="Schließen">✕</a>
|
|
370
|
+
</div>
|
|
371
|
+
<div class="wrb-modal-body">
|
|
372
|
+
<div class="wrb-alert wrb-alert-error" role="alert">
|
|
373
|
+
Ihr Widerruf konnte leider nicht übermittelt werden. Bitte versuchen Sie es
|
|
374
|
+
erneut oder kontaktieren Sie uns direkt.
|
|
375
|
+
</div>
|
|
376
|
+
<div class="wrb-actions">
|
|
377
|
+
<a href="#" class="wrb-cancel-btn">Schließen</a>
|
|
378
|
+
<a href="#wrb-modal" class="wrb-submit-btn">Erneut versuchen</a>
|
|
379
|
+
</div>
|
|
380
|
+
${o(e)}
|
|
381
|
+
</div>
|
|
382
|
+
</div>
|
|
383
|
+
</div>`}exports.generateFallbackHtml=c;exports.generateModalHtml=p;
|
package/dist/fallback.d.ts
CHANGED
|
@@ -1,8 +1,25 @@
|
|
|
1
1
|
import { WiderrufsConfig } from './types';
|
|
2
2
|
/**
|
|
3
|
-
* Generates a complete, self-contained HTML page
|
|
4
|
-
* Works without JavaScript —
|
|
5
|
-
*
|
|
6
|
-
* dist/widerruf.html from any web server (ColdFusion, nginx, etc.).
|
|
3
|
+
* Generates a complete, self-contained HTML page with the Widerruf form.
|
|
4
|
+
* Works without JavaScript — submits via POST to config.formAction (or config.apiUrl).
|
|
5
|
+
* Use for dedicated /widerruf pages served from any stack.
|
|
7
6
|
*/
|
|
8
7
|
export declare function generateFallbackHtml(config: WiderrufsConfig): string;
|
|
8
|
+
/**
|
|
9
|
+
* Generates three CSS :target modals for embedding in existing pages:
|
|
10
|
+
* #wrb-modal — the Widerruf form
|
|
11
|
+
* #wrb-success — success confirmation (opens when server redirects to #wrb-success)
|
|
12
|
+
* #wrb-error — error alert with retry link (opens when server redirects to #wrb-error)
|
|
13
|
+
*
|
|
14
|
+
* With JavaScript: the IIFE replaces #wrb-container and uses the React modal instead.
|
|
15
|
+
* These static modals stay in the DOM but are never triggered.
|
|
16
|
+
*
|
|
17
|
+
* Trigger (place anywhere, e.g. footer):
|
|
18
|
+
* <div id="wrb-container" data-api-url="..."><a href="#wrb-modal" class="wrb-btn">Vertrag widerrufen</a></div>
|
|
19
|
+
*
|
|
20
|
+
* @param inlineStyles true (default) = include full CSS; false = only :target show/hide rules
|
|
21
|
+
* (set false when the IIFE stylesheet is already on the page)
|
|
22
|
+
*/
|
|
23
|
+
export declare function generateModalHtml(config: WiderrufsConfig, { inlineStyles }?: {
|
|
24
|
+
inlineStyles?: boolean;
|
|
25
|
+
}): string;
|