@netlib/widerrufsbutton 1.0.6 → 1.1.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 +6 -6
- package/dist/fallback.d.ts +8 -0
- package/dist/index.cjs.js +126 -2
- package/dist/index.d.ts +2 -1
- package/dist/index.es.js +273 -107
- package/dist/styles.d.ts +1 -0
- package/dist/types.d.ts +15 -1
- package/dist/widerruf.html +323 -0
- package/dist/widerrufsbutton.iife.js +29 -10
- package/package.json +3 -2
|
@@ -0,0 +1,323 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="de">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Widerrufsformular</title>
|
|
7
|
+
<style>
|
|
8
|
+
*, *::before, *::after { box-sizing: border-box; }
|
|
9
|
+
body { margin: 0; background: #f9fafb; }
|
|
10
|
+
.wrb-page {
|
|
11
|
+
min-height: 100vh;
|
|
12
|
+
display: flex;
|
|
13
|
+
align-items: flex-start;
|
|
14
|
+
justify-content: center;
|
|
15
|
+
padding: 40px 16px;
|
|
16
|
+
}
|
|
17
|
+
.wrb-page .wrb-modal { max-height: none; }
|
|
18
|
+
.wrb-page .wrb-modal-title { font-size: 20px; }
|
|
19
|
+
|
|
20
|
+
/* Widerrufsbutton widget — prefix: wrb- */
|
|
21
|
+
.wrb-btn {
|
|
22
|
+
display: inline-flex;
|
|
23
|
+
align-items: center;
|
|
24
|
+
gap: 6px;
|
|
25
|
+
padding: 10px 20px;
|
|
26
|
+
background: #c0392b;
|
|
27
|
+
color: #fff;
|
|
28
|
+
border: none;
|
|
29
|
+
border-radius: 6px;
|
|
30
|
+
font-size: 15px;
|
|
31
|
+
font-weight: 600;
|
|
32
|
+
cursor: pointer;
|
|
33
|
+
font-family: inherit;
|
|
34
|
+
transition: background 0.2s;
|
|
35
|
+
text-decoration: none;
|
|
36
|
+
}
|
|
37
|
+
.wrb-btn:hover { background: #a93226; }
|
|
38
|
+
.wrb-btn:focus-visible { outline: 3px solid #e74c3c; outline-offset: 2px; }
|
|
39
|
+
|
|
40
|
+
/* Overlay */
|
|
41
|
+
.wrb-overlay {
|
|
42
|
+
position: fixed;
|
|
43
|
+
inset: 0;
|
|
44
|
+
background: rgba(0,0,0,0.55);
|
|
45
|
+
display: flex;
|
|
46
|
+
align-items: center;
|
|
47
|
+
justify-content: center;
|
|
48
|
+
z-index: 99999;
|
|
49
|
+
padding: 16px;
|
|
50
|
+
animation: wrb-fade-in 0.15s ease;
|
|
51
|
+
}
|
|
52
|
+
@keyframes wrb-fade-in { from { opacity: 0 } to { opacity: 1 } }
|
|
53
|
+
|
|
54
|
+
/* Modal box */
|
|
55
|
+
.wrb-modal {
|
|
56
|
+
background: #fff;
|
|
57
|
+
border-radius: 10px;
|
|
58
|
+
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
|
59
|
+
width: 100%;
|
|
60
|
+
max-width: 540px;
|
|
61
|
+
max-height: 90vh;
|
|
62
|
+
overflow-y: auto;
|
|
63
|
+
animation: wrb-slide-up 0.2s ease;
|
|
64
|
+
font-family: system-ui, -apple-system, sans-serif;
|
|
65
|
+
font-size: 15px;
|
|
66
|
+
color: #1a1a1a;
|
|
67
|
+
}
|
|
68
|
+
@keyframes wrb-slide-up { from { transform: translateY(20px); opacity: 0 } to { transform: none; opacity: 1 } }
|
|
69
|
+
|
|
70
|
+
.wrb-modal-header {
|
|
71
|
+
display: flex;
|
|
72
|
+
align-items: flex-start;
|
|
73
|
+
justify-content: space-between;
|
|
74
|
+
padding: 20px 24px 16px;
|
|
75
|
+
border-bottom: 1px solid #e5e7eb;
|
|
76
|
+
gap: 12px;
|
|
77
|
+
}
|
|
78
|
+
.wrb-modal-title {
|
|
79
|
+
margin: 0;
|
|
80
|
+
font-size: 18px;
|
|
81
|
+
font-weight: 700;
|
|
82
|
+
color: #111;
|
|
83
|
+
line-height: 1.3;
|
|
84
|
+
}
|
|
85
|
+
.wrb-close-btn {
|
|
86
|
+
background: none;
|
|
87
|
+
border: none;
|
|
88
|
+
cursor: pointer;
|
|
89
|
+
color: #6b7280;
|
|
90
|
+
padding: 4px;
|
|
91
|
+
border-radius: 4px;
|
|
92
|
+
font-size: 20px;
|
|
93
|
+
line-height: 1;
|
|
94
|
+
flex-shrink: 0;
|
|
95
|
+
}
|
|
96
|
+
.wrb-close-btn:hover { color: #111; background: #f3f4f6; }
|
|
97
|
+
|
|
98
|
+
.wrb-modal-body {
|
|
99
|
+
padding: 20px 24px 24px;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.wrb-intro {
|
|
103
|
+
margin: 0 0 20px;
|
|
104
|
+
color: #4b5563;
|
|
105
|
+
line-height: 1.6;
|
|
106
|
+
font-size: 14px;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/* Form */
|
|
110
|
+
.wrb-field {
|
|
111
|
+
margin-bottom: 16px;
|
|
112
|
+
}
|
|
113
|
+
.wrb-label {
|
|
114
|
+
display: block;
|
|
115
|
+
font-size: 13px;
|
|
116
|
+
font-weight: 600;
|
|
117
|
+
color: #374151;
|
|
118
|
+
margin-bottom: 5px;
|
|
119
|
+
}
|
|
120
|
+
.wrb-required {
|
|
121
|
+
color: #c0392b;
|
|
122
|
+
margin-left: 2px;
|
|
123
|
+
}
|
|
124
|
+
.wrb-input,
|
|
125
|
+
.wrb-textarea {
|
|
126
|
+
width: 100%;
|
|
127
|
+
padding: 9px 12px;
|
|
128
|
+
border: 1.5px solid #d1d5db;
|
|
129
|
+
border-radius: 6px;
|
|
130
|
+
font-size: 15px;
|
|
131
|
+
font-family: inherit;
|
|
132
|
+
color: #111;
|
|
133
|
+
background: #fff;
|
|
134
|
+
box-sizing: border-box;
|
|
135
|
+
transition: border-color 0.15s;
|
|
136
|
+
}
|
|
137
|
+
.wrb-input:focus,
|
|
138
|
+
.wrb-textarea:focus {
|
|
139
|
+
outline: none;
|
|
140
|
+
border-color: #c0392b;
|
|
141
|
+
box-shadow: 0 0 0 3px rgba(192,57,43,0.12);
|
|
142
|
+
}
|
|
143
|
+
.wrb-input.wrb-error,
|
|
144
|
+
.wrb-textarea.wrb-error {
|
|
145
|
+
border-color: #c0392b;
|
|
146
|
+
}
|
|
147
|
+
.wrb-field-error {
|
|
148
|
+
color: #c0392b;
|
|
149
|
+
font-size: 12px;
|
|
150
|
+
margin-top: 4px;
|
|
151
|
+
}
|
|
152
|
+
.wrb-textarea { resize: vertical; min-height: 80px; }
|
|
153
|
+
|
|
154
|
+
.wrb-hint {
|
|
155
|
+
font-size: 12px;
|
|
156
|
+
color: #6b7280;
|
|
157
|
+
margin-top: 4px;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.wrb-date-display {
|
|
161
|
+
padding: 9px 12px;
|
|
162
|
+
background: #f9fafb;
|
|
163
|
+
border: 1.5px solid #e5e7eb;
|
|
164
|
+
border-radius: 6px;
|
|
165
|
+
color: #6b7280;
|
|
166
|
+
font-size: 15px;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
/* Actions */
|
|
170
|
+
.wrb-actions {
|
|
171
|
+
display: flex;
|
|
172
|
+
gap: 10px;
|
|
173
|
+
justify-content: flex-end;
|
|
174
|
+
margin-top: 24px;
|
|
175
|
+
padding-top: 16px;
|
|
176
|
+
border-top: 1px solid #e5e7eb;
|
|
177
|
+
}
|
|
178
|
+
.wrb-submit-btn {
|
|
179
|
+
padding: 10px 22px;
|
|
180
|
+
background: #c0392b;
|
|
181
|
+
color: #fff;
|
|
182
|
+
border: none;
|
|
183
|
+
border-radius: 6px;
|
|
184
|
+
font-size: 15px;
|
|
185
|
+
font-weight: 600;
|
|
186
|
+
cursor: pointer;
|
|
187
|
+
font-family: inherit;
|
|
188
|
+
transition: background 0.2s;
|
|
189
|
+
}
|
|
190
|
+
.wrb-submit-btn:hover:not(:disabled) { background: #a93226; }
|
|
191
|
+
.wrb-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
|
|
192
|
+
.wrb-cancel-btn {
|
|
193
|
+
padding: 10px 18px;
|
|
194
|
+
background: transparent;
|
|
195
|
+
color: #374151;
|
|
196
|
+
border: 1.5px solid #d1d5db;
|
|
197
|
+
border-radius: 6px;
|
|
198
|
+
font-size: 15px;
|
|
199
|
+
cursor: pointer;
|
|
200
|
+
font-family: inherit;
|
|
201
|
+
transition: background 0.15s;
|
|
202
|
+
}
|
|
203
|
+
.wrb-cancel-btn:hover { background: #f3f4f6; }
|
|
204
|
+
|
|
205
|
+
/* Success / Error states */
|
|
206
|
+
.wrb-success {
|
|
207
|
+
text-align: center;
|
|
208
|
+
padding: 32px 24px;
|
|
209
|
+
}
|
|
210
|
+
.wrb-success-icon { font-size: 48px; display: block; margin-bottom: 12px; }
|
|
211
|
+
.wrb-success h3 { margin: 0 0 8px; font-size: 20px; color: #111; }
|
|
212
|
+
.wrb-success p { margin: 0; color: #4b5563; line-height: 1.6; }
|
|
213
|
+
|
|
214
|
+
.wrb-alert {
|
|
215
|
+
padding: 12px 16px;
|
|
216
|
+
border-radius: 6px;
|
|
217
|
+
margin-bottom: 16px;
|
|
218
|
+
font-size: 14px;
|
|
219
|
+
}
|
|
220
|
+
.wrb-alert-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
|
|
221
|
+
|
|
222
|
+
/* Legal links */
|
|
223
|
+
.wrb-legal-links {
|
|
224
|
+
display: flex;
|
|
225
|
+
flex-wrap: wrap;
|
|
226
|
+
gap: 4px 16px;
|
|
227
|
+
margin-top: 16px;
|
|
228
|
+
padding-top: 12px;
|
|
229
|
+
border-top: 1px solid #e5e7eb;
|
|
230
|
+
}
|
|
231
|
+
.wrb-legal-link {
|
|
232
|
+
font-size: 12px;
|
|
233
|
+
color: #6b7280;
|
|
234
|
+
text-decoration: none;
|
|
235
|
+
}
|
|
236
|
+
.wrb-legal-link:hover {
|
|
237
|
+
color: #374151;
|
|
238
|
+
text-decoration: underline;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
</style>
|
|
242
|
+
</head>
|
|
243
|
+
<body>
|
|
244
|
+
<div class="wrb-page">
|
|
245
|
+
<div class="wrb-modal">
|
|
246
|
+
<div class="wrb-modal-header">
|
|
247
|
+
<h1 class="wrb-modal-title">Widerrufsformular</h1>
|
|
248
|
+
</div>
|
|
249
|
+
<div class="wrb-modal-body">
|
|
250
|
+
|
|
251
|
+
<form method="POST" action="/rest/v1/apiCancellation" novalidate>
|
|
252
|
+
<div class="wrb-field">
|
|
253
|
+
<label class="wrb-label">
|
|
254
|
+
Name <span class="wrb-required" aria-hidden="true">*</span>
|
|
255
|
+
</label>
|
|
256
|
+
<input
|
|
257
|
+
class="wrb-input"
|
|
258
|
+
type="text"
|
|
259
|
+
name="name"
|
|
260
|
+
autocomplete="name"
|
|
261
|
+
placeholder="Vor- und Nachname"
|
|
262
|
+
required
|
|
263
|
+
>
|
|
264
|
+
</div>
|
|
265
|
+
<div class="wrb-field">
|
|
266
|
+
<label class="wrb-label">
|
|
267
|
+
E-Mail-Adresse <span class="wrb-required" aria-hidden="true">*</span>
|
|
268
|
+
</label>
|
|
269
|
+
<input
|
|
270
|
+
class="wrb-input"
|
|
271
|
+
type="email"
|
|
272
|
+
name="email"
|
|
273
|
+
autocomplete="email"
|
|
274
|
+
placeholder="name@beispiel.de"
|
|
275
|
+
required
|
|
276
|
+
>
|
|
277
|
+
<p class="wrb-hint">Hierüber erhalten Sie die Eingangsbestätigung.</p>
|
|
278
|
+
</div>
|
|
279
|
+
<div class="wrb-field">
|
|
280
|
+
<label class="wrb-label">
|
|
281
|
+
Bestell- / Auftrags- / Vertragsnummer
|
|
282
|
+
<span class="wrb-required" aria-hidden="true">*</span>
|
|
283
|
+
</label>
|
|
284
|
+
<input
|
|
285
|
+
class="wrb-input"
|
|
286
|
+
type="text"
|
|
287
|
+
name="vertragId"
|
|
288
|
+
placeholder="z.B. 10045678"
|
|
289
|
+
required
|
|
290
|
+
>
|
|
291
|
+
<p class="wrb-hint">Zu finden in Ihrer Bestellbestätigung.</p>
|
|
292
|
+
</div>
|
|
293
|
+
<div class="wrb-field">
|
|
294
|
+
<label class="wrb-label">Widerrufsgrund</label>
|
|
295
|
+
<textarea
|
|
296
|
+
class="wrb-textarea"
|
|
297
|
+
name="widerrufsgrund"
|
|
298
|
+
placeholder="Optional"
|
|
299
|
+
rows="3"
|
|
300
|
+
></textarea>
|
|
301
|
+
<p class="wrb-hint">
|
|
302
|
+
Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.
|
|
303
|
+
</p>
|
|
304
|
+
</div>
|
|
305
|
+
<div class="wrb-field">
|
|
306
|
+
<label class="wrb-label">Datum der Widerrufserklärung</label>
|
|
307
|
+
<div class="wrb-date-display">08.06.2026</div>
|
|
308
|
+
<input type="hidden" name="datum" value="08.06.2026">
|
|
309
|
+
</div>
|
|
310
|
+
<input type="hidden" name="action" value="widerruf_submit">
|
|
311
|
+
|
|
312
|
+
<div class="wrb-actions">
|
|
313
|
+
<button type="submit" class="wrb-submit-btn">
|
|
314
|
+
Absenden
|
|
315
|
+
</button>
|
|
316
|
+
</div>
|
|
317
|
+
</form>
|
|
318
|
+
|
|
319
|
+
</div>
|
|
320
|
+
</div>
|
|
321
|
+
</div>
|
|
322
|
+
</body>
|
|
323
|
+
</html>
|